origam 2.3.0 → 2.6.1

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

@@ -24,42 +24,43 @@
 					/>
 				</slot>
 
-				<origam-selection-control-group
-						:id="id"
-						ref="origamSelectionControlGroupRef"
-						v-model="model"
-						:aria-describedby="messagesId"
-						:aria-labelledby="label ? id : undefined"
-						:disabled="isDisabled"
-						:items="items"
-						:multiple="false"
-						:readonly="isReadonly"
-						v-bind="{ ...controlProps , ...controlAttrs}"
-				>
-					<template #item="{item}">
-						<slot
-								name="item"
-								v-bind="{id, messagesId, isDisabled, isReadonly, isValid}"
-						>
-							<origam-radio
-									ref="origamRadioRef"
-									v-model="model"
-									:aria-describedby="messagesId"
-									:disabled="isDisabled"
-									:readonly="isReadonly"
-									v-bind="item"
-							/>
-						</slot>
-					</template>
-				</origam-selection-control-group>
+				<origam-defaults-provider :defaults="radioDefaults">
+					<origam-selection-control-group
+							:id="id"
+							ref="origamSelectionControlGroupRef"
+							v-model="model"
+							:aria-describedby="messagesId"
+							:aria-labelledby="label ? id : undefined"
+							:disabled="isDisabled"
+							:items="items"
+							:multiple="false"
+							:readonly="isReadonly"
+							v-bind="{ ...controlProps , ...controlAttrs}"
+					>
+						<template #item="{item}">
+							<slot
+									name="item"
+									v-bind="{id, messagesId, isDisabled, isReadonly, isValid}"
+							>
+								<origam-radio
+										v-model="model"
+										:aria-describedby="messagesId"
+										:disabled="isDisabled"
+										:readonly="isReadonly"
+										v-bind="item"
+								/>
+							</slot>
+						</template>
+					</origam-selection-control-group>
+				</origam-defaults-provider>
 			</slot>
 		</template>
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs } from "vue";
-import { OrigamInput, OrigamLabel, OrigamRadio, OrigamSelectionControlGroup } from "../../components";
+import { OrigamDefaultsProvider, OrigamInput, OrigamLabel, OrigamRadio, OrigamSelectionControlGroup } from "../../components";
 import {
   useProps,
   useStyle,
@@ -97,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 },
@@ -117,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 },
@@ -133,8 +134,15 @@ 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 },
   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 },
@@ -150,7 +158,6 @@ const props = defineProps({
 const { filterProps } = useProps(props);
 const origamSelectionControlGroupRef = ref();
 const origamInputRef = ref();
-const origamRadioRef = ref();
 const attrs = useAttrs();
 const uid = getUid();
 const id = computed(() => {
@@ -164,16 +171,16 @@ const inputProps = computed(() => {
 const controlProps = computed(() => {
   return origamSelectionControlGroupRef.value?.filterProps(props, ["modelValue", "id", "style", "class", "readonly", "disabled", "type", "multiple", "items"]);
 });
-const radioProps = computed(() => {
-  return origamRadioRef.value.filterProps(props);
-});
+const radioDefaults = computed(() => ({
+  "origam-radio": {
+    color: props.color,
+    bgColor: props.bgColor,
+    density: props.density,
+    size: props.size
+  }
+}));
 const items = computed(() => {
-  return props.items?.map((item) => {
-    return {
-      ...radioProps.value,
-      ...item
-    };
-  });
+  return props.items ?? [];
 });
 const radioGroupStyles = computed(() => {
   return [

package/dist/src/components/RatingField/OrigamRatingField.vue

@@ -59,7 +59,7 @@
 						<template v-if="hasLabels && labelOnTop && slots[`itemLabel.${index}`]">
 							<slot :name="`itemLabel.${index}`">
 								<slot name="itemLabel">
-									<span>{{ itemLabels[index] ?? '&nbsp;' }}</span>
+									<span>{{ itemLabels?.[index] ?? '&nbsp;' }}</span>
 								</slot>
 							</slot>
 						</template>
@@ -93,7 +93,7 @@
 						<template v-if="hasLabels && labelOnBottom && slots[`itemLabel.${index}`]">
 							<slot :name="`itemLabel.${index}`">
 								<slot name="itemLabel">
-									<span>{{ itemLabels[index] ?? '&nbsp;' }}</span>
+									<span>{{ itemLabels?.[index] ?? '&nbsp;' }}</span>
 								</slot>
 							</slot>
 						</template>
@@ -141,7 +141,7 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, shallowRef, StyleValue, useAttrs, useSlots } from "vue";
 import { OrigamBtn, OrigamInput, OrigamLabel, OrigamRatingFieldItem } from "../../components";
 import {
@@ -166,10 +166,15 @@ const props = defineProps({
   modelValue: { type: [Number, String], required: false, default: 0 },
   itemLabels: { type: Array, required: false },
   itemLabelPosition: { type: null, required: false, default: BLOCK.TOP },
+  centerAffix: { type: Boolean, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, 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 },
-  ripple: { type: [Boolean, Object], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
@@ -178,15 +183,6 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
-  borderTop: { type: [Boolean, Number, String], required: false },
-  borderLeft: { type: [Boolean, Number, String], required: false },
-  borderBottom: { type: [Boolean, Number, String], required: false },
-  borderRight: { type: [Boolean, Number, String], required: false },
-  borderBlock: { type: [Boolean, Number, String], required: false },
-  borderInline: { type: [Boolean, Number, String], required: false },
-  borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -199,17 +195,18 @@ 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, 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 },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
   elevation: { type: [Number, String], required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  size: { type: null, required: false, default: SIZES.DEFAULT },
-  tag: { type: String, required: false, default: "div" },
-  centerAffix: { type: Boolean, required: false },
-  hideDetails: { type: [Boolean, String], required: false },
-  hideSpinButtons: { type: Boolean, required: false },
-  hint: { type: String, required: false },
-  persistentHint: { type: Boolean, required: false },
-  messages: { type: [Array, String], required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -217,7 +214,7 @@ const props = defineProps({
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
   direction: { type: null, 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 },
   label: { type: String, required: false },
@@ -229,6 +226,14 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  size: { type: null, required: false, default: SIZES.DEFAULT },
+  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 },
+  ripple: { type: [Boolean, Object], required: false },
+  tag: { type: String, required: false, default: "div" },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
   required: { type: Boolean, required: false }
@@ -345,14 +350,5 @@ defineExpose({
 			pointer-events: none;
 		}
 
-		&--hover {
-
-		}
-	}
-</style>
-
-<style>
-	:root {
-
 	}
 </style>

package/dist/src/components/RatingField/OrigamRatingFieldItem.vue

@@ -35,7 +35,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue } from "vue";
 import { OrigamBtn } from "../../components";
 import { useLocale, useProps, useStyle } from "../../composables";
@@ -45,6 +45,7 @@ const props = defineProps({
   index: { type: Number, required: false, default: -1 },
   value: { type: Number, required: true },
   label: { type: String, required: false },
+  itemAriaLabel: { type: String, required: false, default: "origam.rating.ariaLabel.item" },
   showStar: { type: Boolean, required: false, default: true },
   isFilled: { type: Boolean, required: false },
   isHovered: { type: Boolean, required: false },
@@ -55,12 +56,12 @@ const props = defineProps({
   emptyIcon: { type: null, required: false, default: MDI_ICONS.STAR_OUTLINE },
   halfIncrements: { type: Boolean, required: false },
   checked: { type: Boolean, required: false },
-  length: { type: Number, required: false },
+  length: { type: [Number, 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" },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
   ripple: { type: [Boolean, Object], required: false },
   size: { type: null, required: false },
@@ -166,10 +167,6 @@ defineExpose({
 			width: 0;
 		}
 
-		&--full {
-
-		}
-
 		&--half {
 			overflow: hidden;
 			position: absolute;

package/dist/src/components/Responsive/OrigamResponsive.vue

@@ -17,7 +17,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, useSlots } from "vue";
 import {
   useAspectRatio,

package/dist/src/components/Section/OrigamSection.vue

@@ -4,6 +4,6 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 
 </script>

package/dist/src/components/Select/OrigamSelect.vue

@@ -11,7 +11,7 @@
 			:style="selectStyles"
 			:title="t(label)"
 			:validation-value="validationValue"
-			v-bind="{ ...textFieldProps }"
+			v-bind="{ ...textFieldProps, ...comboboxAriaAttrs }"
 			@blur="handleBlur"
 			@change="handleChange"
 			@keydown="handleKeydown"
@@ -83,6 +83,7 @@
 				<template #default>
 					<origam-list
 							v-if="hasList"
+							:id="listboxId"
 							ref="origamListRef"
 							:select-strategy="multiple ? SELECT_STRATEGY.INDEPENDENT : SELECT_STRATEGY.SINGLE_INDEPENDENT"
 							:selected="selectedValues"
@@ -148,13 +149,13 @@
 													</template>
 													<template v-else>
                           <span class="origam-select__unmask">
-                            {{ item.title.substr(0, getMatches(item)?.title) }}
+                            {{ item.title.substr(0, getMatchStart(item)) }}
                           </span>
 														<span class="origam-select__mask">
-                            {{ item.title.substr(getMatches(item)?.title, search.length) }}
+                            {{ item.title.substr(getMatchStart(item), getSearchLength()) }}
                           </span>
 														<span class="origam-select__unmask">
-                            {{ item.title.substr(getMatches(item)?.title + search.length) }}
+                            {{ item.title.substr(getMatchStart(item) + getSearchLength()) }}
                           </span>
 													</template>
 												</template>
@@ -259,7 +260,7 @@
 	</origam-text-field>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   getCurrentInstance,
@@ -308,7 +309,7 @@ import {
   SELECT_STRATEGY,
   TEXT_FIELD_TYPE
 } from "../../enums";
-import { deepEqual, forwardRefs, matchesSelector, noop, wrapInArray } from "../../utils";
+import { deepEqual, forwardRefs, getUid, matchesSelector, noop, wrapInArray } from "../../utils";
 const props = defineProps({
   chips: { type: Boolean, required: false },
   closableChips: { type: Boolean, required: false },
@@ -332,8 +333,8 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, 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 },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
@@ -358,6 +359,8 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
@@ -399,6 +402,11 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -437,12 +445,12 @@ const props = defineProps({
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) },
   customFilter: { type: Function, required: false },
   customKeyFilter: { type: Object, required: false },
-  filterKeys: { type: [String, Array], required: true, default: () => ["title"] },
-  filterMode: { type: null, required: true, default: FILTERS_MODE.INTERSECTION },
+  filterKeys: { type: [String, Array], required: false, default: () => ["title"] },
+  filterMode: { type: null, required: false, default: FILTERS_MODE.INTERSECTION },
   noFilter: { type: Boolean, required: false },
   eager: { type: Boolean, required: false }
 });
-defineEmits(["click:control", "mousedown:control", "update:focused", "update:modelValue", "update:menu", "click:prepend", "click:prependInner", "click:append", "click:appendInner", "click:clear"]);
+defineEmits(["click:control", "mousedown:control", "update:menu", "update:modelValue", "update:focused", "click:append", "click:prepend", "click:appendInner", "click:prependInner", "click:clear"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const origamTextFieldRef = ref();
@@ -451,6 +459,10 @@ const origamVirtualScrollRef = ref();
 const origamListRef = ref();
 const origamChipsRef = ref();
 const vm = getCurrentInstance();
+const _uid = getUid();
+const listboxId = `origam-select-listbox-${_uid}`;
+const optionId = (index) => `${listboxId}-opt-${index}`;
+const highlightIndex = shallowRef(-1);
 const slots = useSlots();
 const { textColorClasses, textColorStyles } = useTextColor(toRef(props, "color"));
 const { items, transformIn, transformOut } = useItems(props);
@@ -522,25 +534,38 @@ const menuDisabled = computed(() => {
 });
 const menuProps = computed(() => {
   return {
-    ...props.menuProps,
-    activatorProps: {
-      ...props.menuProps?.activatorProps || {},
-      "aria-haspopup": "listbox"
-      // Set aria-haspopup to 'listbox'
-    }
+    ...props.menuProps
+  };
+});
+const comboboxAriaAttrs = computed(() => {
+  const activeDescendant = menu.value && highlightIndex.value >= 0 ? optionId(highlightIndex.value) : void 0;
+  return {
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": menu.value ? "true" : "false",
+    "aria-controls": menu.value ? listboxId : void 0,
+    "aria-autocomplete": props.autocomplete ? "list" : void 0,
+    "aria-activedescendant": activeDescendant
   };
 });
 const menuListItemProps = (item, itemRef, index) => {
+  const isKeyboardHighlighted = highlightIndex.value === index;
+  const isItemSelected = isSelected(item);
   return mergeProps(item.props ?? {}, {
     ref: itemRef,
     key: index,
-    active: highlightFirst.value && index === 0 ? true : isSelected(item),
+    id: optionId(index),
+    role: "option",
+    "aria-selected": isItemSelected,
+    active: highlightFirst.value && index === 0 || isItemSelected || isKeyboardHighlighted,
     onClick: () => handleSelect(item, null)
   });
 };
 const isSelected = (item) => {
   return selectedValues.value.includes(item.value);
 };
+const getMatchStart = (item) => Number(getMatches(item)?.title ?? 0);
+const getSearchLength = () => (search.value ?? "").length;
 const {
   onListScroll: handleListScroll,
   onListKeydown: handleListKeydown
@@ -596,8 +621,8 @@ const handleMousedownMenuIcon = (e) => {
   if (isFocused.value) {
     e.preventDefault();
     e.stopPropagation();
+    menu.value = !menu.value;
   }
-  menu.value = !menu.value;
 };
 const handleKeydown = (e) => {
   if (!e.key || props.readonly || form?.isReadonly.value) return;
@@ -613,8 +638,25 @@ const handleKeydown = (e) => {
   }
   const keyMenuOut = [KEYBOARD_VALUES.ESC, KEYBOARD_VALUES.TAB];
   if (keyMenuOut.includes(e.key)) {
+    highlightIndex.value = -1;
     menu.value = false;
   }
+  const itemCount = displayItems.value.length;
+  if (menu.value && itemCount > 0) {
+    if (e.key === KEYBOARD_VALUES.DOWN) {
+      highlightIndex.value = highlightIndex.value < itemCount - 1 ? highlightIndex.value + 1 : 0;
+    } else if (e.key === KEYBOARD_VALUES.UP) {
+      highlightIndex.value = highlightIndex.value > 0 ? highlightIndex.value - 1 : itemCount - 1;
+    } else if (e.key === KEYBOARD_VALUES.HOME) {
+      highlightIndex.value = 0;
+    } else if (e.key === KEYBOARD_VALUES.END) {
+      highlightIndex.value = itemCount - 1;
+    } else if (e.key === KEYBOARD_VALUES.ENTER && highlightIndex.value >= 0) {
+      handleSelect(displayItems.value[highlightIndex.value], null);
+      highlightIndex.value = -1;
+      return;
+    }
+  }
   if (e.key === KEYBOARD_VALUES.HOME) {
     origamListRef.value?.focus("first");
   } else if (e.key === KEYBOARD_VALUES.END) {
@@ -641,13 +683,13 @@ const handleKeydown = (e) => {
     }
     if (!props.multiple) return;
     if (e.key === KEYBOARD_VALUES.LEFT) {
-      if (selectionIndex.value < 0 && selectionStart > 0) return;
+      if (selectionIndex.value < 0 && (selectionStart ?? 0) > 0) return;
       const prev = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
       if (model.value[prev]) {
         selectionIndex.value = prev;
       } else {
         selectionIndex.value = -1;
-        origamTextFieldRef.value?.setSelectionRange(search.value?.length, search.value?.length);
+        origamTextFieldRef.value?.setSelectionRange(search.value?.length ?? null, search.value?.length ?? null);
       }
     }
     if (e.key === KEYBOARD_VALUES.RIGHT) {
@@ -702,6 +744,7 @@ const handleChange = (e) => {
   }
 };
 const handleAfterLeave = () => {
+  highlightIndex.value = -1;
   if (isFocused.value) {
     isPristine.value = true;
     origamTextFieldRef.value?.focus();

package/dist/src/components/SelectionControl/OrigamSelectionControl.vue

@@ -64,7 +64,7 @@
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, nextTick, ref, shallowRef, StyleValue, useAttrs } from "vue";
 import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts";
 import { OrigamIcon, OrigamLabel } from "../../components";
@@ -86,11 +86,13 @@ 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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, 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 },
   trueIcon: { type: null, required: false },
@@ -100,10 +102,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 },
   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 }
@@ -263,8 +265,8 @@ defineExpose(forwardRefs({
     }
 
     &__wrapper {
-      width: calc(40px + 1.5 * var(--origam-selection-control--density));
-      height: calc(40px + 1.5 * var(--origam-selection-control--density));
+      width: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
+      height: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
       display: inline-flex;
       align-items: center;
       position: relative;
@@ -273,8 +275,8 @@ defineExpose(forwardRefs({
     }
 
     &__input {
-      width: calc(40px + 1.5 * var(--origam-selection-control--density));
-      height: calc(40px + 1.5 * var(--origam-selection-control--density));
+      width: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
+      height: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
       align-items: center;
       display: flex;
       flex: none;
@@ -368,6 +370,10 @@ defineExpose(forwardRefs({
         &:before {
           opacity: calc(0.12 * 1);
         }
+
+        outline: var(--origam-border__width---2, 2px) solid var(--origam-color__border---focus, currentColor);
+        outline-offset: var(--origam-space---1, 2px);
+        border-radius: 50%;
       }
     }
 
@@ -378,5 +384,9 @@ defineExpose(forwardRefs({
     &--density-compact {
       --origam-selection-control--density: -8px;
     }
+
+    &--density-comfortable {
+      --origam-selection-control--density: 8px;
+    }
   }
 </style>

package/dist/src/components/SelectionControl/OrigamSelectionControlGroup.vue

@@ -1,6 +1,7 @@
 <template>
 	<div
 			:id="name"
+			role="group"
 			:class="selectionControlGroupClasses"
 			:style="selectionControlGroupStyles"
 	>
@@ -28,7 +29,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, onScopeDispose, provide, StyleValue } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {
@@ -41,7 +42,7 @@ import { DENSITY } from "../../enums";
 import { getUid } from "../../utils";
 const props = defineProps({
   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 },
   trueIcon: { type: null, required: false },
@@ -55,7 +56,7 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, 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 }
 });