origam 2.3.0 → 2.6.1

package/dist/src/components/Chart/index.cjs

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamChart", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChart.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartAxis", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartAxis.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartBoxPlot", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartBoxPlot.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartBullet", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartBullet.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartCandlestick", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartCandlestick.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartCartesian", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartCartesian.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartGauge", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartGauge.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartHeatmap", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartHeatmap.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartHoneycomb", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartHoneycomb.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartLegend", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartLegend.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartMap", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartMap.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartPareto", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartPareto.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartPictorial", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartPictorial.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartPolar", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartPolar.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartPolarBar", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartPolarBar.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartPyramid", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartPyramid.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartRadar", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartRadar.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartRangeSelector", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartRangeSelector.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartSankey", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartSankey.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartSparkline", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartSparkline.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartStreamgraph", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartStreamgraph.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartSunburst", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartSunburst.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartTooltip", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartTooltip.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartTreemap", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartTreemap.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartVariwide", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartVariwide.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartWordCloud", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartWordCloud.default;
+  }
+});
+var _OrigamChart = _interopRequireDefault(require("./OrigamChart.vue"));
+var _OrigamChartCartesian = _interopRequireDefault(require("./OrigamChartCartesian.vue"));
+var _OrigamChartPolar = _interopRequireDefault(require("./OrigamChartPolar.vue"));
+var _OrigamChartRadar = _interopRequireDefault(require("./OrigamChartRadar.vue"));
+var _OrigamChartGauge = _interopRequireDefault(require("./OrigamChartGauge.vue"));
+var _OrigamChartPyramid = _interopRequireDefault(require("./OrigamChartPyramid.vue"));
+var _OrigamChartHoneycomb = _interopRequireDefault(require("./OrigamChartHoneycomb.vue"));
+var _OrigamChartTreemap = _interopRequireDefault(require("./OrigamChartTreemap.vue"));
+var _OrigamChartSankey = _interopRequireDefault(require("./OrigamChartSankey.vue"));
+var _OrigamChartWordCloud = _interopRequireDefault(require("./OrigamChartWordCloud.vue"));
+var _OrigamChartHeatmap = _interopRequireDefault(require("./OrigamChartHeatmap.vue"));
+var _OrigamChartSunburst = _interopRequireDefault(require("./OrigamChartSunburst.vue"));
+var _OrigamChartBoxPlot = _interopRequireDefault(require("./OrigamChartBoxPlot.vue"));
+var _OrigamChartPictorial = _interopRequireDefault(require("./OrigamChartPictorial.vue"));
+var _OrigamChartStreamgraph = _interopRequireDefault(require("./OrigamChartStreamgraph.vue"));
+var _OrigamChartCandlestick = _interopRequireDefault(require("./OrigamChartCandlestick.vue"));
+var _OrigamChartVariwide = _interopRequireDefault(require("./OrigamChartVariwide.vue"));
+var _OrigamChartPolarBar = _interopRequireDefault(require("./OrigamChartPolarBar.vue"));
+var _OrigamChartBullet = _interopRequireDefault(require("./OrigamChartBullet.vue"));
+var _OrigamChartPareto = _interopRequireDefault(require("./OrigamChartPareto.vue"));
+var _OrigamChartMap = _interopRequireDefault(require("./OrigamChartMap.vue"));
+var _OrigamChartSparkline = _interopRequireDefault(require("./OrigamChartSparkline.vue"));
+var _OrigamChartAxis = _interopRequireDefault(require("./OrigamChartAxis.vue"));
+var _OrigamChartLegend = _interopRequireDefault(require("./OrigamChartLegend.vue"));
+var _OrigamChartTooltip = _interopRequireDefault(require("./OrigamChartTooltip.vue"));
+var _OrigamChartRangeSelector = _interopRequireDefault(require("./OrigamChartRangeSelector.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Chart/index.d.ts

@@ -0,0 +1,26 @@
+export { default as OrigamChart } from './OrigamChart.vue';
+export { default as OrigamChartCartesian } from './OrigamChartCartesian.vue';
+export { default as OrigamChartPolar } from './OrigamChartPolar.vue';
+export { default as OrigamChartRadar } from './OrigamChartRadar.vue';
+export { default as OrigamChartGauge } from './OrigamChartGauge.vue';
+export { default as OrigamChartPyramid } from './OrigamChartPyramid.vue';
+export { default as OrigamChartHoneycomb } from './OrigamChartHoneycomb.vue';
+export { default as OrigamChartTreemap } from './OrigamChartTreemap.vue';
+export { default as OrigamChartSankey } from './OrigamChartSankey.vue';
+export { default as OrigamChartWordCloud } from './OrigamChartWordCloud.vue';
+export { default as OrigamChartHeatmap } from './OrigamChartHeatmap.vue';
+export { default as OrigamChartSunburst } from './OrigamChartSunburst.vue';
+export { default as OrigamChartBoxPlot } from './OrigamChartBoxPlot.vue';
+export { default as OrigamChartPictorial } from './OrigamChartPictorial.vue';
+export { default as OrigamChartStreamgraph } from './OrigamChartStreamgraph.vue';
+export { default as OrigamChartCandlestick } from './OrigamChartCandlestick.vue';
+export { default as OrigamChartVariwide } from './OrigamChartVariwide.vue';
+export { default as OrigamChartPolarBar } from './OrigamChartPolarBar.vue';
+export { default as OrigamChartBullet } from './OrigamChartBullet.vue';
+export { default as OrigamChartPareto } from './OrigamChartPareto.vue';
+export { default as OrigamChartMap } from './OrigamChartMap.vue';
+export { default as OrigamChartSparkline } from './OrigamChartSparkline.vue';
+export { default as OrigamChartAxis } from './OrigamChartAxis.vue';
+export { default as OrigamChartLegend } from './OrigamChartLegend.vue';
+export { default as OrigamChartTooltip } from './OrigamChartTooltip.vue';
+export { default as OrigamChartRangeSelector } from './OrigamChartRangeSelector.vue';

package/dist/src/components/Chart/index.js

@@ -0,0 +1,26 @@
+export { default as OrigamChart } from "./OrigamChart.vue";
+export { default as OrigamChartCartesian } from "./OrigamChartCartesian.vue";
+export { default as OrigamChartPolar } from "./OrigamChartPolar.vue";
+export { default as OrigamChartRadar } from "./OrigamChartRadar.vue";
+export { default as OrigamChartGauge } from "./OrigamChartGauge.vue";
+export { default as OrigamChartPyramid } from "./OrigamChartPyramid.vue";
+export { default as OrigamChartHoneycomb } from "./OrigamChartHoneycomb.vue";
+export { default as OrigamChartTreemap } from "./OrigamChartTreemap.vue";
+export { default as OrigamChartSankey } from "./OrigamChartSankey.vue";
+export { default as OrigamChartWordCloud } from "./OrigamChartWordCloud.vue";
+export { default as OrigamChartHeatmap } from "./OrigamChartHeatmap.vue";
+export { default as OrigamChartSunburst } from "./OrigamChartSunburst.vue";
+export { default as OrigamChartBoxPlot } from "./OrigamChartBoxPlot.vue";
+export { default as OrigamChartPictorial } from "./OrigamChartPictorial.vue";
+export { default as OrigamChartStreamgraph } from "./OrigamChartStreamgraph.vue";
+export { default as OrigamChartCandlestick } from "./OrigamChartCandlestick.vue";
+export { default as OrigamChartVariwide } from "./OrigamChartVariwide.vue";
+export { default as OrigamChartPolarBar } from "./OrigamChartPolarBar.vue";
+export { default as OrigamChartBullet } from "./OrigamChartBullet.vue";
+export { default as OrigamChartPareto } from "./OrigamChartPareto.vue";
+export { default as OrigamChartMap } from "./OrigamChartMap.vue";
+export { default as OrigamChartSparkline } from "./OrigamChartSparkline.vue";
+export { default as OrigamChartAxis } from "./OrigamChartAxis.vue";
+export { default as OrigamChartLegend } from "./OrigamChartLegend.vue";
+export { default as OrigamChartTooltip } from "./OrigamChartTooltip.vue";
+export { default as OrigamChartRangeSelector } from "./OrigamChartRangeSelector.vue";

package/dist/src/components/Checkbox/OrigamCheckbox.vue

@@ -55,10 +55,12 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamCheckboxBtn, OrigamInput } from "../../components";
 import {
   useFocus,
+  useMargin,
+  usePadding,
   useProps,
   useStyle,
   useVModel
@@ -96,8 +98,8 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  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 },
@@ -116,7 +118,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
@@ -132,12 +134,19 @@ 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 },
   indeterminate: { type: Boolean, required: false },
   indeterminateIcon: { type: null, required: false },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
@@ -172,14 +181,20 @@ const inputProps = computed(() => {
 const checkboxBtnProps = computed(() => {
   return origamCheckboxBtnRef.value?.filterProps(props, ["class", "style", "modelValue", "id", "disabled", "readonly", "error"]);
 });
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
 const checkboxStyles = computed(() => {
   return [
+    paddingStyles.value,
+    marginStyles.value,
     props.style
   ];
 });
 const checkboxClasses = computed(() => {
   return [
     "origam-checkbox",
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });
@@ -202,7 +217,7 @@ defineExpose({
 		}
 
 		.origam-selection-control {
-			min-height: calc(56px + 2 * var(--origam-input---density));
+			min-height: calc(56px + 2 * var(--origam-input---density, 0px));
 		}
 	}
 </style>

package/dist/src/components/Checkbox/OrigamCheckboxBtn.vue

@@ -38,7 +38,7 @@
 	</origam-selection-control>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamSelectionControl } from "../../components";
 import {
   useProps,
@@ -58,8 +58,10 @@ const props = defineProps({
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false, default: MDI_ICONS.CHECKBOX_BLANK_OUTLINE },
   trueIcon: { type: null, required: false, default: MDI_ICONS.CHECKBOX_MARKED_OUTLINE },
@@ -69,10 +71,10 @@ const props = defineProps({
   modelValue: { type: null, required: false },
   type: { type: String, required: false },
   valueComparator: { type: Function, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   ripple: { type: [Boolean, Object], required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false }

package/dist/src/components/Chip/OrigamChip.vue

@@ -2,6 +2,7 @@
 	<component
 			:is="link.tag"
 			v-ripple="rippleProps"
+			v-contrast
 			:class="chipClasses"
 			:disabled="disabled"
 			:draggable="draggable"
@@ -93,11 +94,17 @@
 			</slot>
 		</div>
 
-		<div
+		<origam-btn
 				v-if="hasClose"
 				key="close"
+				:aria-label="t(closeLabel)"
 				class="origam-chip__close"
-				@click="handleClickClose"
+				variant="text"
+				:icon="true"
+				size="x-small"
+				density="compact"
+				:style="{'--origam-btn---min-width': '0', '--origam-btn---min-height': '0'}"
+				@click.stop="handleClickClose"
 		>
 			<slot
 					name="close"
@@ -106,19 +113,19 @@
 				<origam-icon
 						v-if="closeIcon"
 						key="close-icon"
-						:aria-label="t(closeLabel)"
 						:density="density"
 						:icon="closeIcon"
+						aria-hidden="true"
 						size="x-small"
 				/>
 			</slot>
-		</div>
+		</origam-btn>
 
 	</component>
 </template>
 
-<script setup>
-import { OrigamAvatar, OrigamExpandX, OrigamIcon } from "../../components";
+<script lang="ts" setup>
+import { OrigamAvatar, OrigamBtn, OrigamExpandX, OrigamIcon } from "../../components";
 import {
   useAdjacent,
   useBothColor,
@@ -132,10 +139,11 @@ import {
   useSize,
   useStateEffect,
   useStyle,
+  useTypography,
   useVModel
 } from "../../composables";
 import { ORIGAM_CHIP_GROUP_KEY } from "../../consts";
-import { vRipple } from "../../directives";
+import { vContrast, vRipple } from "../../directives";
 import { KEYBOARD_VALUES, MDI_ICONS, SIZES } from "../../enums";
 import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const _props = defineProps({
@@ -158,8 +166,8 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   tag: { type: String, required: false, default: "span" },
-  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 },
   ripple: { type: [Boolean, Object], required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
@@ -201,10 +209,15 @@ const _props = defineProps({
   elevation: { type: [Number, String], 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 }
 });
 const props = useDefaults(_props);
-const emits = defineEmits(["click:close", "update:modelValue", "group:selected", "click", "click:prepend", "click:append"]);
+const emits = defineEmits(["update:modelValue", "click", "click:close", "click:append", "click:prepend", "group:selected"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();
@@ -223,6 +236,7 @@ const {
   marginStyles
 } = useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { sizeClasses, sizeStyles } = useSize(props);
+const { typographyStyles } = useTypography(props, "chip");
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const isActive = useVModel(props, "modelValue");
 const group = useGroupItem(props, ORIGAM_CHIP_GROUP_KEY, false);
@@ -290,6 +304,7 @@ const chipStyles = computed(() => {
     paddingStyles.value,
     marginStyles.value,
     colorStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });
@@ -410,35 +425,35 @@ defineExpose({
 		}
 
 		&--size-x-small {
-			font-size: var(--origam-chip---font-size-xs, 0.625rem);
+			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-xs, 0.625rem));
 			line-height: 1;
 			height: var(--origam-chip---height-xs, 20px);
 			padding: 0 var(--origam-chip---padding-xs, 8px);
 		}
 
 		&--size-small {
-			font-size: var(--origam-chip---font-size-sm, 0.75rem);
+			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-sm, 0.75rem));
 			line-height: 1;
 			height: var(--origam-chip---height-sm, 24px);
 			padding: 0 var(--origam-chip---padding-sm, 10px);
 		}
 
 		&--size-default {
-			font-size: var(--origam-chip---font-size-md, 0.875rem);
+			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-md, 0.875rem));
 			line-height: 1;
 			height: var(--origam-chip---height-md, 32px);
 			padding: 0 var(--origam-chip---padding-md, 12px);
 		}
 
 		&--size-large {
-			font-size: var(--origam-chip---font-size-lg, 1rem);
+			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-lg, 1rem));
 			line-height: 1;
 			height: var(--origam-chip---height-lg, 38px);
 			padding: 0 var(--origam-chip---padding-lg, 14px);
 		}
 
 		&--size-x-large {
-			font-size: var(--origam-chip---font-size-xl, 1.125rem);
+			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-xl, 1.125rem));
 			line-height: 1;
 			height: var(--origam-chip---height-xl, 44px);
 			padding: 0 var(--origam-chip---padding-xl, 17px);

package/dist/src/components/Chip/OrigamChipGroup.vue

@@ -14,9 +14,9 @@
 	</origam-slide-group>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamDefaultsProvider, OrigamSlideGroup } from "../../components";
-import { useGroup, useProps, useStyle } from "../../composables";
+import { useBorder, useGroup, useMargin, usePadding, useProps, useRounded, useStyle } from "../../composables";
 import { ORIGAM_CHIP_GROUP_KEY } from "../../consts";
 import { DIRECTION, MDI_ICONS } from "../../enums";
 import { computed, ref, StyleValue } from "vue";
@@ -24,6 +24,8 @@ const props = defineProps({
   column: { type: Boolean, required: false },
   filter: { type: Boolean, required: false },
   valueComparator: { type: Function, required: false },
+  active: { type: Object, required: false },
+  hover: { type: Object, 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 },
@@ -34,8 +36,8 @@ const props = defineProps({
   mandatory: { type: Boolean, required: false },
   max: { type: Number, required: false },
   selectedClass: { type: String, required: false, default: "origam-chip--selected" },
-  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 },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -75,14 +77,16 @@ defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const origamSlideGroupRef = ref();
 const { isSelected, select, next, prev, selected } = useGroup(props, ORIGAM_CHIP_GROUP_KEY);
+const { marginClasses, marginStyles } = useMargin(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
 const slotDefaults = computed(() => ({
   "origam-chip": {
     color: props.color,
     bgColor: props.bgColor,
-    activeColor: props.activeColor,
-    activeBgColor: props.activeBgColor,
-    hoverColor: props.hoverColor,
-    hoverBgColor: props.hoverBgColor
+    active: props.active,
+    hover: props.hover
   }
 }));
 const slideGroupProps = computed(() => {
@@ -90,6 +94,10 @@ const slideGroupProps = computed(() => {
 });
 const chipGroupStyles = computed(() => {
   return [
+    marginStyles.value,
+    paddingStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
     props.style
   ];
 });
@@ -99,6 +107,10 @@ const chipGroupClasses = computed(() => {
     {
       "origam-chip-group--column": props.column
     },
+    marginClasses.value,
+    paddingClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
     props.class
   ];
 });

package/dist/src/components/ClientOnly/OrigamClientOnly.vue

@@ -14,7 +14,7 @@
     </template>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { onMounted, ref } from "vue";
 defineOptions({ name: "OrigamClientOnly" });
 defineProps({