origam 2.15.0 → 2.16.0

package/dist/src/components/Counter/OrigamCounter.vue

@@ -21,7 +21,18 @@
 
 <script lang="ts" setup>
 import { OrigamSlideY, OrigamTransition } from "../../components";
-import { useBothColor, useProps, useSsrBoot, useStyle } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useDensity,
+  useElevation,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useSsrBoot,
+  useStyle
+} from "../../composables";
 import { computed, StyleValue, toRef } from "vue";
 const props = defineProps({
   active: { type: Boolean, required: false },
@@ -73,6 +84,12 @@ const props = defineProps({
 defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
+const { densityClasses } = useDensity(props);
 const { isBooted } = useSsrBoot();
 const counter = computed(() => {
   return props.max ? `${props.value} / ${props.max}` : String(props.value);
@@ -80,6 +97,11 @@ const counter = computed(() => {
 const counterStyles = computed(() => {
   return [
     colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    elevationStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -90,6 +112,12 @@ const counterClasses = computed(() => {
       "origam-counter--error": props.max && !props.disabled && parseFloat(props.value) > parseFloat(props.max)
     },
     colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
+    densityClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });
@@ -108,7 +136,19 @@ defineExpose({
 	.origam-counter {
 		color: currentColor;
 		flex: 0 1 auto;
-		font-size: 12px;
+		font-size: var(--origam-counter---font-size, 12px);
 		transition-duration: 150ms;
+
+		&--density-comfortable {
+			--origam-counter---font-size: 13px;
+		}
+
+		&--density-default {
+			--origam-counter---font-size: 12px;
+		}
+
+		&--density-compact {
+			--origam-counter---font-size: 11px;
+		}
 	}
 </style>

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

@@ -190,7 +190,7 @@ import { vContrast } from "../../directives";
 import { isDataListKVItemValueComponent } from "../../utils";
 import { isEmpty, toKebabCase } from "../../utils";
 const props = defineProps({
-  mode: { type: String, required: false, default: "avatar" },
+  mode: { type: null, required: false, default: "avatar" },
   items: { type: [Array, Object], required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -235,11 +235,11 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  fontFamily: { type: 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 { filterProps } = useProps(props);

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

@@ -191,11 +191,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 },
   item: { type: Object, required: true },
   cellProps: { type: [Object, Function], required: false },
   mobileBreakpoint: { type: null, required: false, default: "xs" },

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

@@ -63,7 +63,7 @@ import {
   useSort,
   useStyle
 } from "../../composables";
-import { PROGRESS_TYPE } from "../../enums";
+import { LOADER_KIND, PROGRESS_TYPE } from "../../enums";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
   id: { type: String, required: false },
@@ -88,7 +88,7 @@ const origamDataTableHeadersCellMobileRef = ref();
 const { toggleSort, sortBy, isSorted } = useSort();
 const { someSelected, allSelected, selectAll } = useSelection();
 const { columns, headers } = useHeaders();
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const { getSortIcon } = useHeadersCell(props);
 const { displayClasses, mobile } = useDisplay(props);
 const slotProps = computed(() => {

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

@@ -84,6 +84,7 @@
 <script lang="ts" setup>
 import { OrigamDataTableGroupHeaderRow, OrigamDataTableRow, OrigamSkeleton } from "../../components";
 import { useDisplay, useExpanded, useGroupBy, useHeaders, useLoader, useLocale, usePagination, useProps, useSelection } from "../../composables";
+import { LOADER_KIND } from "../../enums";
 import { getPrefixedEventHandlers } from "../../utils";
 import { mergeProps, useAttrs } from "vue";
 const attrs = useAttrs();
@@ -106,7 +107,7 @@ defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const SKELETON_ROW_COUNT = 5;
-const { loaderConfig } = useLoader(props, "line");
+const { loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const { columns } = useHeaders();
 const { expandOnClick, toggleExpand, isExpanded } = useExpanded();
 const { isSelected, toggleSelect } = useSelection();

package/dist/src/components/DatePicker/OrigamDatePicker.vue

@@ -153,7 +153,7 @@ const props = defineProps({
   side: { type: null, required: false },
   swipeable: { type: Boolean, required: false },
   snapPoints: { type: Array, required: false },
-  defaultSnap: { type: [String, Object], required: false },
+  defaultSnap: { type: null, required: false },
   open: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
@@ -175,11 +175,11 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
   title: { type: String, required: false, default: "origam.date_picker.title" },
-  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 },
   disabledMonth: { type: Boolean, required: false },
   disabledYear: { type: Boolean, required: false },
   disabledNext: { type: Boolean, required: false },

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -272,11 +272,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/Dialog/OrigamDialogConfirmation.vue

@@ -236,7 +236,7 @@ const props = defineProps({
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false }
 });
-const emits = defineEmits(["validate", "cancel"]);
+const emits = defineEmits(["validate", "cancel", "update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const origamDialogRef = ref();

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

@@ -57,22 +57,22 @@ 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" },
+  preset: { type: null, required: false, default: "no-data" },
   title: { type: String, required: false },
   description: { type: String, required: false },
   icon: { type: null, required: false },
   iconColor: { type: null, required: false },
   size: { type: String, required: false, default: "md" },
-  align: { type: String, required: false, default: "center" },
+  align: { type: null, required: false, default: "center" },
   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" },
-  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/ExpansionPanel/OrigamExpansionPanel.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="props.tag"
+			:is="tag"
 			v-contrast
 			:class="expansionPanelClasses"
 			:style="expansionPanelStyles"
@@ -118,7 +118,7 @@ import {
 } from "../../composables";
 import { vContrast } from "../../directives";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
-import { PROGRESS_TYPE } from "../../enums";
+import { LOADER_KIND, PROGRESS_TYPE } from "../../enums";
 const _props = defineProps({
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
@@ -178,11 +178,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 },
+  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 },
   content: { type: null, required: false },
   eager: { type: Boolean, required: false },
   loading: { type: [Boolean, Number, Object], required: false },
@@ -226,7 +226,7 @@ const isAfterSelected = computed(() => {
 if (groupItem !== null) {
   provide(ORIGAM_EXPANSION_PANEL_KEY, groupItem);
 }
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const hasLoading = computed(() => {
   return slots.loader || loaderConfig.value.isActive;
 });

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

@@ -67,7 +67,7 @@ import {
   useRounded,
   useStyle
 } from "../../composables";
-import { PROGRESS_TYPE } from "../../enums";
+import { LOADER_KIND, PROGRESS_TYPE } from "../../enums";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
 const props = defineProps({
   content: { type: null, required: false },
@@ -125,7 +125,7 @@ const isSelected = computed(() => {
 const isComponent = computed(() => {
   return typeof props.content !== "string";
 });
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);

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

@@ -162,11 +162,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 }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 defineEmits(["click:append", "click:prepend"]);
 defineSlots();

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

@@ -122,11 +122,14 @@ import {
   useGroup,
   useHover,
   useLoader,
+  usePassedProps,
   useProps,
   useStateEffect,
   useStyle
 } from "../../composables";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
+import { omitUndefined } from "../../utils";
+import { LOADER_KIND } from "../../enums";
 const props = defineProps({
   flat: { type: Boolean, required: false },
   items: { type: Array, required: false },
@@ -192,14 +195,15 @@ const props = defineProps({
 defineEmits(["update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-expansion-panel": {
-    density: props.density,
-    color: props.color,
-    bgColor: props.bgColor,
-    rounded: props.rounded,
-    border: props.border
-  }
+  "origam-expansion-panel": omitUndefined({
+    density: wasPropPassed("density") ? props.density : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
+    rounded: wasPropPassed("rounded") ? props.rounded : void 0,
+    border: wasPropPassed("border") ? props.border : void 0
+  })
 }));
 useGroup(props, ORIGAM_EXPANSION_PANEL_KEY);
 const slots = useSlots();
@@ -218,7 +222,7 @@ const {
 } = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const { elevationClasses } = useElevation(props, toRef(props, "flat"));
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
-const { loaderClasses } = useLoader(props, "line");
+const { loaderClasses } = useLoader(props, LOADER_KIND.LINE);
 const expansionPanelsStyles = computed(() => {
   return [
     colorStyles.value,

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

@@ -186,7 +186,7 @@ import {
   useVariant
 } from "../../composables";
 import { vContrast } from "../../directives";
-import { DENSITY, EASING, KEYBOARD_VALUES, MDI_ICONS, PROGRESS_TYPE, VARIANT_INPUT } from "../../enums";
+import { DENSITY, EASING, KEYBOARD_VALUES, LOADER_KIND, MDI_ICONS, PROGRESS_TYPE, VARIANT_INPUT } from "../../enums";
 import { animate, convertToUnit, getUid, nullifyTransforms } from "../../utils";
 const _props = defineProps({
   centerAffix: { type: Boolean, required: false, default: true },
@@ -255,11 +255,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, default: VARIANT_INPUT.OUTLINED },
@@ -366,7 +366,7 @@ const floatingLabelProps = computed(() => {
     rounded: false
   };
 });
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const hasLoader = computed(() => {
   return slots.loader || loaderConfig.value.isActive;
 });

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

@@ -287,7 +287,7 @@
           </origam-field>
 
           <ul
-              v-if="multiple && hasFiles && !hasChips && displayMode === 'list'"
+              v-if="multiple && hasFiles && !hasChips && displayMode === FILE_FIELD_DISPLAY.LIST"
               class="origam-file-field__list"
           >
             <template v-for="(item, idx) in fileList" :key="idx">
@@ -390,7 +390,7 @@ import {
   useStyle,
   useVModel
 } from "../../composables";
-import { DENSITY, MDI_ICONS } from "../../enums";
+import { DENSITY, FILE_FIELD_DISPLAY, MDI_ICONS } from "../../enums";
 import { filterInputAttrs, forwardRefs, humanReadableFileSize, wrapInArray } from "../../utils";
 const _props = defineProps({
   chips: { type: Boolean, required: false },
@@ -418,7 +418,7 @@ const _props = defineProps({
   dropzoneSubtitle: { type: String, required: false, default: "origam.file_field.dropzone_subtitle" },
   browseText: { type: String, required: false, default: "origam.file_field.browse" },
   maxFileSizeErrorString: { type: String, required: false, default: "origam.validation.max_size_error" },
-  display: { type: String, required: false, default: "list" },
+  display: { type: null, required: false, default: "list" },
   dropzone: { type: Boolean, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -486,11 +486,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 },
@@ -522,8 +522,8 @@ const _props = defineProps({
 const props = useDefaults(_props);
 const isDropzoneMode = computed(() => Boolean(props.dropzone || props.dragndrop));
 const displayMode = computed(() => {
-  if (props.chips) return "chips";
-  return props.display ?? "list";
+  if (props.chips) return FILE_FIELD_DISPLAY.CHIPS;
+  return props.display ?? FILE_FIELD_DISPLAY.LIST;
 });
 const isErrored = computed(() => Boolean(props.error));
 const errorMessage = computed(() => typeof props.error === "string" ? props.error : "");
@@ -713,10 +713,10 @@ const hasDetails = computed(() => {
   return slots.details || hasCounter.value;
 });
 const hasChips = computed(() => {
-  return displayMode.value === "chips" || slots.chip;
+  return displayMode.value === FILE_FIELD_DISPLAY.CHIPS || slots.chip;
 });
 const hasInlineCounter = computed(() => {
-  return displayMode.value === "counter" && hasFiles.value && props.multiple;
+  return displayMode.value === FILE_FIELD_DISPLAY.COUNTER && hasFiles.value && props.multiple;
 });
 const inlineCounterValue = computed(() => {
   return model.value?.length ?? 0;

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

@@ -64,11 +64,11 @@ const _props = defineProps({
   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 },
-  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);
 const emits = defineEmits(["click:remove"]);

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

@@ -64,11 +64,11 @@ const _props = defineProps({
   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 },
-  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);
 const emits = defineEmits(["click:remove"]);

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

@@ -80,14 +80,14 @@ 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 props = useDefaults(_props);
-const emits = defineEmits(["submit", "reset"]);
+const emits = defineEmits(["submit", "reset", "update:modelValue"]);
 defineSlots();
 const slots = useSlots();
 const { filterProps } = useProps(props);

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

@@ -28,13 +28,13 @@ const props = defineProps({
   columnGap: { type: null, required: false, default: void 0 },
   rowGap: { type: null, required: false, default: void 0 },
   areas: { type: [String, Array], required: false, default: void 0 },
-  autoFlow: { type: String, required: false, default: "row" },
+  autoFlow: { type: null, required: false, default: "row" },
   autoColumns: { type: String, required: false, default: void 0 },
   autoRows: { type: String, required: false, default: void 0 },
-  alignItems: { type: String, required: false, default: "stretch" },
-  justifyItems: { type: String, required: false, default: "stretch" },
-  alignContent: { type: String, required: false, default: void 0 },
-  justifyContent: { type: String, required: false, default: void 0 },
+  alignItems: { type: null, required: false, default: "stretch" },
+  justifyItems: { type: null, required: false, default: "stretch" },
+  alignContent: { type: null, required: false, default: void 0 },
+  justifyContent: { type: null, required: false, default: void 0 },
   inline: { type: Boolean, required: false, default: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },

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

@@ -14,8 +14,8 @@ const props = defineProps({
   column: { type: [Object, String, Number], required: false, default: void 0 },
   row: { type: [Object, String, Number], required: false, default: void 0 },
   area: { type: String, required: false, default: void 0 },
-  alignSelf: { type: String, required: false, default: void 0 },
-  justifySelf: { type: String, required: false, default: void 0 },
+  alignSelf: { type: null, required: false, default: void 0 },
+  justifySelf: { type: null, required: false, default: void 0 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },

package/dist/src/components/Icon/OrigamClassIcon.vue

@@ -7,12 +7,20 @@
 </template>
 
 <script lang="ts" setup>
-import { useProps, useStyle } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useDimension,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
 import { convertToUnit } from "../../utils";
-import { computed, StyleValue } from "vue";
+import { computed, StyleValue, toRef } from "vue";
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -61,6 +69,12 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { dimensionStyles } = useDimension(props);
 const iconStyles = computed(() => {
   const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
@@ -68,6 +82,12 @@ const iconStyles = computed(() => {
       "font-size": numericSize,
       "line-height": numericSize
     },
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -77,6 +97,11 @@ const iconClasses = computed(() => {
     "origam-icon",
     namedSize,
     props.icon,
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });