origam 2.15.0 → 2.16.0

package/dist/src/components/SliderField/OrigamSliderField.vue

@@ -524,11 +524,11 @@ 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 },
+  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 },
   ripple: { type: [Boolean, Object], required: false }
 });
 const props = useDefaults(_props);

package/dist/src/components/SliderField/OrigamSliderFieldTrack.vue

@@ -105,14 +105,11 @@ const size = computed(() => {
 const showTicks = computed(() => {
   return !!props.showTicks;
 });
-const roundedProps = computed(() => {
-  return props.rounded;
-});
 const parsedTicks = computed(() => {
   const ticks = props.ticks ?? [];
   return props.isVertical ? ticks.slice().reverse() : ticks;
 });
-const { roundedClasses, roundedStyles } = useRounded(roundedProps);
+const { roundedClasses, roundedStyles } = useRounded(props);
 const {
   backgroundColorClasses: trackFillColorClasses,
   backgroundColorStyles: trackFillColorStyles

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -203,6 +203,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineSlots();
+defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const isActive = useVModel(props, "modelValue");

package/dist/src/components/Snackbar/OrigamSnackbarGroup.vue

@@ -36,10 +36,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, StyleValue } from "vue";
+import { computed, ref, StyleValue, watch } from "vue";
 import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
 import { useProps, useStyle } from "../../composables";
 import { useSnackbarGroupInternal } from "../../composables/Snackbar/snackbar-group.composable";
+import { INTENT, SNACKBAR_GROUP_DIRECTION } from "../../enums";
 import {
   SNACKBAR_GROUP_DEFAULT_DURATION,
   SNACKBAR_GROUP_DEFAULT_ID,
@@ -48,29 +49,32 @@ import {
 } from "../../consts";
 const props = defineProps({
   id: { type: String, required: false, default: SNACKBAR_GROUP_DEFAULT_ID },
-  location: { type: String, required: false, default: "bottom-right" },
+  location: { type: null, required: false, default: "bottom-right" },
   max: { type: Number, required: false, default: SNACKBAR_GROUP_DEFAULT_MAX },
   defaultDuration: { type: Number, required: false, default: SNACKBAR_GROUP_DEFAULT_DURATION },
   spacing: { type: [String, Number], required: false, default: SNACKBAR_GROUP_DEFAULT_SPACING },
-  direction: { type: String, required: false },
+  direction: { type: null, 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" }
 });
 const { filterProps } = useProps(props);
 const rootRef = ref();
-const { rawItems } = useSnackbarGroupInternal(props.id);
+const { rawItems, registerDefaultDuration } = useSnackbarGroupInternal(props.id);
+watch(() => props.defaultDuration, (duration) => {
+  registerDefaultDuration(duration);
+}, { immediate: true });
 const visibleItems = computed(() => {
   const items = rawItems.value;
   const sliced = items.slice(-props.max);
-  return effectiveDirection.value === "bottom-up" ? [...sliced].reverse() : sliced;
+  return effectiveDirection.value === SNACKBAR_GROUP_DIRECTION.BOTTOM_UP ? [...sliced].reverse() : sliced;
 });
 const effectiveDirection = computed(() => {
   if (props.direction) return props.direction;
-  return props.location.startsWith("top") ? "top-down" : "bottom-up";
+  return props.location.startsWith("top") ? SNACKBAR_GROUP_DIRECTION.TOP_DOWN : SNACKBAR_GROUP_DIRECTION.BOTTOM_UP;
 });
 const resolveAriaRole = (intent) => {
-  return intent === "warning" || intent === "danger" ? "alert" : "status";
+  return intent === INTENT.WARNING || intent === INTENT.DANGER ? "alert" : "status";
 };
 const resolveAriaLive = (intent) => {
   return intent === "warning" || intent === "danger" ? "assertive" : "polite";

package/dist/src/components/Snackbar/OrigamSnackbarItem.vue

@@ -10,12 +10,12 @@
   >
     <div class="origam-snackbar-item__content">
       <div
-        v-if="resolvedIcon !== false"
+        v-if="hasPrepend"
         class="origam-snackbar-item__prepend"
       >
         <slot name="prepend">
           <origam-icon
-            :icon="resolvedIcon"
+            :icon="iconToRender"
             :size="24"
           />
         </slot>
@@ -74,7 +74,7 @@
 <script lang="ts" setup>
 import { computed, useSlots } from "vue";
 import { OrigamBtn, OrigamIcon } from "../../components";
-import { useLocale, useProps, useTypography } from "../../composables";
+import { useLocale, usePassedProps, useProps, useTypography } from "../../composables";
 import { vContrast } from "../../directives";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
@@ -91,15 +91,16 @@ 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 },
-  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 }
+  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 }
 });
 const { t } = useLocale();
 const dismissLabel = computed(() => props.dismissLabel ?? t("origam.snackbar.dismiss", "Dismiss notification"));
 const { filterProps } = useProps(props);
+const wasIconPassed = usePassedProps(props, "OrigamSnackbarItem");
 const { typographyStyles } = useTypography(props, "snackbar-item");
 const slots = useSlots();
 const emit = defineEmits(["dismiss", "action"]);
@@ -115,10 +116,15 @@ const INTENT_ICONS = {
   info: MDI_ICONS.INFORMATION
 };
 const resolvedIcon = computed(() => {
-  if (props.icon === false) return false;
-  if (props.icon) return props.icon;
+  if (wasIconPassed("icon")) return props.icon;
   return INTENT_ICONS[props.intent ?? "info"];
 });
+const hasPrepend = computed(() => {
+  return resolvedIcon.value !== false || !!slots["prepend"];
+});
+const iconToRender = computed(() => {
+  return resolvedIcon.value === false ? void 0 : resolvedIcon.value;
+});
 const resolvedRole = computed(() => {
   if (props.role) return props.role;
   return props.intent === "warning" || props.intent === "danger" ? "alert" : "status";

package/dist/src/components/Stepper/OrigamStepper.vue

@@ -34,7 +34,7 @@
 import { computed, provide, ref, StyleValue, useSlots, watch } from "vue";
 import { OrigamStepperItem } from "../../components";
 import { ORIGAM_STEPPER_KEY } from "../../consts";
-import { DENSITY, SIZES } from "../../enums";
+import { DENSITY, DIRECTION, SIZES } from "../../enums";
 import { vContrast } from "../../directives";
 import {
   useDensity,
@@ -109,7 +109,7 @@ watch(() => props.modelValue, (val) => {
 });
 provide(ORIGAM_STEPPER_KEY, {
   modelValue: internalModel,
-  orientation: computed(() => props.orientation ?? "horizontal"),
+  orientation: computed(() => props.orientation ?? DIRECTION.HORIZONTAL),
   clickable: computed(() => props.clickable ?? false),
   color: computed(() => props.color)
 });
@@ -161,7 +161,7 @@ const stepperStyles = computed(() => {
 });
 const stepperClasses = computed(() => [
   "origam-stepper",
-  `origam-stepper--${props.orientation ?? "horizontal"}`,
+  `origam-stepper--${props.orientation ?? DIRECTION.HORIZONTAL}`,
   colorClasses.value,
   densityClasses.value,
   sizeClasses.value,

package/dist/src/components/Stepper/OrigamStepperItem.vue

@@ -3,9 +3,9 @@
 			:is="isClickable ? 'button' : 'div'"
 			:class="itemClasses"
 			:type="isClickable ? 'button' : undefined"
-			:aria-current="resolvedStatus === 'active' ? 'step' : undefined"
+			:aria-current="resolvedStatus === STEPPER_ITEM_STATUS.ACTIVE ? 'step' : undefined"
 			:aria-label="stepAriaLabel"
-			:disabled="isClickable && resolvedStatus === 'active' ? true : undefined"
+			:disabled="isClickable && resolvedStatus === STEPPER_ITEM_STATUS.ACTIVE ? true : undefined"
 			@click="handleClick"
 	>
 		<span
@@ -13,10 +13,10 @@
 				:class="indicatorClasses"
 				aria-hidden="true"
 		>
-			<template v-if="resolvedStatus === 'done'">
+			<template v-if="resolvedStatus === STEPPER_ITEM_STATUS.DONE">
 				<origam-icon :icon="MDI_ICONS.CHECK" />
 			</template>
-			<template v-else-if="resolvedStatus === 'error'">
+			<template v-else-if="resolvedStatus === STEPPER_ITEM_STATUS.ERROR">
 				<origam-icon :icon="MDI_ICONS.EXCLAMATION" />
 			</template>
 			<template v-else-if="icon">
@@ -44,7 +44,7 @@
 import { computed, inject } from "vue";
 import { OrigamIcon } from "../../components";
 import { ORIGAM_STEPPER_KEY } from "../../consts";
-import { MDI_ICONS } from "../../enums";
+import { DIRECTION, MDI_ICONS, STEPPER_ITEM_STATUS } from "../../enums";
 import { useLocale, useProps } from "../../composables";
 import { vContrast } from "../../directives";
 const props = defineProps({
@@ -52,7 +52,7 @@ const props = defineProps({
   title: { type: String, required: false },
   subtitle: { type: String, required: false },
   icon: { type: null, required: false },
-  status: { type: String, required: false },
+  status: { type: null, required: false },
   clickable: { type: Boolean, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -74,9 +74,9 @@ const resolvedStatus = computed(() => {
   if (props.status !== void 0) return props.status;
   const modelValue = stepper?.modelValue.value ?? 0;
   const idx = props.index ?? 0;
-  if (idx < modelValue) return "done";
-  if (idx === modelValue) return "active";
-  return "pending";
+  if (idx < modelValue) return STEPPER_ITEM_STATUS.DONE;
+  if (idx === modelValue) return STEPPER_ITEM_STATUS.ACTIVE;
+  return STEPPER_ITEM_STATUS.PENDING;
 });
 const handleClick = () => {
   if (!isClickable.value) return;
@@ -85,7 +85,7 @@ const handleClick = () => {
     stepper.modelValue.value = props.index ?? 0;
   }
 };
-const orientation = computed(() => stepper?.orientation.value ?? "horizontal");
+const orientation = computed(() => stepper?.orientation.value ?? DIRECTION.HORIZONTAL);
 const itemClasses = computed(() => [
   "origam-stepper-item",
   `origam-stepper-item--${resolvedStatus.value}`,

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

@@ -4,7 +4,7 @@
     class="origam-switch__skeleton"
     :class="{ 'origam-switch__skeleton--inset': inset }"
     aria-busy="true"
-    aria-label="Loading"
+    :aria-label="loadingLabel"
     role="status"
     data-cy="origam-switch-skeleton"
   >
@@ -149,13 +149,14 @@ import {
   useFocus,
   useHover,
   useLoader,
+  useLocale,
   useProps,
   useRounded,
   useStateEffect,
   useStyle,
   useVModel
 } from "../../composables";
-import { DENSITY, PROGRESS_TYPE, SIZES } from "../../enums";
+import { DENSITY, LOADER_KIND, PROGRESS_TYPE, SIZES } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
 const _props = defineProps({
   indeterminate: { type: Boolean, required: false },
@@ -231,11 +232,11 @@ 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 },
+  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 },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
@@ -269,7 +270,9 @@ const model = useVModel(props, "modelValue");
 const { isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
 const attrs = useAttrs();
 const slots = useSlots();
-const { loaderClasses, loaderConfig } = useLoader(props, "circular");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.CIRCULAR);
+const { t } = useLocale();
+const loadingLabel = computed(() => t("origam.loading"));
 const uid = getUid();
 const id = computed(() => {
   return props.id || `switch-${uid}`;
@@ -346,14 +349,6 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-  /*
-   * Skeleton placeholder mimicking the switch silhouette — a 52×32
-   * rounded track + a 20px circular thumb pinned to the left so the
-   * shape is unmistakably a switch (vs the previous plain rectangle
-   * which looked like a generic loading bar). Both halves share the
-   * `--origam-switch__skeleton-bg` pulse animation inherited from
-   * the broader skeleton token so the rhythm matches OrigamSkeleton.
-   */
   @keyframes origam-switch-skeleton-pulse {
     0%, 100% {
       opacity: 1;
@@ -395,7 +390,6 @@ defineExpose({
 
     &--inset {
       .origam-switch__skeleton-thumb {
-        /* inset switches use a 24px thumb that overflows the track */
         width: 24px;
         height: 24px;
         left: 4px;
@@ -410,29 +404,10 @@ defineExpose({
       padding-inline-start: 10px;
     }
 
-    /*
-     * Line loader — thin linear progress positioned ON the track,
-     * spanning the full switch footprint (46×14 standard or 52×32
-     * inset). Sits BEHIND the thumb so the thumb stays visually
-     * dominant and the consumer still sees the on/off position
-     * while the background indicates async work in flight.
-     *
-     * `OrigamProgressLinear` ships an inline `height: thickness`
-     * (4 px default) that wins over standard CSS — we force it
-     * to 100 % via `:deep()` so the bar fills the track height
-     * regardless of the standard / inset variant.
-     */
     &__progress--linear {
       position: absolute !important;
       inset: 0 !important;
       width: 100% !important;
-      /*
-       * `OrigamProgressLinear` inlines `height: 4px` on its root via
-       * `:style="{ height: thickness }"`, which beats any non-important
-       * scoped rule. `!important` here is the only way to expand the
-       * loader to the full track height without subclassing the
-       * progress component.
-       */
       height: 100% !important;
       line-height: 1 !important;
       border-radius: inherit;
@@ -467,24 +442,6 @@ defineExpose({
     .origam-selection-control {
       min-height: calc(var(--origam-switch__selection-control---min-height, 56px) + var(--origam-input---density, 0px));
 
-      /*
-       * The base SelectionControl wrapper reserves a fixed
-       * `calc(40px + 1.5 * density)` box sized for a checkbox/radio
-       * input glyph. Switch instead renders a variable-width track
-       * (36–52px depending on `--origam-switch__track---width` /
-       * the `inset` variant, plus its own horizontal padding) as
-       * the wrapper's only in-flow child — `__input` is forced
-       * `position: absolute` below so it no longer participates in
-       * the flex layout. That fixed formula was never track-aware:
-       * under `density="compact"` (-8px) the wrapper shrinks to
-       * 28px while the standard track needs ~46px, so the track
-       * visually overflows into the neighbouring label ("Flat"
-       * rendering as "lat"). Let the wrapper size to its actual
-       * content (`max-content`) instead, keeping the original
-       * density formula only as a floor via `min-width`/`min-height`
-       * so the checkbox-sized footprint is preserved whenever the
-       * track is smaller than it (never smaller than before).
-       */
       :deep(.origam-selection-control__wrapper) {
         width: max-content;
         height: max-content;

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

@@ -61,11 +61,11 @@ const props = defineProps({
   minHeight: { type: [Number, String], required: false },
   minWidth: { 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 }
+  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 }
 });
 const { filterProps } = useProps(props);
 defineSlots();

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

@@ -92,11 +92,11 @@ 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 }
+  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 }
 });
 const props = useDefaults(_props);
 defineSlots();

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

@@ -89,11 +89,11 @@ const _props = defineProps({
   value: { type: null, required: false, default: void 0 },
   disabled: { type: Boolean, 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 },
+  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 },
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },

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

@@ -21,10 +21,12 @@ import { computed, provide, ref, shallowRef, StyleValue, watch } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {
   useGroup,
+  usePassedProps,
   useProps,
   useStyle
 } from "../../composables";
 import { ORIGAM_TAB_PANELS_KEY, ORIGAM_TAB_PANELS_CTX_KEY } from "../../consts";
+import { omitUndefined } from "../../utils";
 import { vTouch } from "../../directives";
 import { DIRECTION } from "../../enums";
 const props = defineProps({
@@ -78,10 +80,11 @@ const slotProps = computed(() => ({
   selected,
   items: items.value
 }));
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-tab-panel": {
-    transition: props.transition
-  }
+  "origam-tab-panel": omitUndefined({
+    transition: wasPropPassed("transition") ? props.transition : void 0
+  })
 }));
 const panelsStyles = computed(() => {
   return [

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

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="props.tag"
+			:is="tag"
 			:id="id"
 			ref="rootRef"
 			role="tablist"
@@ -25,11 +25,13 @@ import {
   useDefaults,
   useDensity,
   useGroup,
+  usePassedProps,
   useProps,
   useRounded,
   useStyle
 } from "../../composables";
 import { ORIGAM_TABS_KEY } from "../../consts";
+import { omitUndefined } from "../../utils";
 import { DENSITY, DIRECTION, TAB_VARIANT } from "../../enums";
 const _props = defineProps({
   tag: { type: String, required: false, default: "div" },
@@ -69,13 +71,14 @@ const slotProps = computed(() => ({
   selected,
   items: items.value
 }));
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-tab": {
-    density: props.density,
-    color: props.color,
+  "origam-tab": omitUndefined({
     variant: props.variant,
-    fixed: props.fixed
-  }
+    density: wasPropPassed("density") ? props.density : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    fixed: wasPropPassed("fixed") ? props.fixed : void 0
+  })
 }));
 const ariaOrientation = computed(() => props.direction === DIRECTION.VERTICAL ? "vertical" : "horizontal");
 const focusTab = (id2) => {

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

@@ -279,11 +279,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 },
+  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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },

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

@@ -22,17 +22,17 @@ const props = defineProps({
   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" },
-  align: { type: String, required: false, default: "left" },
+  animationType: { type: null, required: false, default: "pan" },
+  align: { type: null, 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" },
-  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 }
+  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 }
 });
 defineSlots();
 const slots = useSlots();

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

@@ -275,6 +275,7 @@ import {
   useProps,
   useStyle,
   useTextareaRich,
+  useTheme,
   useTypography,
   useVModel
 } from "../../composables";
@@ -371,11 +372,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 },
+  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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -585,7 +586,8 @@ const calculateInputHeight = () => {
     emits("update:height", controlHeight.value);
   });
 };
-watch([model, () => props.maxRows, () => props.density, () => props.rows], () => {
+const { theme: activeTheme, mode: activeMode } = useTheme();
+watch([model, () => props.maxRows, () => props.density, () => props.rows, activeTheme, activeMode], () => {
   calculateInputHeight();
 }, { immediate: true });
 watch(minHeight, () => {

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

@@ -15,8 +15,8 @@ import { provideDefaults } from "../../composables";
 import { ORIGAM_DEFAULTS_KEY, ORIGAM_THEME_DEFAULTS_KEY } from "../../consts";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  theme: { type: [String, Object], required: false, default: "auto" },
-  mode: { type: String, required: false, default: "auto" },
+  theme: { type: null, required: false, default: "auto" },
+  mode: { type: null, required: false, default: "auto" },
   tag: { type: String, required: false, default: "div" }
 });
 defineSlots();

package/dist/src/components/Timeline/OrigamTimeline.vue

@@ -7,7 +7,7 @@
 		:aria-label="ariaLabel"
 	>
 		<div
-				v-if="orientation === 'horizontal'"
+				v-if="isHorizontal"
 				class="origam-timeline__track-wrapper"
 		>
 			<slot name="default">
@@ -21,7 +21,7 @@
 					:intent="entry.intent"
 					:is-last="index === (items?.length ?? 0) - 1"
 					:truncate-line="truncateLine ?? false"
-					:side="side ?? 'start'"
+					:side="side ?? TIMELINE_SIDE.START"
 					:orientation="orientation"
 					:index="index"
 					:data-cy="`timeline-item-${index}`"
@@ -59,10 +59,11 @@ import {
   useStyle
 } from "../../composables";
 import { TIMELINE_CONTEXT_KEY } from "../../consts";
+import { DIRECTION, TIMELINE_SIDE } from "../../enums";
 const props = defineProps({
   items: { type: Array, required: false },
   orientation: { type: null, required: false, default: "vertical" },
-  side: { type: String, required: false, default: "start" },
+  side: { type: null, required: false, default: "start" },
   truncateLine: { type: Boolean, required: false, default: false },
   ariaLabel: { type: String, required: false },
   id: { type: String, required: false },
@@ -75,12 +76,13 @@ const props = defineProps({
 });
 const { filterProps } = useProps(props);
 defineSlots();
-const orientation = computed(() => props.orientation ?? "vertical");
+const orientation = computed(() => props.orientation ?? DIRECTION.VERTICAL);
+const isHorizontal = computed(() => orientation.value === DIRECTION.HORIZONTAL);
 const { densityClasses } = useDensity(props);
 const { sizeClasses } = useSize(props);
 provide(TIMELINE_CONTEXT_KEY, {
   get side() {
-    return props.side ?? "start";
+    return props.side ?? TIMELINE_SIDE.START;
   },
   get truncateLine() {
     return props.truncateLine ?? false;