origam 0.3.10 → 2.3.0

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

@@ -9,6 +9,7 @@
 			<template v-if="!hideHeader">
 				<div
 						key="header"
+						:class="backgroundColorClasses"
 						:style="backgroundColorStyles"
 				>
 					<template v-if="hasTitle">
@@ -45,7 +46,7 @@
 <script setup>
 import { computed, ref, StyleValue, toRef, useSlots } from "vue";
 import { OrigamPickerTitle, OrigamSheet } from "../../components";
-import { useBackgroundColor, useProps } from "../../composables";
+import { useBackgroundColor, useProps, useStyle } from "../../composables";
 const props = defineProps({
   landscape: { type: Boolean, required: false },
   hideHeader: { type: Boolean, required: false },
@@ -54,10 +55,13 @@ const props = defineProps({
   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 },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  side: { type: null, required: false },
+  swipeable: { type: Boolean, required: false },
+  snapPoints: { type: Array, required: false },
+  defaultSnap: { type: [String, Object], required: false },
+  open: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  persistent: { type: Boolean, required: false },
   tag: { type: String, required: false },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
@@ -82,7 +86,7 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -100,11 +104,14 @@ const props = defineProps({
   bottom: { type: [Number, String], required: false },
   left: { type: [Number, String], required: false },
   right: { type: [Number, String], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false },
   title: { type: String, required: false }
 });
 const slots = useSlots();
 const { filterProps } = useProps(props);
-const { backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
+const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
 const hasTitle = computed(() => {
   return !!(props.title || slots.title);
 });
@@ -127,8 +134,14 @@ const pickerClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(pickerStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -140,8 +153,10 @@ defineExpose({
 		grid-auto-rows: min-content;
 		grid-template-areas: "title" "header" "body";
 		overflow: hidden;
-		box-shadow: 0 0 0 0 var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, .2)), 0 0 0 0 var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, .14)), 0 0 0 0 var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, .12));
-		border-radius: 4px;
+		background-color: var(--origam-picker---background-color);
+		color: var(--origam-picker---color);
+		box-shadow: var(--origam-picker---box-shadow);
+		border-radius: var(--origam-picker---border-radius);
 
 		&--landscape {
 			grid-template-areas: "title" "header body" "header body";
@@ -171,16 +186,16 @@ defineExpose({
 
 		&__actions {
 			grid-area: actions;
-			padding: 0 12px 12px;
+			padding: var(--origam-picker__actions---padding, 0 12px 12px);
 			display: flex;
 			align-items: center;
 			justify-content: flex-end;
 
 			:deep(.origam-btn) {
-				min-width: 48px;
+				min-width: var(--origam-picker__actions__btn---min-width, 48px);
 
 				&:not(:last-child) {
-					margin-inline-end: 8px;
+					margin-inline-end: var(--origam-picker__actions__btn---margin-inline-end, 8px);
 				}
 			}
 		}

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

@@ -11,39 +11,51 @@
 </template>
 
 <script setup>
-import { computed, StyleValue } from "vue";
-import { useProps } from "../../composables";
+import { computed, StyleValue, toRef } from "vue";
+import { useBothColor, useProps, useStyle } 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" }
+  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 }
 });
 const { filterProps } = useProps(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const pickerTitleStyles = computed(() => {
   return [
+    colorStyles.value,
     props.style
   ];
 });
 const pickerTitleClasses = computed(() => {
   return [
     "origam-picker-title",
+    colorClasses.value,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(pickerTitleStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss" scoped>
 	.origam-picker-title {
-		text-transform: uppercase;
-		font-size: .75rem;
-		padding-inline: 24px 12px;
-		padding-block: 16px;
-		font-weight: 400;
-		letter-spacing: .1666666667em
+		text-transform: var(--origam-picker-title---text-transform, uppercase);
+		font-size: var(--origam-picker-title---font-size, .75rem);
+		padding-inline: var(--origam-picker-title---padding-inline, 24px 12px);
+		padding-block: var(--origam-picker-title---padding-block, 16px);
+		font-weight: var(--origam-picker-title---font-weight, 400);
+		letter-spacing: var(--origam-picker-title---letter-spacing, .1666666667em);
+		color: var(--origam-picker-title---color, var(--origam-picker--title---color, inherit));
 	}
 </style>

package/dist/src/components/Progress/OrigamProgress.vue

@@ -2,7 +2,7 @@
 	<component
 			:is="progressComponent"
 			ref="origamProgressRef"
-			:aria-hidden="!props.active"
+			:aria-hidden="!active"
 			:aria-valuemax="max"
 			:aria-valuenow="indeterminate ? undefined : normalizedValue"
 			:class="progressClasses"
@@ -23,7 +23,12 @@
 <script setup>
 import { computed, ref, StyleValue } from "vue";
 import { OrigamProgressCircular, OrigamProgressLinear } from "../../components";
-import { useProgress, useProps, useSize } from "../../composables";
+import {
+  useProgress,
+  useProps,
+  useSize,
+  useStyle
+} from "../../composables";
 import { PROGRESS_TYPE, SIZES } from "../../enums";
 const props = defineProps({
   type: { type: null, required: false },
@@ -43,11 +48,6 @@ const props = defineProps({
   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 },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, 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 },
@@ -62,7 +62,7 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -96,7 +96,13 @@ const progressClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(progressStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>

package/dist/src/components/Progress/OrigamProgressCircular.vue

@@ -12,10 +12,10 @@
 		>
 			<circle
 					:r="MAGIC_RADIUS"
+					:class="progressUnderlayClasses"
 					:stroke-dasharray="CIRCUMFERENCE"
 					:stroke-width="strokeWidth"
 					:style="backgroundStyles"
-					class="origam-progress__underlay"
 					cx="50%"
 					cy="50%"
 					fill="transparent"
@@ -24,11 +24,11 @@
 
 			<circle
 					:r="MAGIC_RADIUS"
+					:class="progressOverlayClasses"
 					:stroke-dasharray="CIRCUMFERENCE"
 					:stroke-dashoffset="strokeDashOffset"
 					:stroke-width="strokeWidth"
 					:style="loaderStyles"
-					class="origam-progress__overlay"
 					cx="50%"
 					cy="50%"
 					fill="transparent"
@@ -55,10 +55,12 @@ import {
   useProps,
   useResizeObserver,
   useSize,
+  useStyle,
   useTextColor
 } from "../../composables";
 import { CIRCUMFERENCE, MAGIC_RADIUS } from "../../consts";
 import { convertToUnit } from "../../utils";
+import { SIZES } from "../../enums";
 const props = defineProps({
   rotate: { type: [String, Number], required: false },
   indeterminate: { type: Boolean, required: false },
@@ -73,11 +75,6 @@ const props = defineProps({
   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 },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, 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,16 +89,16 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  size: { type: null, required: false }
+  size: { type: null, required: false, default: SIZES.DEFAULT }
 });
 const { filterProps } = useProps(props);
+const root = ref();
 const { progressClasses, progressStyles, normalizedValue, thickness, hasContent } = useProgress(props);
 const { resizeRef, contentRect } = useResizeObserver();
 const { intersectionRef } = useIntersectionObserver();
-const { sizeStyles } = useSize(props);
-const { textColorStyles: backgroundColorStyles } = useTextColor(toRef(props, "bgColor"));
-const { textColorStyles: loaderColorStyles } = useTextColor(toRef(props, "color"));
-const root = ref();
+const { sizeStyles, sizeClasses } = useSize(props, "origam-progress");
+const { textColorStyles: backgroundColorStyles, textColorClasses: backgroundColorClasses } = useTextColor(toRef(props, "bgColor"));
+const { textColorStyles: loaderColorStyles, textColorClasses: loaderColorClasses } = useTextColor(toRef(props, "color"));
 const size = computed(() => {
   if (sizeStyles.value.length) {
     return Number(props.size);
@@ -133,9 +130,22 @@ const progressCircularStyles = computed(() => {
     props.style
   ];
 });
+const progressUnderlayClasses = computed(() => {
+  return [
+    "origam-progress__underlay",
+    backgroundColorClasses.value
+  ];
+});
+const progressOverlayClasses = computed(() => {
+  return [
+    "origam-progress__overlay",
+    loaderColorClasses.value
+  ];
+});
 const progressCircularClasses = computed(() => {
   return [
     `origam-progress--circular`,
+    sizeClasses.value,
     progressClasses.value,
     props.class
   ];
@@ -153,13 +163,18 @@ const loaderStyles = computed(() => {
     loaderColorStyles.value
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(progressCircularStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss" scoped>
-	// TODO - use css variables
 	.origam-progress {
 		$this: &;
 
@@ -189,14 +204,16 @@ defineExpose({
 			}
 
 			#{$this}__underlay {
-				color: rgba(#fff, 0.4);
+				color: var(--origam-progress-circular__underlay---color, var(--origam-color__surface---disabled));
 				stroke: currentColor;
+				opacity: var(--origam-progress-circular__underlay---opacity, 0.5);
 				z-index: 1;
 			}
 
 			#{$this}__overlay {
+				color: var(--origam-progress-circular__overlay---color, inherit);
 				stroke: currentColor;
-				transition: all 0.2s ease-in-out, stroke-width 0s;
+				transition: all var(--origam-progress-circular---transition-duration, 0.2s) var(--origam-progress-circular---transition-easing, ease-in-out), stroke-width 0s;
 				z-index: 2;
 			}
 

package/dist/src/components/Progress/OrigamProgressLinear.vue

@@ -13,12 +13,12 @@
 				class="origam-progress__stream"
 		/>
 		<div
+				:class="progressBackgroundClasses"
 				:style="backgroundStyles"
-				class="origam-progress__background"
 		/>
 
 		<origam-transition :transition="transition">
-			<div class="origam-progress__loader">
+			<div :class="progressLoaderClasses">
 				<template v-if="indeterminate">
 					<div
 							v-for="bar in ['long', 'short']"
@@ -53,13 +53,14 @@
 import { computed, StyleValue, toRef } from "vue";
 import { OrigamFade, OrigamSlideX, OrigamTransition } from "../../components";
 import {
-  useBackgroundColor,
   useIntersectionObserver,
   useLocation,
   useProgress,
   useProps,
   useRounded,
-  useRtl
+  useRtl,
+  useStyle,
+  useTextColor
 } from "../../composables";
 import { convertToUnit } from "../../utils";
 const props = defineProps({
@@ -79,11 +80,6 @@ const props = defineProps({
   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 },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, 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 },
@@ -98,7 +94,7 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -110,8 +106,8 @@ const { locationStyles } = useLocation(props);
 const { progressClasses, progressStyles, normalizedValue, thickness, progress, max, hasContent } = useProgress(props);
 const { roundedClasses } = useRounded(props);
 const { intersectionRef } = useIntersectionObserver();
-const { backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
-const { backgroundColorStyles: loaderColorStyles } = useBackgroundColor(toRef(props, "color"));
+const { textColorStyles: backgroundColorStyles, textColorClasses: backgroundColorClasses } = useTextColor(toRef(props, "bgColor"), void 0, "origam-progress__background");
+const { textColorStyles: loaderColorStyles, textColorClasses: loaderColorClasses } = useTextColor(toRef(props, "color"), void 0, "origam-progress__loader");
 const { isRtl, rtlClasses } = useRtl();
 const normalizedBuffer = computed(() => {
   return parseFloat(props.bufferValue) / max.value * 100;
@@ -141,6 +137,18 @@ const progressLinearStyles = computed(() => {
     props.style
   ];
 });
+const progressBackgroundClasses = computed(() => {
+  return [
+    "origam-progress__background",
+    backgroundColorClasses.value
+  ];
+});
+const progressLoaderClasses = computed(() => {
+  return [
+    "origam-progress__loader",
+    loaderColorClasses.value
+  ];
+});
 const progressLinearClasses = computed(() => {
   return [
     "origam-progress--linear",
@@ -181,8 +189,14 @@ const loaderStyles = computed(() => {
     loaderColorStyles.value
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(progressLinearStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -200,8 +214,9 @@ defineExpose({
 			#{$this}__background {
 				background: currentColor;
 				bottom: 0;
+				color: var(--origam-progress-linear__background---color, inherit);
 				left: 0;
-				opacity: 0.5;
+				opacity: var(--origam-progress-linear__background---opacity, 0.5);
 				position: absolute;
 				top: 0;
 				transition-property: width, left, right;
@@ -221,6 +236,8 @@ defineExpose({
 			}
 
 			#{$this}__loader {
+				color: var(--origam-progress-linear__loader---color, inherit);
+
 				> * {
 					background: currentColor;
 				}
@@ -345,10 +362,6 @@ defineExpose({
 </style>
 
 <style>
-	:root {
-
-	}
-
 	@keyframes indeterminate-ltr {
 		0% {
 			left: -90%;

package/dist/src/components/Radio/OrigamRadio.vue

@@ -102,7 +102,14 @@
 <script setup>
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
 import { OrigamInput, OrigamRadioBtn } from "../../components";
-import { useFocus, useProps, useVModel } from "../../composables";
+import {
+  useFocus,
+  useHover,
+  useProps,
+  useStateEffect,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { DENSITY } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
 const props = defineProps({
@@ -130,17 +137,13 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   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 },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, 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 },
@@ -174,6 +177,7 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  size: { type: null, required: false },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
@@ -184,9 +188,14 @@ const props = defineProps({
   multiple: { type: Boolean, required: false },
   type: { type: String, required: false },
   valueComparator: { type: Function, required: false },
-  ripple: { type: [Boolean, Object], required: false }
+  ripple: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
+const { isHover, hoverState } = useHover(props);
+useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);
 const origamInputRef = ref();
 const origamRadioBtnRef = ref();
@@ -217,8 +226,15 @@ const radioClasses = computed(() => {
     props.class
   ];
 });
+const { id: styleId, css, load, isLoaded, unload } = useStyle(radioStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
 });
 </script>
 

package/dist/src/components/Radio/OrigamRadioBtn.vue

@@ -19,11 +19,11 @@
 
 		<template
 				v-if="slots.input"
-				#input="{props, icon, textColorStyles, backgroundColorStyles, model}"
+				#input="{props, icon, model}"
 		>
 			<slot
 					name="input"
-					v-bind="{props, icon, textColorStyles, backgroundColorStyles, model}"
+					v-bind="{props, icon, model}"
 			/>
 		</template>
 
@@ -39,7 +39,11 @@
 <script setup>
 import { computed, ref, StyleValue, useSlots } from "vue";
 import { OrigamSelectionControl } from "../../components";
-import { useProps, useVModel } from "../../composables";
+import {
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { DENSITY, MDI_ICONS } from "../../enums";
 const props = defineProps({
   id: { type: String, required: false },
@@ -62,13 +66,12 @@ const props = defineProps({
   type: { type: String, required: false },
   valueComparator: { type: Function, required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  ripple: { type: [Boolean, Object], required: false }
+  ripple: { type: [Boolean, Object], required: false },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
 const { filterProps } = useProps(props);
@@ -92,7 +95,13 @@ const radioBtnClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(radioBtnStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>