origam 2.5.0 → 2.6.2

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -99,31 +99,30 @@
 							:class="getSwitchThumbClasses(icon)"
 					>
 						<origam-translate-scale>
-							<template v-if="!loaderConfig.isActive">
-								<origam-icon
-										v-if="icon"
-										:icon="icon"
-										size="x-small"
-								/>
-							</template>
-
-							<template v-if="hasCircularLoading">
+							<div
+									v-if="hasCircularLoading"
+									class="origam-switch__loader"
+							>
 								<slot name="loader">
-									<div class="origam-switch__loader">
-										<origam-progress
-												:active="loaderConfig.isActive"
-												:color="color"
-												:indeterminate="loaderConfig.indeterminate"
-												:model-value="loaderConfig.modelValue"
-												:size="SIZES.X_SMALL"
-												:type="PROGRESS_TYPE.CIRCULAR"
-												class="origam-switch__progress origam-switch__progress--circular"
-												thickness="2"
-												v-bind="loaderConfig.overrides"
-										/>
-									</div>
+									<origam-progress
+											:active="loaderConfig.isActive"
+											:color="color"
+											:indeterminate="loaderConfig.indeterminate"
+											:model-value="loaderConfig.modelValue"
+											:size="SIZES.X_SMALL"
+											:type="PROGRESS_TYPE.CIRCULAR"
+											class="origam-switch__progress origam-switch__progress--circular"
+											thickness="2"
+											v-bind="loaderConfig.overrides"
+									/>
 								</slot>
-							</template>
+							</div>
+
+							<origam-icon
+									v-else-if="icon"
+									:icon="icon"
+									size="x-small"
+							/>
 						</origam-translate-scale>
 					</div>
 				</template>
@@ -132,7 +131,7 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
 import {
   OrigamIcon,
@@ -207,7 +206,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
@@ -223,10 +222,17 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, 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 },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, 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 },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
@@ -262,6 +268,7 @@ const handleChange = () => {
   }
 };
 const handleTrackClick = (_e) => {
+  ;
   origamSelectionControlRef.value?.inputRef?.click();
 };
 const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
@@ -271,9 +278,6 @@ const inputProps = computed(() => {
 const controlProps = computed(() => {
   return origamSelectionControlRef.value?.filterProps(props, ["modelValue", "type", "disabled", "readonly", "class", "style", "id"]);
 });
-const hasLoading = computed(() => {
-  return slots.loader || loaderConfig.value.isActive;
-});
 const isSkeletonLoading = computed(() => {
   return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
 });
@@ -498,12 +502,12 @@ defineExpose({
 			background-color: var(--origam-switch__thumb---background-color, rgb(255, 255, 255));
 			color: var(--origam-switch__thumb---color, currentColor);
 			border: 1px solid var(--origam-switch__thumb---border-color, rgba(0, 0, 0, 0.18));
-			border-radius: 50%;
+			border-radius: var(--origam-switch__thumb---border-radius, 50%);
 			display: flex;
 			font-size: 0.75rem;
-			height: 20px;
+			height: var(--origam-switch__thumb---size, 20px);
 			justify-content: center;
-			width: 20px;
+			width: var(--origam-switch__thumb---size, 20px);
 			pointer-events: none;
 			transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1), 0.2s color cubic-bezier(0.4, 0, 0.2, 1), 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1), 0.2s border-color cubic-bezier(0.4, 0, 0.2, 1);
 			position: relative;
@@ -613,9 +617,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/Switch/OrigamSwitchTrack.vue

@@ -33,7 +33,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, useSlots } from "vue";
 import {
   useBackgroundColor,
@@ -112,17 +112,16 @@ defineExpose({
 		font-size: 0.5rem;
 		padding: 0 5px;
 		background-color: var(--origam-switch__track---background-color, rgb(163, 163, 163));
-		border-radius: 9999px;
-		height: 14px;
-		opacity: 0.6;
-		min-width: 36px;
+		border-radius: var(--origam-switch__track---border-radius, 9999px);
+		height: var(--origam-switch__track---height, 14px);
+		min-width: var(--origam-switch__track---width, 36px);
 		cursor: pointer;
 		transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
+		overflow: hidden;
 
 		@media (prefers-reduced-motion: reduce) {
 			transition: none;
 		}
-		overflow: hidden;
 
 		@media (forced-colors: active) {
 			border: 1px solid;
@@ -152,6 +151,7 @@ defineExpose({
 
 		&--disabled {
 			cursor: default;
+			opacity: var(--origam-switch---opacity-disabled, 0.32);
 		}
 
 		&--dirty#{$this}--disabled {
@@ -166,10 +166,10 @@ defineExpose({
 		}
 
 		&--inset {
-			border-radius: 9999px;
+			border-radius: var(--origam-switch__track---border-radius, 9999px);
 			font-size: 0.75rem;
-			height: 32px;
-			min-width: 52px;
+			height: var(--origam-switch__track--inset---height, 32px);
+			min-width: var(--origam-switch__track--inset---width, 52px);
 
 			@media (forced-colors: active) {
 				border-width: 2px;
@@ -184,9 +184,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/SystemBar/OrigamSystemBar.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="systemBarClasses"
 			:style="systemBarStyles"
 	>
@@ -8,7 +9,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, shallowRef, StyleValue, toRef } from "vue";
 import {
   useBorder,
@@ -19,8 +20,10 @@ import {
   useProps,
   useRounded,
   useSsrBoot,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 const props = defineProps({
   window: { type: Boolean, required: false },
   id: { type: String, required: false },
@@ -53,19 +56,25 @@ const props = defineProps({
   maxWidth: { type: [Number, String], required: false },
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
-  width: { type: [Number, String], required: false }
+  width: { 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 { dimensionStyles } = useDimension(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedStyles, roundedClasses } = useRounded(props);
 const { elevationClasses } = useElevation(props);
+const { typographyStyles } = useTypography(props, "system-bar");
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { ssrBootStyles } = useSsrBoot();
 const height = computed(() => props.height ?? (props.window ? 32 : 24));
 const { layoutItemStyles } = useLayoutItem({
   id: props.name,
-  order: computed(() => parseInt(props.order, 10)),
+  order: computed(() => parseInt(String(props.order ?? 0), 10)),
   position: shallowRef("top"),
   layoutSize: height,
   elementSize: height,
@@ -78,6 +87,7 @@ const systemBarStyles = computed(() => {
     roundedStyles.value,
     dimensionStyles.value,
     colorStyles.value,
+    typographyStyles.value,
     ssrBootStyles.value,
     layoutItemStyles.value,
     props.style

package/dist/src/components/Table/OrigamTable.vue

@@ -17,6 +17,7 @@
 					<caption
 							v-if="caption"
 							:class="['origam-table__caption', {'origam-table__caption--visible': captionVisible}]"
+							:style="captionTypographyStyles"
 					>{{ caption }}</caption>
 					<slot name="default"/>
 				</table>
@@ -27,7 +28,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, useSlots } from "vue";
 import {
   useDensity,
@@ -35,7 +36,8 @@ import {
   useHover,
   useProps,
   useStateEffect,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { DENSITY } from "../../enums";
 const props = defineProps({
@@ -84,7 +86,12 @@ const props = defineProps({
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  tag: { type: String, required: false, default: "div" }
+  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 }
 });
 const { filterProps } = useProps(props);
 const slots = useSlots();
@@ -102,12 +109,17 @@ const {
   marginClasses,
   marginStyles
 } = useStateEffect(props, isHover, void 0, hoverState);
+const { typographyStyles: tableTypographyStyles } = useTypography(props, "table");
+const { typographyStyles: captionTypographyStyles } = useTypography(props, "table__caption");
+const { typographyStyles: headerCellTypographyStyles } = useTypography(props, "table__header-cell");
 const tableStyles = computed(() => {
   return [
     borderStyles.value,
     roundedStyles.value,
     paddingStyles.value,
     marginStyles.value,
+    tableTypographyStyles.value,
+    headerCellTypographyStyles.value,
     props.style
   ];
 });

package/dist/src/components/Tabs/OrigamTab.vue

@@ -3,6 +3,7 @@
 			:is="tag"
 			:id="tabDomId"
 			ref="rootRef"
+			v-contrast
 			role="tab"
 			type="button"
 			:class="tabClasses"
@@ -46,15 +47,17 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, ref, StyleValue } from "vue";
 import { OrigamIcon } from "../../components";
 import {
   useDefaults,
   useGroupItem,
   useProps,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { ORIGAM_TABS_KEY, ORIGAM_TAB_PANELS_KEY } from "../../consts";
 const _props = defineProps({
   text: { type: String, required: false, default: "" },
@@ -67,7 +70,12 @@ const _props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   value: { type: null, required: false, default: void 0 },
   disabled: { type: Boolean, required: false },
-  selectedClass: { type: String, required: false }
+  selectedClass: { 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 }
 });
 const props = useDefaults(_props);
 const { filterProps } = useProps(props);
@@ -102,8 +110,10 @@ const handleClick = (event) => {
   groupItem.select(true);
 };
 const hasIndicator = computed(() => props.variant === "underline");
+const { typographyStyles } = useTypography(props, "tabs__item");
 const tabStyles = computed(() => {
   return [
+    typographyStyles.value,
     props.style
   ];
 });

package/dist/src/components/Tabs/OrigamTabPanel.vue

@@ -23,7 +23,7 @@
 	</Transition>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, ref, StyleValue } from "vue";
 import {
   useGroupItem,

package/dist/src/components/Tabs/OrigamTabPanels.vue

@@ -16,7 +16,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, provide, ref, shallowRef, StyleValue, watch } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -18,7 +18,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {

package/dist/src/components/TextField/OrigamTextField.vue

@@ -184,7 +184,7 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, toRef, StyleValue, useAttrs, useSlots, watch } from "vue";
 import { OrigamCounter, OrigamField, OrigamInput } from "../../components";
 import {
@@ -231,6 +231,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 },
@@ -273,6 +275,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 },

package/dist/src/components/TextMask/OrigamTextMask.vue

@@ -10,28 +10,29 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   useSlots
 } from "vue";
-import { resolveGradient } from "../../utils/Commons/gradient.util.ts";
+import { resolveGradient } from "../../utils/Commons/gradient.util";
+import { useTypography } from "../../composables";
 const props = defineProps({
   text: { type: String, required: false },
   background: { type: [String, Object], required: true },
   animated: { type: Boolean, required: false, default: false },
   animationDuration: { type: String, required: false, default: "3s" },
   animationType: { type: String, required: false, default: "pan" },
-  fontSize: { type: [String, Number], required: false, default: "inherit" },
-  fontWeight: { type: [String, Number], required: false, default: "inherit" },
-  fontFamily: { type: String, required: false, default: "inherit" },
-  lineHeight: { type: [String, Number], required: false, default: 1.1 },
-  letterSpacing: { type: String, required: false },
   align: { type: String, required: false, default: "left" },
   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: "span" }
+  tag: { type: String, required: false, default: "span" },
+  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 slots = useSlots();
 const resolvedBackground = computed(() => {
@@ -39,14 +40,7 @@ const resolvedBackground = computed(() => {
   if (fromGradient) return fromGradient;
   return typeof props.background === "string" ? props.background : "";
 });
-const cssDimension = (v, fallback) => {
-  if (v === void 0 || v === null || v === "") return fallback;
-  return typeof v === "number" ? `${v}px` : v;
-};
-const cssUnitless = (v, fallback) => {
-  if (v === void 0 || v === null || v === "") return fallback;
-  return String(v);
-};
+const { typographyStyles } = useTypography(props, "text-mask");
 const hasSlot = computed(() => Boolean(slots.default));
 const textMaskClasses = computed(() => {
   return [
@@ -63,13 +57,9 @@ const textMaskStyles = computed(() => {
   return [
     {
       "--origam-text-mask---bg": resolvedBackground.value,
-      "--origam-text-mask---duration": props.animationDuration,
-      "--origam-text-mask---font-size": cssDimension(props.fontSize, "inherit"),
-      "--origam-text-mask---font-weight": cssUnitless(props.fontWeight, "inherit"),
-      "--origam-text-mask---font-family": props.fontFamily ?? "inherit",
-      "--origam-text-mask---line-height": cssUnitless(props.lineHeight, "1.1"),
-      "--origam-text-mask---letter-spacing": props.letterSpacing ?? "normal"
+      "--origam-text-mask---duration": props.animationDuration
     },
+    typographyStyles.value,
     props.style
   ];
 });
@@ -90,11 +80,11 @@ defineExpose({
 		background-clip: text;
 		-webkit-text-fill-color: transparent;
 		color: transparent;
-		font-size: var(--origam-text-mask---font-size);
-		font-weight: var(--origam-text-mask---font-weight);
-		font-family: var(--origam-text-mask---font-family);
-		line-height: var(--origam-text-mask---line-height);
-		letter-spacing: var(--origam-text-mask---letter-spacing);
+		font-size:      var(--origam-text-mask---font-size, var(--origam-text-mask---font-size-default));
+		font-weight:    var(--origam-text-mask---font-weight, var(--origam-text-mask---font-weight-default));
+		font-family:    var(--origam-text-mask---font-family, inherit);
+		line-height:    var(--origam-text-mask---line-height, var(--origam-text-mask---line-height-default));
+		letter-spacing: var(--origam-text-mask---letter-spacing, normal);
 	}
 
 	.origam-text-mask--align-left {

package/dist/src/components/TextareaField/OrigamRichToolbar.vue

@@ -10,12 +10,14 @@
 				v-for="item in items"
 				:key="item"
 		>
-			<button
+			<origam-btn
 					v-if="!isLink(item)"
-					type="button"
+					variant="text"
+					:icon="true"
 					class="origam-rich-toolbar__btn"
 					:class="btnClassFor(item)"
 					:disabled="disabled || undefined"
+					:active="isActive(item)"
 					:aria-label="labelFor(item)"
 					:aria-pressed="isActive(item) ? 'true' : 'false'"
 					:data-command="item"
@@ -24,16 +26,18 @@
 					@click="emit('format', item)"
 			>
 				<origam-icon :name="iconFor(item)"/>
-			</button>
+			</origam-btn>
 			<div
 					v-else
 					class="origam-rich-toolbar__link-host"
 			>
-				<button
-						type="button"
+				<origam-btn
+						variant="text"
+						:icon="true"
 						class="origam-rich-toolbar__btn"
 						:class="btnClassFor(item)"
 						:disabled="disabled || undefined"
+						:active="isActive(item)"
 						:aria-label="labelFor(item)"
 						:aria-pressed="isActive(item) ? 'true' : 'false'"
 						:aria-expanded="linkPopoverOpen ? 'true' : 'false'"
@@ -43,7 +47,7 @@
 						@click="openLinkPopover"
 				>
 					<origam-icon :name="iconFor(item)"/>
-				</button>
+				</origam-btn>
 				<div
 						v-if="linkPopoverOpen"
 						class="origam-rich-toolbar__link-popover"
@@ -60,8 +64,8 @@
 							@keydown.enter.prevent="applyLink"
 							@keydown.escape.prevent="closeLinkPopover"
 					>
-					<button
-							type="button"
+					<origam-btn
+							variant="text"
 							class="origam-rich-toolbar__btn origam-rich-toolbar__link-apply"
 							:aria-label="linkApplyLabel"
 							data-cy="origam-rich-toolbar-link-apply"
@@ -69,16 +73,16 @@
 							@click="applyLink"
 					>
 						{{ linkApplyLabel }}
-					</button>
+					</origam-btn>
 				</div>
 			</div>
 		</template>
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref } from "vue";
-import { OrigamIcon } from "../../components";
+import { OrigamBtn, OrigamIcon } from "../../components";
 import { useLocale } from "../../composables";
 import { MDI_ICONS, TEXTAREA_TOOLBAR_COMMAND, TEXTAREA_TOOLBAR_POSITION } from "../../enums";
 const props = defineProps({

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -97,6 +97,7 @@
 							<div
 									ref="richHostRef"
 									class="origam-textarea-field__rich"
+									:style="typographyStyles"
 									role="textbox"
 									aria-multiline="true"
 									:aria-disabled="isDisabled || undefined"
@@ -248,7 +249,7 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   nextTick,
@@ -274,6 +275,7 @@ import {
   useProps,
   useStyle,
   useTextareaRich,
+  useTypography,
   useVModel
 } from "../../composables";
 import { DEFAULT_TOOLBAR } from "../../consts";
@@ -321,6 +323,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 },
@@ -363,6 +367,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 },
@@ -657,6 +666,7 @@ const textareaFieldFieldStyles = computed(() => {
     "--origam-textarea-field__control---height": convertToUnit(controlHeight.value)
   };
 });
+const { typographyStyles } = useTypography(props, "textarea-field__rich-content");
 const { filterProps } = useProps(props);
 const { id, css, load, isLoaded, unload } = useStyle(textareaFieldStyles);
 defineExpose(forwardRefs({

package/dist/src/components/ThemeProvider/OrigamThemeProvider.vue

@@ -3,20 +3,23 @@
 			:is="tag"
 			:class="themeProviderClasses"
 			:data-theme="dataTheme"
+			:data-mode="dataMode"
 	>
 		<slot/>
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, useAttrs } from "vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   theme: { type: [String, Object], required: false, default: "auto" },
+  mode: { type: String, required: false, default: "auto" },
   tag: { type: String, required: false, default: "div" }
 });
 const attrs = useAttrs();
 const dataTheme = computed(() => props.theme === "auto" ? void 0 : props.theme);
+const dataMode = computed(() => props.mode === "auto" ? void 0 : props.mode);
 const themeProviderClasses = computed(() => {
   return ["origam-theme-provider", attrs.class];
 });