origam 2.2.1 → 2.5.0

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -355,11 +355,6 @@ const _props = defineProps({
   requirementRules: { type: Array, required: false },
   requirementsLayout: { type: String, required: false },
   minimal: { type: Boolean, 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  density: { type: null, required: false, default: DENSITY.DEFAULT },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
@@ -369,6 +364,12 @@ const _props = defineProps({
   role: { type: String, required: false },
   type: { type: null, required: false },
   modelModifiers: { type: [String, Boolean], required: false },
+  mask: { type: null, 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 },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
@@ -385,7 +386,7 @@ const _props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },

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

@@ -50,11 +50,6 @@ import { useBackgroundColor, useProps, useStyle } from "../../composables";
 const props = defineProps({
   landscape: { type: Boolean, required: false },
   hideHeader: { type: Boolean, 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   side: { type: null, required: false },
   swipeable: { type: Boolean, required: false },
   snapPoints: { type: Array, required: false },
@@ -63,6 +58,9 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
   tag: { 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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -77,6 +75,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 },
+  color: { 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 },
@@ -107,6 +106,7 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   title: { type: String, required: false }
 });
 const slots = useSlots();

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

@@ -19,8 +19,8 @@ const props = defineProps({
   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 },
-  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 }
 });
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));

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

@@ -2,7 +2,9 @@
 	<component
 			:is="progressComponent"
 			ref="origamProgressRef"
+			:aria-busy="props.indeterminate ? true : undefined"
 			:aria-hidden="!active"
+			:aria-label="props.label ?? 'Loading'"
 			:aria-valuemax="max"
 			:aria-valuenow="indeterminate ? undefined : normalizedValue"
 			:class="progressClasses"
@@ -47,7 +49,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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

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

@@ -74,7 +74,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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -281,4 +281,11 @@ defineExpose({
 			transform: rotate(270deg);
 		}
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-progress--circular.origam-progress--indeterminate > svg,
+		.origam-progress--circular.origam-progress--indeterminate .origam-progress__overlay {
+			animation: none;
+		}
+	}
 </style>

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

@@ -79,7 +79,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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -357,6 +357,18 @@ defineExpose({
 					animation-play-state: running;
 				}
 			}
+
+			@media (prefers-reduced-motion: reduce) {
+				&#{$this}--indeterminate #{$this}__bar {
+					animation: none;
+					left: 0;
+					width: 50%;
+				}
+
+				#{$this}__stream {
+					animation: none;
+				}
+			}
 		}
 	}
 </style>

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

@@ -0,0 +1,246 @@
+<template>
+	<component
+			:is="tag"
+			class="origam-qr-code"
+			:class="rootClasses"
+			:style="rootStyles"
+			role="img"
+			:aria-label="resolvedAriaLabel"
+			data-cy="origam-qr-code"
+	>
+		<h3
+				v-if="title"
+				class="origam-qr-code__title"
+				data-cy="origam-qr-code-title"
+		>{{ title }}</h3>
+		<span
+				ref="svgHost"
+				class="origam-qr-code__svg-host"
+				:class="sizeClasses"
+				:style="svgHostStyles"
+		/>
+		<span
+				v-if="hasCenter"
+				class="origam-qr-code__center"
+				aria-hidden="true"
+		>
+			<slot
+					name="center"
+					:size="centerSize"
+			>
+				<origam-avatar
+						v-if="image"
+						:image="image"
+						class="origam-qr-code__center-avatar"
+				/>
+				<origam-icon
+						v-if="icon"
+						:icon="icon"
+						class="origam-qr-code__center-icon"
+				/>
+			</slot>
+		</span>
+	</component>
+</template>
+
+<script setup>
+import {
+  computed,
+  ref,
+  useSlots,
+  watchEffect
+} 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";
+const props = defineProps({
+  value: { type: String, required: true },
+  title: { type: String, required: false, default: void 0 },
+  qrCodeProps: { type: Object, required: false, default: void 0 },
+  errorCorrectionLevel: { type: String, required: false, default: "M" },
+  quietZone: { type: Number, required: false, default: 4 },
+  icon: { type: null, required: false, default: void 0 },
+  image: { type: [String, Object], required: false, default: void 0 },
+  ariaLabel: { type: String, required: false, default: void 0 },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: "currentColor" },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: void 0 },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: void 0 },
+  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 },
+  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 },
+  size: { type: null, required: false, default: 240 },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false }
+});
+defineSlots();
+const slots = useSlots();
+const hasCenter = computed(
+  () => !!slots.center || !!props.icon || !!props.image
+);
+const resolvedQrColor = computed(
+  () => resolveQrColor(
+    props.qrCodeProps?.color ?? props.color,
+    "foreground",
+    "currentColor"
+  )
+);
+const resolvedQrBgColor = computed(
+  () => resolveQrColor(
+    props.qrCodeProps?.bgColor,
+    "background",
+    "transparent"
+  )
+);
+const resolvedQrCornerRadius = computed(
+  () => resolveQrCornerRadius(props.qrCodeProps?.rounded)
+);
+const resolvedOptions = computed(() => ({
+  errorCorrectionLevel: props.errorCorrectionLevel,
+  foreground: resolvedQrColor.value,
+  background: resolvedQrBgColor.value,
+  margin: props.quietZone ?? 4,
+  cornerRadius: resolvedQrCornerRadius.value
+}));
+const { svg, size: matrixSize } = useQrCode(() => props.value, resolvedOptions);
+const centerSize = computed(() => Math.round(matrixSize.value * 0.2));
+const svgHost = ref(null);
+watchEffect(() => {
+  const target = svgHost.value;
+  if (!target) return;
+  target.innerHTML = svg.value;
+});
+const resolvedAriaLabel = computed(() => {
+  if (props.ariaLabel) return props.ariaLabel;
+  if (props.title) return props.title;
+  return `QR code for ${props.value}`;
+});
+const { textColorClasses, textColorStyles } = useTextColor(props, "color");
+const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { sizeClasses, sizeStyles } = useSize(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
+const rootClasses = computed(() => [
+  `origam-qr-code--ecc-${props.errorCorrectionLevel.toLowerCase()}`,
+  ...textColorClasses.value,
+  ...backgroundColorClasses.value,
+  ...roundedClasses.value,
+  ...borderClasses.value,
+  ...paddingClasses.value,
+  ...marginClasses.value,
+  ...elevationClasses.value,
+  props.class
+]);
+const rootStyles = computed(() => [
+  textColorStyles.value,
+  backgroundColorStyles.value,
+  roundedStyles.value,
+  borderStyles.value,
+  paddingStyles.value,
+  marginStyles.value,
+  elevationStyles.value,
+  props.style
+]);
+const svgHostStyles = computed(() => sizeStyles.value);
+defineExpose({
+  svg
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-qr-code {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		line-height: 0;
+		position: relative;
+		// Baseline inner spacing — matches the `gap` between title and
+		// SVG so the wrapper has the same breathing room on every side
+		// of the matrix. Overridden by the `padding` prop (via
+		// `usePadding(props)` inline styles) when the consumer
+		// provides one.
+		padding: 8px;
+	}
+
+	.origam-qr-code__title {
+		margin: 0;
+		font: 600 0.875rem/1.2 inherit;
+		text-align: center;
+		color: inherit;
+		line-height: 1.2;
+		align-self: stretch;
+	}
+
+	.origam-qr-code__svg-host {
+		display: block;
+		aspect-ratio: 1;
+		position: relative;
+
+		:deep(svg) {
+			display: block;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.origam-qr-code__center {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 20%;
+		height: 20%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 4px;
+		pointer-events: none;
+	}
+
+	.origam-qr-code__center-avatar,
+	.origam-qr-code__center-icon {
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamQrCode", {
+  enumerable: true,
+  get: function () {
+    return _OrigamQrCode.default;
+  }
+});
+var _OrigamQrCode = _interopRequireDefault(require("./OrigamQrCode.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -0,0 +1 @@
+export { default as OrigamQrCode } from "./OrigamQrCode.vue";

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

@@ -142,8 +142,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 },

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

@@ -65,10 +65,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/Radio/OrigamRadioGroup.vue

@@ -97,8 +97,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 },

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

@@ -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 },
@@ -229,6 +226,9 @@ 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 },
+  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 }

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

@@ -60,7 +60,7 @@ const props = defineProps({
   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 },

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"
@@ -84,6 +84,7 @@
 					<origam-list
 							v-if="hasList"
 							ref="origamListRef"
+							:id="listboxId"
 							:select-strategy="multiple ? SELECT_STRATEGY.INDEPENDENT : SELECT_STRATEGY.SINGLE_INDEPENDENT"
 							:selected="selectedValues"
 							:tabindex="-1"
@@ -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 },
@@ -343,6 +344,7 @@ const props = defineProps({
   role: { type: String, required: false, default: "combobox" },
   type: { type: null, required: false, default: TEXT_FIELD_TYPE.TEXT },
   modelModifiers: { type: [String, Boolean], required: false },
+  mask: { type: null, required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
@@ -441,7 +443,7 @@ const props = defineProps({
   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();
@@ -450,6 +452,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);
@@ -521,19 +527,30 @@ 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)
   });
 };
@@ -612,8 +629,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) {
@@ -701,6 +735,7 @@ const handleChange = (e) => {
   }
 };
 const handleAfterLeave = () => {
+  highlightIndex.value = -1;
   if (isFocused.value) {
     isPristine.value = true;
     origamTextFieldRef.value?.focus();