origam 2.5.0 → 2.6.1

package/dist/src/components/Drawer/OrigamDrawer.vue

@@ -4,14 +4,6 @@
 			:to="teleportDrawer"
 			defer
 	>
-		<!--
-			`<origam-transition>` wraps the conditional <component v-if>
-			so the drawer animates on mount/unmount instead of popping
-			in / out. Default transition is `origam-transition--slide-x`
-			(horizontal slide keyframes shipped by OrigamSlideX). The
-			teleport itself stays mounted so transition events fire on
-			the inner element.
-		-->
 		<origam-transition :transition="transition">
 			<component
 					:is="tag"
@@ -61,10 +53,11 @@
 	</teleport>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ComputedRef,
+  isRef,
   nextTick,
   onBeforeMount,
   Ref,
@@ -250,10 +243,11 @@ const { layoutItemStyles, layoutItemScrimStyles, layoutId } = useLayoutItem({
     () => props.absolute || isSticky.value && typeof isStuck.value !== "string"
   )
 });
-const isLayoutOrphan = computed(() => layoutId.value === "origam-layout-orphan");
+const resolvedLayoutId = computed(() => isRef(layoutId) ? layoutId.value : layoutId);
+const isLayoutOrphan = computed(() => resolvedLayoutId.value === "origam-layout-orphan");
 const teleportDrawer = computed(() => {
   if (isLayoutOrphan.value) return void 0;
-  return `#${layoutId.value} .origam-layout__wrapper`;
+  return `#${resolvedLayoutId.value} .origam-layout__wrapper`;
 });
 const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles });
 const scrimStyles = computed(() => ({

package/dist/src/components/EmptyState/OrigamEmptyState.vue

@@ -24,6 +24,7 @@
 			<div
 					v-if="hasTitle"
 					class="origam-empty-state__title"
+					:style="titleTypographyStyles"
 			>
 				<slot name="title">{{ title }}</slot>
 			</div>
@@ -31,6 +32,7 @@
 			<div
 					v-if="hasDescription"
 					class="origam-empty-state__description"
+					:style="descriptionTypographyStyles"
 			>
 				<slot name="description">{{ description }}</slot>
 			</div>
@@ -45,13 +47,14 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   StyleValue,
   useSlots
 } from "vue";
 import { OrigamIcon } from "../Icon";
+import { useTypography } from "../../composables";
 import { EMPTY_STATE_PRESET_CONFIG } from "../../consts/EmptyState/empty-state.const";
 const props = defineProps({
   preset: { type: String, required: false, default: "no-data" },
@@ -64,7 +67,12 @@ 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 },
-  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 slots = useSlots();
 const presetConfig = computed(() => EMPTY_STATE_PRESET_CONFIG[props.preset]);
@@ -87,6 +95,8 @@ const emptyStateClasses = computed(() => {
 const emptyStateStyles = computed(() => {
   return [props.style];
 });
+const { typographyStyles: titleTypographyStyles } = useTypography(props, "empty-state__title");
+const { typographyStyles: descriptionTypographyStyles } = useTypography(props, "empty-state__description");
 defineExpose({
   resolvedIcon,
   resolvedIntent,
@@ -137,7 +147,7 @@ defineExpose({
 		color: var(--origam-empty-state---resolved-title-color);
 		font-family: var(--origam-empty-state__title---font-family, Inter, system-ui, sans-serif);
 		font-weight: var(--origam-empty-state__title---font-weight, 600);
-		font-size: var(--origam-empty-state---resolved-title-font-size);
+		font-size: var(--origam-empty-state__title---font-size, var(--origam-empty-state---resolved-title-font-size));
 		line-height: var(--origam-empty-state__title---line-height, 1.375);
 		margin: 0;
 	}
@@ -146,7 +156,7 @@ defineExpose({
 		color: var(--origam-empty-state---resolved-description-color);
 		font-family: var(--origam-empty-state__description---font-family, Inter, system-ui, sans-serif);
 		font-weight: var(--origam-empty-state__description---font-weight, 400);
-		font-size: var(--origam-empty-state---resolved-description-font-size);
+		font-size: var(--origam-empty-state__description---font-size, var(--origam-empty-state---resolved-description-font-size));
 		line-height: var(--origam-empty-state__description---line-height, 1.625);
 		max-width: var(--origam-empty-state---resolved-max-width);
 		margin: 0;

package/dist/src/components/ExpansionPanel/OrigamExpansionPanel.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="expansionPanelClasses"
 			:style="expansionPanelStyles"
 	>
@@ -93,11 +94,14 @@
 			</slot>
 		</template>
 
-		<slot name="default"/>
+		<slot
+				v-else
+				name="default"
+		/>
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, provide, ref, StyleValue, toRef, useSlots } from "vue";
 import { OrigamExpansionPanelContent, OrigamExpansionPanelHeader, OrigamProgress } from "../../components";
 import {
@@ -112,6 +116,7 @@ import {
   useStateEffect,
   useStyle
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
 import { PROGRESS_TYPE } from "../../enums";
 const _props = defineProps({
@@ -169,6 +174,11 @@ const _props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
   content: { type: null, required: false },
   eager: { type: Boolean, required: false },
   loading: { type: [Boolean, Number, Object], required: false },

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelContent.vue

@@ -3,9 +3,10 @@
 		<component
 				:is="tag"
 				v-show="isSelected"
+				:id="`expansion-panel-content-${expansionPanel.id}`"
+				v-contrast
 				:aria-labelledby="`expansion-panel-header-${expansionPanel.id}`"
 				:class="expansionPanelContentClasses"
-				:id="`expansion-panel-content-${expansionPanel.id}`"
 				:style="expansionPanelContentStyles"
 				role="region"
 		>
@@ -50,9 +51,10 @@
 	</origam-expand-y>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, StyleValue, toRef } from "vue";
 import { OrigamExpandY, OrigamProgress, OrigamSkeleton } from "../../components";
+import { vContrast } from "../../directives";
 import {
   useBorder,
   useBothColor,

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelHeader.vue

@@ -1,12 +1,13 @@
 <template>
 	<component
 			:is="tag"
+			:id="`expansion-panel-header-${expansionPanel.id}`"
 			v-ripple="ripple"
+			v-contrast
 			:aria-controls="`expansion-panel-content-${expansionPanel.id}`"
 			:aria-expanded="isSelected"
 			:class="expansionPanelHeaderClasses"
 			:disabled="isDisabled"
-			:id="`expansion-panel-header-${expansionPanel.id}`"
 			:style="expansionPanelHeaderStyles"
 			:tabindex="isDisabled ? -1 : undefined"
 			type="button"
@@ -84,7 +85,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, StyleValue, toRef, useSlots } from "vue";
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import {
@@ -95,10 +96,11 @@ import {
   useHover,
   useProps,
   useStateEffect,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
-import { vRipple } from "../../directives";
+import { vContrast, vRipple } from "../../directives";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
   expandIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_DOWN },
@@ -150,7 +152,12 @@ const props = defineProps({
   ripple: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 defineEmits(["click:append", "click:prepend"]);
 const { filterProps } = useProps(props);
@@ -200,6 +207,7 @@ const {
   marginStyles
 } = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { typographyStyles } = useTypography(props, "expansion-panel__header");
 const expansionPanelHeaderStyles = computed(() => {
   return [
     colorStyles.value,
@@ -207,6 +215,7 @@ const expansionPanelHeaderStyles = computed(() => {
     borderStyles.value,
     paddingStyles.value,
     marginStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });

package/dist/src/components/ExpansionPanel/OrigamExpansionPanels.vue

@@ -111,13 +111,14 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
 import { OrigamDefaultsProvider, OrigamExpansionPanel } from "../../components";
 import {
   useActive,
   useBothColor,
   useDensity,
+  useElevation,
   useGroup,
   useHover,
   useLoader,

package/dist/src/components/Field/OrigamField.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			v-contrast
 			:class="fieldClasses"
 			:style="fieldStyles"
 			v-bind="attrs"
@@ -165,7 +166,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import { OrigamAvatar, OrigamExpandX, OrigamIcon, OrigamLabel, OrigamProgress, OrigamSkeleton } from "../../components";
 import {
@@ -181,8 +182,10 @@ import {
   useSize,
   useStateEffect,
   useStyle,
+  useTypography,
   useVariant
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { DENSITY, EASING, KEYBOARD_VALUES, MDI_ICONS, PROGRESS_TYPE, VARIANT_INPUT } from "../../enums";
 import { animate, convertToUnit, getUid, nullifyTransforms } from "../../utils";
 const _props = defineProps({
@@ -199,6 +202,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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -246,6 +251,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, default: VARIANT_INPUT.OUTLINED },
@@ -297,6 +307,7 @@ const slotProps = computed(() => {
     onFocus: handleFocus
   };
 });
+const { typographyStyles } = useTypography(props, "field__label");
 const origamLabelRef = ref();
 const hasLabel = computed(() => {
   return !props.singleLine && !!(props.label || slots.label);
@@ -308,6 +319,9 @@ const labelProps = computed(() => {
     for: id.value,
     text: props.label,
     ...defaultLabelProps,
+    // BEM-child typography — emits --origam-field__label---font-size on the
+    // label element so the SCSS floating rule and JS animation scale read it.
+    style: typographyStyles.value,
     // The field's `border` / `rounded` visual props belong to
     // the FIELD outline (the input box). Forwarding them onto
     // the `<origam-label>` would draw a chip-like border + 8px
@@ -334,6 +348,9 @@ const floatingLabelProps = computed(() => {
     floating: true,
     ref: "origamFloatingLabelRef",
     ...defaultFloatingLabelProps,
+    // BEM-child typography — same var as labelProps so the floating
+    // label's font-size SCSS rule and the JS scale animation both read it.
+    style: typographyStyles.value,
     // Same reason as `labelProps` above — the field's `border` /
     // `rounded` defaults belong to the field outline, NOT to the
     // floating label that animates above/inside the input on focus.
@@ -485,7 +502,7 @@ defineExpose({
 		font-size: 16px;
 		letter-spacing: 0.009375em;
 		max-width: 100%;
-		border-radius: var(--origam-field---rounded);
+		border-radius: var(--origam-field---border-radius, 8px);
 		contain: layout;
 		flex: 1 0;
 		grid-area: control;
@@ -495,7 +512,7 @@ defineExpose({
 		&__skeleton {
 			width: 100%;
 			min-height: var(--origam-field__skeleton---min-height, var(--origam-input__control---height, 36px));
-			border-radius: var(--origam-field---rounded);
+			border-radius: var(--origam-field---border-radius, 8px);
 			grid-column: 1 / -1;
 			grid-row: 1;
 		}
@@ -646,7 +663,7 @@ defineExpose({
 			max-width: calc(100% - var(--origam-field__input---padding-start, 0) - var(--origam-field__input---padding-end, 0));
 			pointer-events: none;
 			position: absolute;
-			top: calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density) - 8px);
+			top: calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px) - 8px);
 			transform-origin: left center;
 			transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 			transition-property: opacity, transform;
@@ -853,7 +870,7 @@ defineExpose({
 
 			&-filled {
 				background: var(--origam-field--variant-filled---background-color, color-mix(in srgb, currentColor 12%, transparent));
-				border-radius: var(--origam-field---rounded) var(--origam-field---rounded) 0 0;
+				border-radius: var(--origam-field---border-radius, 8px) var(--origam-field---border-radius, 8px) 0 0;
 				--origam-field__input---padding-top: 20px;
 
 				#{$this}__outlines {
@@ -909,10 +926,10 @@ defineExpose({
 						border-bottom-width: var(--origam-field---border-width);
 						border-inline-start-width: var(--origam-field---border-width);
 						border-inline-end-width: 0;
-						border-start-start-radius: var(--origam-field---rounded);
+						border-start-start-radius: var(--origam-field---border-radius, 8px);
 						border-start-end-radius: 0;
 						border-end-end-radius: 0;
-						border-end-start-radius: var(--origam-field---rounded);
+						border-end-start-radius: var(--origam-field---border-radius, 8px);
 					}
 
 					&--end {
@@ -921,8 +938,8 @@ defineExpose({
 						border-inline-end-width: var(--origam-field---border-width);
 						border-inline-start-width: 0;
 						border-start-start-radius: 0;
-						border-start-end-radius: var(--origam-field---rounded);
-						border-end-end-radius: var(--origam-field---rounded);
+						border-start-end-radius: var(--origam-field---border-radius, 8px);
+						border-end-end-radius: var(--origam-field---border-radius, 8px);
 						border-end-start-radius: 0;
 					}
 

package/dist/src/components/FileField/OrigamFileField.vue

@@ -105,7 +105,6 @@
           <ul
               v-if="multiple && hasFiles"
               class="origam-file-field__list"
-              role="list"
           >
             <template v-for="(item, idx) in fileList" :key="idx">
               <slot
@@ -290,7 +289,6 @@
           <ul
               v-if="multiple && hasFiles && !hasChips && displayMode === 'list'"
               class="origam-file-field__list"
-              role="list"
           >
             <template v-for="(item, idx) in fileList" :key="idx">
               <slot
@@ -375,7 +373,7 @@
   </origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, toRef, useAttrs, useSlots, watch } from "vue";
 import { OrigamChip, OrigamCounter, OrigamField, OrigamIcon, OrigamInput } from "../../components";
 import OrigamFileFieldDragNDropItem from "./OrigamFileFieldDragNDropItem.vue";
@@ -440,6 +438,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 },
@@ -482,6 +482,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/FileField/OrigamFileFieldDragNDropItem.vue

@@ -9,7 +9,10 @@
           class="origam-file-field-dragndrop-item__icon"
       />
       <div class="origam-file-field-dragndrop-item__content">
-        <div class="origam-file-field-dragndrop-item__name">
+        <div
+            class="origam-file-field-dragndrop-item__name"
+            :style="typographyStyles"
+        >
           {{ file.name }}
         </div>
         <div class="origam-file-field-dragndrop-item__meta">
@@ -37,13 +40,14 @@
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamBtn, OrigamIcon, OrigamProgress } from "../../components";
 import {
   useDefaults,
   useProps,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { MDI_ICONS } from "../../enums";
 import { humanReadableFileSize } from "../../utils";
@@ -59,7 +63,12 @@ const _props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  color: { 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 props = useDefaults(_props);
 const emits = defineEmits(["click:remove"]);
@@ -84,6 +93,7 @@ const dragNDropItemClasses = computed(() => {
     props.class
   ];
 });
+const { typographyStyles } = useTypography(props, "file-field-dragndrop-item__name");
 const { filterProps } = useProps(props);
 const { id, css, load, isLoaded, unload } = useStyle(dragNDropItemStyles);
 defineExpose({

package/dist/src/components/FileField/OrigamFileFieldListItem.vue

@@ -9,7 +9,10 @@
           class="origam-file-field-list-item__icon"
       />
       <div class="origam-file-field-list-item__content">
-        <div class="origam-file-field-list-item__name">
+        <div
+            class="origam-file-field-list-item__name"
+            :style="typographyStyles"
+        >
           {{ file.name }}
         </div>
         <div class="origam-file-field-list-item__meta">
@@ -37,13 +40,14 @@
   </li>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamBtn, OrigamIcon, OrigamProgress } from "../../components";
 import {
   useDefaults,
   useProps,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { MDI_ICONS } from "../../enums";
 import { humanReadableFileSize } from "../../utils";
@@ -59,7 +63,12 @@ const _props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  color: { 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 props = useDefaults(_props);
 const emits = defineEmits(["click:remove"]);
@@ -84,6 +93,7 @@ const listItemClasses = computed(() => {
     props.class
   ];
 });
+const { typographyStyles } = useTypography(props, "file-field-list-item__name");
 const { filterProps } = useProps(props);
 const { id, css, load, isLoaded, unload } = useStyle(listItemStyles);
 defineExpose({

package/dist/src/components/Form/OrigamForm.vue

@@ -17,6 +17,7 @@
 		<div
 				v-if="hasMessages"
 				class="origam-form__details"
+				:style="typographyStyles"
 		>
 			<slot
 					name="messages"
@@ -52,7 +53,7 @@
 	</form>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useSlots } from "vue";
 import { OrigamMessages } from "../../components";
 import {
@@ -61,6 +62,7 @@ import {
   useMessage,
   useProps,
   useStyle,
+  useTypography,
   useValidation
 } from "../../composables";
 import { forwardRefs, getUid } from "../../utils";
@@ -77,7 +79,12 @@ const _props = defineProps({
   scrollToError: { type: Boolean, 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 }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["submit", "reset"]);
@@ -95,6 +102,7 @@ const {
 } = useValidation(props);
 const messagesId = `origam-form-messages-${getUid()}`;
 const { hasMessages, messages } = useMessage(props, errorMessages);
+const { typographyStyles } = useTypography(props, "form__details");
 const scrollToFirstError = async (options) => {
   await nextTick();
   const el = formRef.value?.querySelector(".origam-input--error");

package/dist/src/components/Grid/OrigamGrid.vue

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

package/dist/src/components/Grid/OrigamGridItem.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   column: { type: [Object, String, Number], required: false, default: void 0 },

package/dist/src/components/Grids/OrigamCol.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   useBorder,
   useBothColor,

package/dist/src/components/Grids/OrigamContainer.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   useBorder,
   useMargin,

package/dist/src/components/Grids/OrigamRow.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
 import {
   useBorder,
@@ -52,6 +52,7 @@ const props = defineProps({
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   align: { type: null, required: false },
   alignSm: { type: null, required: false },
@@ -67,7 +68,10 @@ const props = defineProps({
   justifyXxl: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
-const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { colorClasses, colorStyles } = useBothColor(
+  toRef(props, "bgColor"),
+  toRef(props, "color")
+);
 const { densityClasses } = useDensity(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);

package/dist/src/components/Grids/OrigamSpacer.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { useProps, useStyle } from "../../composables";
 const props = defineProps({