origam 2.3.0 → 2.6.1

package/dist/src/components/OtpInputField/OrigamOtpInputField.vue

@@ -66,6 +66,7 @@
 								:value="model[i]"
 								autocomplete="one-time-code"
 								class="origam-otp-input-field__field"
+								:style="typographyStyles"
 								@blur="handleBlur"
 								@focus="handleFocus($event, i)"
 								@input="handleInput"
@@ -113,7 +114,7 @@
 				<template #loader>
 					<slot name="loader">
 						<origam-progress
-								:color="typeof loading === 'boolean' ? undefined : loading"
+								:color="typeof loading === 'string' ? loading : undefined"
 								:size="24"
 								:type="PROGRESS_TYPE.CIRCULAR"
 								indeterminate
@@ -125,15 +126,27 @@
 
 			<slot name="default"/>
 		</div>
+
+		<div
+				v-if="hasDetails"
+				class="origam-otp-input-field__details"
+		>
+			<origam-messages
+					:id="messagesId"
+					:active="hasMessages"
+					:messages="validationMessages"
+			/>
+		</div>
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import { OrigamField, OrigamOverlay, OrigamProgress } from "../../components";
-import { useDimension, useFocus, useLocale, useProps, useVModel, useStyle } from "../../composables";
+import { OrigamMessages } from "../../components/Messages";
+import { useDimension, useFocus, useLocale, useProps, useTypography, useValidation, useVModel, useStyle } from "../../composables";
 import { OTP_INPUT_FIELD_TYPE, PROGRESS_TYPE } from "../../enums";
-import { filterInputAttrs, focusChild, forwardRefs } from "../../utils";
+import { filterInputAttrs, focusChild, forwardRefs, getUid, wrapInArray } from "../../utils";
 const props = defineProps({
   autofocus: { type: Boolean, required: false },
   divider: { type: String, required: false },
@@ -144,17 +157,6 @@ const props = defineProps({
   persistentPlaceholder: { type: Boolean, required: false },
   role: { type: String, required: false },
   type: { type: null, required: false, default: OTP_INPUT_FIELD_TYPE.NUMBER },
-  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 },
-  density: { type: null, required: false },
-  height: { type: [Number, String], required: false },
-  maxHeight: { type: [Number, String], required: false },
-  maxWidth: { type: [Number, String], required: false },
-  minHeight: { type: [Number, String], required: false },
-  minWidth: { type: [Number, String], required: false },
-  width: { type: [Number, String], required: false },
   centerAffix: { type: Boolean, required: false },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
@@ -168,10 +170,16 @@ 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 },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, 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 },
+  color: { type: [String, Object, 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 },
@@ -179,6 +187,7 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
+  density: { type: null, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
   name: { type: String, required: false },
@@ -210,6 +219,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 },
@@ -220,6 +234,12 @@ const props = defineProps({
   hint: { type: String, required: false },
   persistentHint: { type: Boolean, required: false },
   messages: { type: [Array, String], required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
@@ -238,6 +258,9 @@ const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();
 const slots = useSlots();
+const uid = getUid();
+const id = computed(() => props.id || `otp-input-field-${uid}`);
+const messagesId = computed(() => `${id.value}-messages`);
 const { dimensionStyles } = useDimension(props);
 const { isFocused, onFocus: focus, onBlur: blur } = useFocus(props);
 const model = useVModel(
@@ -253,6 +276,41 @@ const length = computed(() => {
 const fields = computed(() => {
   return Array(length.value).fill(0);
 });
+const otpStringValue = computed(() => model.value.join(""));
+const {
+  errorMessages,
+  isPristine,
+  isValid,
+  isValidating,
+  reset: resetValidation,
+  validate,
+  validationClasses
+} = useValidation(
+  new Proxy(props, {
+    get(target, key) {
+      if (key === "modelValue" || key === "validationValue") {
+        return otpStringValue.value;
+      }
+      return target[key];
+    }
+  }),
+  "origam-otp-input-field",
+  id
+);
+const validationMessages = computed(() => {
+  if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {
+    return errorMessages.value;
+  } else if (props.hint && (props.persistentHint || isFocused.value)) {
+    return wrapInArray(props.hint);
+  }
+  return wrapInArray(props.messages ?? []);
+});
+const hasMessages = computed(() => validationMessages.value.length > 0);
+const hasDetails = computed(() => {
+  if (props.hideDetails === true) return false;
+  if (props.hideDetails === "auto") return hasMessages.value;
+  return true;
+});
 const focusIndex = ref(-1);
 const contentRef = ref();
 const inputRef = ref([]);
@@ -337,7 +395,10 @@ const isInvalidValue = (value) => {
   return props.type === OTP_INPUT_FIELD_TYPE.NUMBER && /[^0-9]/g.test(value);
 };
 watch(model, (val) => {
-  if (val.length === length.value) emits("finish", val.join(""));
+  if (val.length === length.value) {
+    emits("finish", val.join(""));
+    validate();
+  }
 }, { deep: true });
 watch(focusIndex, (val) => {
   if (val < 0) return;
@@ -345,6 +406,7 @@ watch(focusIndex, (val) => {
     inputRef.value[val]?.select();
   });
 });
+const { typographyStyles } = useTypography(props, "otp-input-field__cell");
 const otpInputFieldStyles = computed(() => {
   return [
     props.style
@@ -356,23 +418,32 @@ const otpInputFieldClasses = computed(() => {
     {
       "origam-otp-input-field--divided": !!props.divider
     },
+    validationClasses.value,
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(otpInputFieldStyles);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(otpInputFieldStyles);
 defineExpose(forwardRefs({
   blur: () => {
-    inputRef.value?.some((input) => {
-      input.blur();
-      return true, css, id, load, unload, isLoaded;
-    });
+    inputRef.value?.forEach((input) => input.blur());
   },
   focus: () => {
     inputRef.value?.[0]?.focus();
   },
   reset,
+  resetValidation,
+  validate,
+  isValid,
+  isValidating,
+  errorMessages,
   isFocused,
-  filterProps
+  filterProps,
+  css,
+  id,
+  styleId,
+  load,
+  unload,
+  isLoaded
 }));
 </script>
 
@@ -382,6 +453,7 @@ defineExpose(forwardRefs({
 
 		align-items: center;
 		display: flex;
+		flex-direction: column;
 		justify-content: center;
 		padding: var(--origam-otp-input-field---padding-block, .5rem) 0;
 		position: relative;
@@ -442,6 +514,30 @@ defineExpose(forwardRefs({
 			}
 		}
 
+		&__details {
+			align-items: flex-end;
+			display: flex;
+			font-size: 0.75rem;
+			font-weight: 400;
+			letter-spacing: 0.0333333333em;
+			line-height: 1;
+			min-height: 22px;
+			padding-top: 6px;
+			overflow: hidden;
+			justify-content: space-between;
+			width: 100%;
+			padding-inline: var(--origam-otp-input-field__details---padding-inline, 4px);
+		}
+
+		&--error {
+			#{$this}__details {
+				> .origam-messages {
+					color: var(--origam-otp-input-field---error-color, var(--origam-color__feedback--danger---fg-subtle));
+					opacity: 1;
+				}
+			}
+		}
+
 		&--divided {
 			#{$this}__content {
 				max-width: var(--origam-otp-input-field__content---max-width-divided, 360px);

package/dist/src/components/Overlay/OrigamOverlay.vue

@@ -46,7 +46,7 @@
 	</template>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, mergeProps, onBeforeUnmount, ref, StyleValue, toRef, watch } from "vue";
 import { OrigamFade, OrigamOverlayScrim, OrigamTransition } from "../../components";
 import {
@@ -114,7 +114,7 @@ const props = defineProps({
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamFade }) },
   scrim: { type: [Boolean, String], required: false, default: true }
 });
-const emits = defineEmits(["click:outside", "update:modelValue", "afterEnter", "afterLeave", "keydown"]);
+const emits = defineEmits(["afterEnter", "afterLeave", "keydown", "update:modelValue", "click:outside"]);
 const { filterProps } = useProps(props);
 const model = useVModel(props, "modelValue");
 const isActive = computed({

package/dist/src/components/Overlay/OrigamOverlayScrim.vue

@@ -4,6 +4,7 @@
 				v-if="active"
 				:class="scrimClasses"
 				:style="scrimStyles"
+				aria-hidden="true"
 				v-bind="$attrs"
 				@click="handleClick"
 				@mouseenter="handleMouseenter"
@@ -12,7 +13,7 @@
 	</origam-transition>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamFade, OrigamTransition } from "../../components";
 import {
@@ -30,7 +31,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   scrim: { type: [Boolean, String], required: false }
 });
-const emits = defineEmits(["click", "mouseenter", "mouseleave"]);
+const emits = defineEmits(["mouseenter", "mouseleave", "click"]);
 const { filterProps } = useProps(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(computed(() => {
   return typeof props.scrim === "string" ? props.scrim : null;

package/dist/src/components/Pagination/OrigamPagination.vue

@@ -11,6 +11,7 @@
 		<span
 				v-if="withInfo"
 				class="origam-pagination__info"
+				:style="typographyStyles"
 				data-cy="pagination-info"
 		>
 			<slot
@@ -59,7 +60,7 @@
 							:disabled="disabled"
 							type="number"
 							class="origam-pagination__compact-input"
-							aria-label="Page number"
+							:aria-label="t(pageNumberAriaLabel)"
 							data-cy="pagination-compact-input"
 							@change="handleCompactInput"
 							@keydown.enter.prevent="handleCompactInput"
@@ -173,10 +174,10 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { ComponentPublicInstance, computed, nextTick, ref, shallowRef, StyleValue } from "vue";
 import { OrigamBtn } from "../../components";
-import { useDensity, useDisplay, useLocale, useProps, useRefs, useResizeObserver, useSize, useVModel, useStyle } from "../../composables";
+import { useDensity, useDisplay, useLocale, useProps, useRefs, useResizeObserver, useSize, useTypography, useVModel, useStyle } from "../../composables";
 import { KEYBOARD_VALUES, MDI_ICONS } from "../../enums";
 import { createRange, int } from "../../utils";
 const props = defineProps({
@@ -207,12 +208,17 @@ const props = defineProps({
   infoText: { type: String, required: false, default: "origam.pagination.info" },
   previousText: { type: String, required: false },
   nextText: { type: String, required: false },
+  pageNumberAriaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.pageNumber" },
+  hoverColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { 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 },
   tag: { type: String, required: false, default: "div" },
-  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 },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -238,15 +244,14 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   size: { type: null, required: false },
-  density: { type: null, required: false }
+  density: { 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 }
 });
-const emits = defineEmits([
-  "update:modelValue",
-  "first",
-  "next",
-  "prev",
-  "last"
-]);
+const emits = defineEmits(["first", "prev", "next", "last", "update:modelValue"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const page = useVModel(props, "modelValue", props.start);
@@ -378,7 +383,7 @@ const items = computed(() => {
           // behaviour the user expects from a uniform row
           // of nav buttons.
           active: isActive,
-          "aria-current": isActive,
+          "aria-current": isActive ? "page" : void 0,
           "aria-label": t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
           onClick: (e) => setValue(e, item)
         }
@@ -492,6 +497,7 @@ const infoEnd = computed(() => {
 const isColored = computed(() => !!(props.color || props.bgColor));
 const { sizeClasses } = useSize(props);
 const { densityClasses } = useDensity(props);
+const { typographyStyles } = useTypography(props, "pagination--info");
 const paginationClasses = computed(() => {
   return [
     "origam-pagination",

package/dist/src/components/Parallax/OrigamParallax.vue

@@ -20,7 +20,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, onBeforeUnmount, onMounted, provide, ref, StyleValue, toRef, watch } from "vue";
 import {
   useAudio,
@@ -55,8 +55,8 @@ const props = defineProps({
   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" },
-  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 },
@@ -92,6 +92,41 @@ const props = defineProps({
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
+  variant: { type: null, required: false },
+  coverPosition: { type: null, required: false },
+  src: { type: [String, Object, Array], required: true },
+  tracks: { type: Array, required: false },
+  title: { type: String, required: false },
+  artist: { type: String, required: false },
+  album: { type: String, required: false },
+  cover: { type: [String, Object], required: false },
+  waveform: { type: [Boolean, String], required: false },
+  waveformColor: { type: String, required: false },
+  autoplay: { type: Boolean, required: false },
+  muted: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  loopMode: { type: null, required: false },
+  shuffle: { type: Boolean, required: false },
+  playlist: { type: Array, required: false },
+  currentTrackIndex: { type: Number, required: false },
+  preload: { type: String, required: false },
+  crossorigin: { type: String, required: false },
+  controls: { type: String, required: false },
+  playbackRates: { type: Array, required: false },
+  playbackRate: { type: Number, required: false },
+  allowRemotePlayback: { type: Boolean, required: false },
+  downloadable: { type: Boolean, required: false },
+  downloadFilename: { type: String, required: false },
+  position: { type: null, required: false },
+  top: { type: [Number, String], required: false },
+  bottom: { type: [Number, String], required: false },
+  left: { type: [Number, String], required: false },
+  right: { 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 },
   audio: { type: String, required: false },
   playAudio: { type: Boolean, required: false }
 });

package/dist/src/components/Parallax/OrigamParallaxElement.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, StyleValue } from "vue";
 import {
   useBorder,

package/dist/src/components/Parallax/OrigamParallaxLayer.vue

@@ -9,7 +9,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, onBeforeUnmount, onMounted, ref, StyleValue } from "vue";
 import { useProps } from "../../composables";
 import { ORIGAM_PARALLAX_LAYER_KEY } from "../../consts";
@@ -29,7 +29,7 @@ if (!parallax) {
   throw new Error("[Origam] OrigamParallaxLayer must be nested inside OrigamParallax (use direction/easing/disabled props on the host).");
 }
 const layerRef = ref();
-const id = Symbol("origam:parallax-layer");
+const id = /* @__PURE__ */ Symbol("origam:parallax-layer");
 onMounted(() => {
   if (!layerRef.value) return;
   const registry = {

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -82,7 +82,7 @@
 									ref="origamMenuRef"
 									:model-value="showRequirements"
 									persistent
-									:target="origamInputRef"
+									:target="(origamInputRef as any)"
 									content-class="origam-password-field__info"
 									v-bind="resolvedMenuProps"
 							>
@@ -295,7 +295,7 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import {
   OrigamChip,
@@ -355,11 +355,6 @@ const _props = defineProps({
   requirementRules: { type: Array, required: false },
   requirementsLayout: { type: String, required: false },
   minimal: { type: Boolean, 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, Boolean, null], required: false, skipCheck: true },
-  density: { type: null, required: false, default: DENSITY.DEFAULT },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
@@ -370,6 +365,11 @@ const _props = defineProps({
   type: { type: null, required: false },
   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 },
   disabled: { type: Boolean, required: false },
@@ -383,10 +383,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 },
@@ -425,6 +427,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/Picker/OrigamPicker.vue

@@ -43,18 +43,13 @@
 	</origam-sheet>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, toRef, useSlots } from "vue";
 import { OrigamPickerTitle, OrigamSheet } from "../../components";
 import { useBackgroundColor, useProps, useStyle } from "../../composables";
 const props = defineProps({
   landscape: { type: Boolean, required: false },
   hideHeader: { type: Boolean, 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, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   side: { type: null, required: false },
   swipeable: { type: Boolean, required: false },
   snapPoints: { type: Array, required: false },
@@ -63,6 +58,9 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
   tag: { type: String, required: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -77,6 +75,8 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -107,7 +107,12 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  title: { type: String, required: false }
+  title: { 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 slots = useSlots();
 const { filterProps } = useProps(props);

package/dist/src/components/Picker/OrigamPickerTitle.vue

@@ -10,23 +10,30 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
-import { useBothColor, useProps, useStyle } from "../../composables";
+import { useBothColor, useProps, useStyle, useTypography } from "../../composables";
 const props = defineProps({
   title: { type: String, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
-  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 },
+  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 { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { typographyStyles } = useTypography(props, "picker-title");
 const pickerTitleStyles = computed(() => {
   return [
     colorStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });