origam 2.16.0 → 2.17.1

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

@@ -1,9 +1,17 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			ref="root"
+			:aria-busy="indeterminate ? true : undefined"
+			:aria-hidden="!active"
+			:aria-label="progressAriaLabel"
+			:aria-valuemax="max"
+			:aria-valuenow="indeterminate ? undefined : normalizedValue"
 			:class="progressCircularClasses"
 			:style="progressCircularStyles"
+			aria-valuemin="0"
+			role="progressbar"
 	>
 		<svg
 				:style="svgStyles"
@@ -49,28 +57,27 @@
 
 <script lang="ts" setup>
 import { computed, ref, StyleValue, toRef, watchEffect } from "vue";
-import {
-  useIntersectionObserver,
-  useProgress,
-  useProps,
-  useResizeObserver,
-  useSize,
-  useStyle,
-  useTextColor
-} from "../../composables";
-import { CIRCUMFERENCE, MAGIC_RADIUS } from "../../consts";
-import { convertToUnit } from "../../utils";
-import { SIZES } from "../../enums";
+import { useIntersectionObserver } from "../../composables/Commons/intersectionObserver.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProgress } from "../../composables/Progress/progress.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useResizeObserver } from "../../composables/Commons/resizeObserver.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { CIRCUMFERENCE, MAGIC_RADIUS } from "../../consts/Progress/progress.const";
+import { convertToUnit, int } from "../../utils/Commons/commons.util";
+import { SIZES } from "../../enums/Commons/size.enum";
 const props = defineProps({
-  rotate: { type: [String, Number], required: false },
+  rotate: { type: [String, Number], required: false, default: 0 },
   indeterminate: { type: Boolean, required: false },
   modelValue: { type: [String, Number], required: false, default: 0 },
   thickness: { type: [String, Number], required: false, default: 4 },
-  active: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: true },
   absolute: { type: Boolean, required: false },
   max: { type: [Number, String], required: false, default: 100 },
   striped: { type: Boolean, required: false },
-  label: { type: String, required: false },
+  label: { type: String, required: false, default: "origam.loading" },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -93,6 +100,7 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false },
   size: { type: null, required: false, default: SIZES.DEFAULT }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const root = ref();
@@ -100,11 +108,13 @@ const { progressClasses, progressStyles, normalizedValue, thickness, hasContent
 const { resizeRef, contentRect } = useResizeObserver();
 const { intersectionRef } = useIntersectionObserver();
 const { sizeStyles, sizeClasses } = useSize(props, "origam-progress");
+const { t } = useLocale();
+const progressAriaLabel = computed(() => t(props.label));
 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);
+    return int(props.size);
   }
   if (contentRect.value) {
     return contentRect.value.width;
@@ -154,7 +164,7 @@ const progressCircularClasses = computed(() => {
   ];
 });
 const svgStyles = computed(() => {
-  return [`transform: rotate(calc(-90deg + ${Number(props.rotate)}deg))`];
+  return [`transform: rotate(calc(-90deg + ${int(props.rotate)}deg))`];
 });
 const backgroundStyles = computed(() => {
   return [
@@ -166,7 +176,7 @@ const loaderStyles = computed(() => {
     loaderColorStyles.value
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(progressCircularStyles);
+const { id, css, load, isLoaded, unload } = useStyle(progressCircularStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -182,78 +192,78 @@ defineExpose({
 		$this: &;
 
 		&--circular {
-			align-items: center;
-			display: inline-flex;
-			justify-content: center;
-			position: relative;
-			vertical-align: middle;
+			align-items: var(--origam-progress-circular---align-items, center);
+			display: var(--origam-progress-circular---display, inline-flex);
+			justify-content: var(--origam-progress-circular---justify-content, center);
+			position: var(--origam-progress-circular---position, relative);
+			vertical-align: var(--origam-progress-circular---vertical-align, middle);
 
 			> svg {
-				width: 100%;
-				height: 100%;
+				width: var(--origam-progress-circular__svg---width, 100%);
+				height: var(--origam-progress-circular__svg---height, 100%);
 				margin: auto;
-				position: absolute;
+				position: var(--origam-progress-circular__svg---position, absolute);
 				top: 0;
 				bottom: 0;
 				left: 0;
 				right: 0;
-				z-index: 0;
+				z-index: var(--origam-progress-circular__svg---z-index, 0);
 			}
 
 			#{$this}__content {
-				align-items: center;
-				display: flex;
-				justify-content: center;
+				align-items: var(--origam-progress-circular__content---align-items, center);
+				display: var(--origam-progress-circular__content---display, flex);
+				justify-content: var(--origam-progress-circular__content---justify-content, center);
 			}
 
 			#{$this}__underlay {
 				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;
+				z-index: var(--origam-progress-circular__underlay---z-index, 1);
 			}
 
 			#{$this}__overlay {
 				color: var(--origam-progress-circular__overlay---color, inherit);
 				stroke: currentColor;
 				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;
+				z-index: var(--origam-progress-circular__overlay---z-index, 2);
 			}
 
 			&#{$this}--size-x-small {
-				height: 16px;
-				width: 16px;
+				height: var(--origam-progress-circular---size-xs, 16px);
+				width: var(--origam-progress-circular---size-xs, 16px);
 			}
 
 			&#{$this}--size-small {
-				height: 24px;
-				width: 24px;
+				height: var(--origam-progress-circular---size-sm, 24px);
+				width: var(--origam-progress-circular---size-sm, 24px);
 			}
 
 			&#{$this}--size-default {
-				height: 32px;
-				width: 32px;
+				height: var(--origam-progress-circular---size-md, 32px);
+				width: var(--origam-progress-circular---size-md, 32px);
 			}
 
 			&#{$this}--size-large {
-				height: 48px;
-				width: 48px;
+				height: var(--origam-progress-circular---size-lg, 48px);
+				width: var(--origam-progress-circular---size-lg, 48px);
 			}
 
 			&#{$this}--size-x-large {
-				height: 64px;
-				width: 64px;
+				height: var(--origam-progress-circular---size-xl, 64px);
+				width: var(--origam-progress-circular---size-xl, 64px);
 			}
 
 			&#{$this}--indeterminate {
 				> svg {
-					animation: progress-circular-rotate 1.4s linear infinite;
+					animation: progress-circular-rotate var(--origam-progress-circular---indeterminate-duration, 1.4s) linear infinite;
 					transform-origin: center center;
 					transition: all 0.2s ease-in-out;
 				}
 
 				#{$this}__overlay {
-					animation: progress-circular-dash 1.4s ease-in-out infinite, progress-circular-rotate 1.4s linear infinite;
+					animation: progress-circular-dash var(--origam-progress-circular---indeterminate-duration, 1.4s) ease-in-out infinite, progress-circular-rotate var(--origam-progress-circular---indeterminate-duration, 1.4s) linear infinite;
 					stroke-dasharray: 25, 200;
 					stroke-dashoffset: 0;
 					stroke-linecap: round;

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

@@ -1,10 +1,18 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			ref="root"
+			:aria-busy="indeterminate ? true : undefined"
+			:aria-hidden="!active"
+			:aria-label="progressAriaLabel"
+			:aria-valuemax="max"
+			:aria-valuenow="indeterminate ? undefined : normalizedValue"
 			:class="progressLinearClasses"
 			:style="progressLinearStyles"
-			@click="clickable && handleClick"
+			aria-valuemin="0"
+			role="progressbar"
+			@click="handleClick"
 	>
 		<div
 				v-if="stream"
@@ -50,19 +58,20 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, StyleValue, toRef } from "vue";
-import { OrigamFade, OrigamSlideX, OrigamTransition } from "../../components";
-import {
-  useIntersectionObserver,
-  useLocation,
-  useProgress,
-  useProps,
-  useRounded,
-  useRtl,
-  useStyle,
-  useTextColor
-} from "../../composables";
-import { convertToUnit } from "../../utils";
+import { computed, ref, StyleValue, toRef, watchEffect } from "vue";
+import OrigamFade from "../Transition/OrigamFade.vue";
+import OrigamSlideX from "../Transition/OrigamSlideX.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useIntersectionObserver } from "../../composables/Commons/intersectionObserver.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useLocation } from "../../composables/Commons/location.composable";
+import { useProgress } from "../../composables/Progress/progress.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useRtl } from "../../composables/Commons/rtl.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { convertToUnit } from "../../utils/Commons/commons.util";
 const props = defineProps({
   bufferValue: { type: [Number, String], required: false },
   clickable: { type: Boolean, required: false },
@@ -71,11 +80,11 @@ const props = defineProps({
   indeterminate: { type: Boolean, required: false },
   modelValue: { type: [String, Number], required: false, default: 0 },
   thickness: { type: [String, Number], required: false, default: 4 },
-  active: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: true },
   absolute: { type: Boolean, required: false },
   max: { type: [Number, String], required: false, default: 100 },
   striped: { type: Boolean, required: false },
-  label: { type: String, required: false },
+  label: { type: String, required: false, default: "origam.loading" },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -103,8 +112,10 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   location: { type: null, required: false }
 });
+defineEmits(["update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
+const root = ref();
 const { locationStyles } = useLocation(props);
 const { progressClasses, progressStyles, normalizedValue, thickness, progress, max, hasContent } = useProgress(props);
 const { roundedClasses } = useRounded(props);
@@ -112,6 +123,8 @@ const { intersectionRef } = useIntersectionObserver();
 const { textColorStyles: backgroundColorStyles, textColorClasses: backgroundColorClasses } = useTextColor(toRef(props, "bgColor"));
 const { textColorStyles: loaderColorStyles, textColorClasses: loaderColorClasses } = useTextColor(toRef(props, "color"));
 const { isRtl, rtlClasses } = useRtl();
+const { t } = useLocale();
+const progressAriaLabel = computed(() => t(props.label));
 const normalizedBuffer = computed(() => {
   return parseFloat(props.bufferValue) / max.value * 100;
 });
@@ -121,8 +134,11 @@ const transition = computed(() => {
 const isReversed = computed(() => {
   return isRtl.value !== props.reverse;
 });
+watchEffect(() => {
+  intersectionRef.value = root.value;
+});
 const handleClick = (e) => {
-  if (!intersectionRef.value) return;
+  if (!props.clickable || !intersectionRef.value) return;
   const { left, right, width } = intersectionRef.value.getBoundingClientRect();
   const value = props.reverse ? width - e.clientX + (right - width) : e.clientX - left;
   progress.value = Math.round(value / width * max.value);
@@ -192,7 +208,7 @@ const loaderStyles = computed(() => {
     loaderColorStyles.value
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(progressLinearStyles);
+const { id, css, load, isLoaded, unload } = useStyle(progressLinearStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -207,12 +223,20 @@ defineExpose({
 	.origam-progress {
 		$this: &;
 
+    &--is-rtl {
+      direction: rtl;
+    }
+
+    &--is-ltr {
+      direction: ltr;
+    }
+
 		&--linear {
 			background: transparent;
-			overflow: hidden;
-			position: relative;
-			transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-			width: 100%;
+			overflow: var(--origam-progress-linear---overflow, hidden);
+			position: var(--origam-progress-linear---position, relative);
+			transition: var(--origam-progress-linear---transition-duration, 0.2s) var(--origam-progress-linear---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			width: var(--origam-progress-linear---width, 100%);
 
 			#{$this}__background {
 				background: currentColor;
@@ -246,16 +270,16 @@ defineExpose({
 			}
 
 			#{$this}__bar {
-				height: 100%;
-				left: 0;
-				position: absolute;
+				height: var(--origam-progress-linear__bar---height, 100%);
+				left: var(--origam-progress-linear__bar---left, 0);
+				position: var(--origam-progress-linear__bar---position, absolute);
 				transition: inherit;
 			}
 
 			&#{$this}--indeterminate {
 				#{$this}__bar {
 					animation-play-state: paused;
-					animation-duration: 2.2s;
+					animation-duration: var(--origam-progress-linear---indeterminate-duration, 2.2s);
 					animation-iteration-count: infinite;
 					bottom: 0;
 					right: auto;
@@ -277,9 +301,9 @@ defineExpose({
 				animation-play-state: paused;
 				bottom: 0;
 				left: auto;
-				opacity: 0.3;
-				pointer-events: none;
-				position: absolute;
+				opacity: var(--origam-progress-linear__stream---opacity, 0.3);
+				pointer-events: var(--origam-progress-linear__stream---pointer-events, none);
+				position: var(--origam-progress-linear__stream---position, absolute);
 				transition: inherit;
 			}
 
@@ -312,22 +336,20 @@ defineExpose({
 				}
 			}
 
-			&#{$this}--absolute,
-			&#{$this}--fixed {
-				left: 0;
-				z-index: 1;
-			}
-
 			&#{$this}--absolute {
-				position: absolute;
+				left: var(--origam-progress-linear__absolute---left, 0);
+				z-index: var(--origam-progress-linear__absolute---z-index, 1);
+				position: var(--origam-progress-linear__absolute---position, absolute);
 			}
 
 			&#{$this}--fixed {
-				position: fixed;
+				left: var(--origam-progress-linear__fixed---left, 0);
+				z-index: var(--origam-progress-linear__fixed---z-index, 1);
+				position: var(--origam-progress-linear__fixed---position, fixed);
 			}
 
 			&#{$this}--rounded {
-				border-radius: 9999px;
+				border-radius: var(--origam-progress-linear---rounded-border-radius, 9999px);
 
 				#{$this}__loader {
 					border-radius: inherit;

package/dist/src/components/QrCode/OrigamQrCode.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			class="origam-qr-code"
 			:class="rootClasses"
 			:style="rootStyles"
@@ -52,18 +53,17 @@ import {
 } from "vue";
 import { OrigamAvatar } from "../Avatar";
 import { OrigamIcon } from "../Icon";
-import {
-  useBackgroundColor,
-  useBorder,
-  useElevation,
-  useMargin,
-  usePadding,
-  useQrCode,
-  useRounded,
-  useSize,
-  useTextColor
-} from "../../composables";
-import { resolveQrColor, resolveQrCornerRadius } from "../../utils";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useQrCode } from "../../composables/QrCode/qr-code.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { resolveQrColor, resolveQrCornerRadius } from "../../utils/QrCode/qr-code-adapters.util";
 const props = defineProps({
   value: { type: String, required: true },
   title: { type: String, required: false, default: void 0 },
@@ -114,8 +114,10 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false }
 });
+defineEmits([]);
 defineSlots();
 const slots = useSlots();
+const { t } = useLocale();
 const hasCenter = computed(
   () => !!slots.center || !!props.icon || !!props.image
 );
@@ -154,7 +156,7 @@ watchEffect(() => {
 const resolvedAriaLabel = computed(() => {
   if (props.ariaLabel) return props.ariaLabel;
   if (props.title) return props.title;
-  return `QR code for ${props.value}`;
+  return t("origam.qr_code.aria_label", { value: props.value });
 });
 const { textColorClasses, textColorStyles } = useTextColor(props, "color");
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");

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

@@ -101,21 +101,20 @@
 
 <script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
-import { OrigamInput, OrigamRadioBtn } from "../../components";
-import {
-  useDefaults,
-  useFocus,
-  useHover,
-  useMargin,
-  usePadding,
-  useProps,
-  useStateEffect,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { DENSITY } from "../../enums";
-import { filterInputAttrs, getUid } from "../../utils";
-const _props = defineProps({
+import OrigamInput from "../Input/OrigamInput.vue";
+import OrigamRadioBtn from "./OrigamRadioBtn.vue";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { filterInputAttrs } from "../../utils/Input/input.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+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 },
@@ -173,7 +172,6 @@ const _props = defineProps({
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
-  label: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   modelValue: { type: null, required: false },
@@ -185,32 +183,29 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, 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 },
+  label: { type: String, 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 },
+  type: { type: String, required: false },
+  valueComparator: { type: Function, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
   multiple: { type: Boolean, required: false },
-  type: { type: String, required: false },
-  valueComparator: { type: Function, required: false },
+  inline: { type: Boolean, required: false },
+  hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, 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 }
+  activeClass: { type: String, required: false }
 });
-const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
 defineSlots();
-const { isHover, hoverState } = useHover(props);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
 useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);
 const origamInputRef = ref();

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

@@ -1,5 +1,6 @@
 <template>
 	<origam-selection-control
+			:id="id"
 			ref="origamSelectionControlRef"
 			v-model="model"
 			:class="radioBtnClasses"
@@ -38,13 +39,12 @@
 
 <script lang="ts" setup>
 import { computed, ref, StyleValue, useSlots } from "vue";
-import { OrigamSelectionControl } from "../../components";
-import {
-  useProps,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { DENSITY, MDI_ICONS } from "../../enums";
+import OrigamSelectionControl from "../SelectionControl/OrigamSelectionControl.vue";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -54,26 +54,22 @@ 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: [String, Boolean], required: false },
-  inline: { type: Boolean, required: false },
-  falseIcon: { type: null, required: false, default: MDI_ICONS.RADIOBOX_BLANK },
-  trueIcon: { type: null, required: false, default: MDI_ICONS.RADIOBOX_MARKED },
-  multiple: { type: Boolean, required: false },
   name: { type: String, required: false },
   readonly: { type: Boolean, required: false },
-  modelValue: { type: null, required: false },
   type: { type: String, required: false },
+  modelValue: { type: null, required: false },
   valueComparator: { type: Function, required: false },
+  falseIcon: { type: null, required: false, default: MDI_ICONS.RADIOBOX_BLANK },
+  trueIcon: { type: null, required: false, default: MDI_ICONS.RADIOBOX_MARKED },
+  multiple: { type: Boolean, required: false },
+  inline: { type: Boolean, required: false },
   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, Object, Boolean, null], required: false, skipCheck: true },
-  active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -92,9 +88,10 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  elevation: { type: [Number, String], required: false }
+  elevation: { type: [Number, String], required: false },
+  ripple: { type: [Boolean, Object], required: false }
 });
-const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
+const emits = defineEmits(["update:modelValue", "click:label"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const origamSelectionControlRef = ref();
@@ -117,7 +114,7 @@ const radioBtnClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(radioBtnStyles);
+const { id, css, load, isLoaded, unload } = useStyle(radioBtnStyles, () => props.id);
 defineExpose({
   filterProps,
   css,