origam 2.2.1 → 2.5.0

package/dist/src/components/Code/OrigamCode.vue

@@ -0,0 +1,459 @@
+<template>
+	<component
+			:is="tag"
+			:class="codeClasses"
+			:style="codeStyles"
+	>
+		<component :is="headerTag" v-if="showHeader" class="origam-code__header">
+			<slot
+					name="header"
+					:filename="filename"
+					:lang-name="lang"
+					:copy="handleCopy"
+					:copied="copied"
+			>
+				<span v-if="filename" class="origam-code__filename" data-cy="origam-code-filename">{{ filename }}</span>
+				<span v-else class="origam-code__lang-badge" data-cy="origam-code-lang">{{ lang }}</span>
+				<button
+						v-if="copyable"
+						type="button"
+						class="origam-code__copy origam-code__copy--header"
+						:aria-label="copyAriaLabel"
+						aria-live="polite"
+						data-cy="origam-code-copy"
+						@click="handleCopy"
+				>
+					<span class="origam-code__copy-label">{{ copyButtonLabel }}</span>
+				</button>
+			</slot>
+		</component>
+
+		<button
+				v-if="copyable && !showHeader"
+				type="button"
+				class="origam-code__copy origam-code__copy--floating"
+				:aria-label="copyAriaLabel"
+				aria-live="polite"
+				data-cy="origam-code-copy"
+				@click="handleCopy"
+		>
+			<span class="origam-code__copy-label">{{ copyButtonLabel }}</span>
+		</button>
+
+		<div class="origam-code__scroller" :style="scrollerStyles">
+			<pre class="origam-code__pre" :class="preClasses"><code
+					ref="codeRef"
+					class="origam-code__code"
+					:data-lang="lang"
+			></code></pre>
+		</div>
+
+		<footer v-if="$slots.footer" class="origam-code__footer">
+			<slot name="footer"/>
+		</footer>
+
+		<slot/>
+	</component>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, toRef, useSlots, watch } from "vue";
+import {
+  useBorder,
+  useBothColor,
+  useClipboard,
+  useCode,
+  useDimension,
+  useElevation,
+  useMargin,
+  usePadding,
+  useRounded
+} from "../../composables";
+import { CODE_DEFAULTS } from "../../consts";
+import { CODE_LANG } from "../../enums";
+import { parseHighlightLines } from "../../utils";
+const props = defineProps({
+  code: { type: String, required: false, default: void 0 },
+  lang: { type: null, required: false, default: CODE_LANG.PLAINTEXT },
+  lineNumbers: { type: Boolean, required: false, default: false },
+  highlightLines: { type: [Array, String, null], required: false, default: null },
+  copyable: { type: Boolean, required: false, default: true },
+  format: { type: Boolean, required: false, default: false },
+  wrap: { type: Boolean, required: false, default: false },
+  filename: { 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: "figure" },
+  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 },
+  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 },
+  elevation: { type: [Number, String], required: false },
+  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 },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+});
+const emit = defineEmits(["copy"]);
+const slots = useSlots();
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses } = useElevation(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { dimensionStyles } = useDimension(props);
+const { highlight } = useCode();
+function extractSlotText() {
+  const nodes = slots.default?.();
+  if (!nodes || nodes.length === 0) return "";
+  const parts = [];
+  const visit = (vnode) => {
+    if (vnode == null) return;
+    if (typeof vnode === "string") {
+      parts.push(vnode);
+      return;
+    }
+    if (typeof vnode === "number" || typeof vnode === "boolean") {
+      parts.push(String(vnode));
+      return;
+    }
+    if (Array.isArray(vnode)) {
+      vnode.forEach(visit);
+      return;
+    }
+    const obj = vnode;
+    if (obj && "children" in obj) visit(obj.children);
+  };
+  visit(nodes);
+  return parts.join("");
+}
+const sourceCode = computed(() => {
+  if (typeof props.code === "string") return props.code;
+  const fromSlot = extractSlotText();
+  return fromSlot.replace(/^\n+/, "").replace(/\n+$/, "");
+});
+let _formatWarned = false;
+const formattedCode = computed(() => {
+  const raw = sourceCode.value;
+  if (!props.format) return raw;
+  if (!_formatWarned) {
+    _formatWarned = true;
+    console.warn(
+      "[origam] OrigamCode: the `format` prop is a stub in v2.x. Prettier is intentionally not bundled at runtime; the current implementation normalises whitespace only. Full formatting is planned for v3."
+    );
+  }
+  return raw.replace(/\r\n/g, "\n").split("\n").map((l) => l.replace(/[ \t]+$/, "")).join("\n");
+});
+const codeRef = ref(null);
+const isHighlighting = ref(false);
+let _renderToken = 0;
+const highlightedLines = computed(() => {
+  const arr = parseHighlightLines(props.highlightLines);
+  return new Set(arr);
+});
+async function rebuild() {
+  const token = ++_renderToken;
+  isHighlighting.value = true;
+  try {
+    const html = await highlight(formattedCode.value, props.lang);
+    if (token !== _renderToken) return;
+    paintIntoDom(html);
+  } finally {
+    if (token === _renderToken) isHighlighting.value = false;
+  }
+}
+function paintIntoDom(rawHtml) {
+  const target = codeRef.value;
+  if (!target) return;
+  const innerMatch = rawHtml.match(/<code[^>]*>([\s\S]*?)<\/code>/);
+  const inner = innerMatch ? innerMatch[1] : rawHtml;
+  const lines = inner.split(/\n/).filter((l, idx, arr) => !(idx === arr.length - 1 && l.trim() === ""));
+  const highlightSet = highlightedLines.value;
+  const rows = lines.map((line, i) => {
+    const lineNo = i + 1;
+    const isHl = highlightSet.has(lineNo) ? " origam-code__row--highlighted" : "";
+    return `<span class="origam-code__row${isHl}" data-line="${lineNo}">${line || "&nbsp;"}</span>`;
+  }).join("\n");
+  target.innerHTML = rows;
+}
+watch(
+  [formattedCode, () => props.lang],
+  () => {
+    void rebuild();
+  },
+  { immediate: false }
+);
+watch(highlightedLines, () => {
+  const target = codeRef.value;
+  if (!target) return;
+  target.querySelectorAll(".origam-code__row").forEach((row) => {
+    const lineNo = Number(row.dataset.line);
+    row.classList.toggle("origam-code__row--highlighted", highlightedLines.value.has(lineNo));
+  });
+});
+onMounted(() => {
+  void rebuild();
+});
+const { copy, copied } = useClipboard({ feedbackDuration: CODE_DEFAULTS.copyFeedbackDurationMs });
+async function handleCopy() {
+  const text = formattedCode.value;
+  if (await copy(text)) emit("copy", text);
+}
+const copyButtonLabel = computed(() => copied.value ? "Copied!" : "Copy");
+const copyAriaLabel = computed(() => copied.value ? "Code copied to clipboard" : "Copy code to clipboard");
+const showHeader = computed(() => !!props.filename || !!slots.header);
+const headerTag = computed(() => props.tag === "figure" ? "figcaption" : "div");
+const codeClasses = computed(() => [
+  "origam-code",
+  `origam-code--lang-${props.lang}`,
+  {
+    "origam-code--line-numbers": props.lineNumbers,
+    "origam-code--wrap": props.wrap,
+    "origam-code--has-header": showHeader.value,
+    "origam-code--copyable": props.copyable,
+    "origam-code--max-height": props.maxHeight != null
+  },
+  borderClasses.value,
+  roundedClasses.value,
+  elevationClasses.value,
+  paddingClasses.value,
+  marginClasses.value,
+  colorClasses.value
+]);
+const codeStyles = computed(() => [
+  borderStyles.value,
+  roundedStyles.value,
+  paddingStyles.value,
+  marginStyles.value,
+  colorStyles.value,
+  dimensionStyles.value,
+  {}
+]);
+const preClasses = computed(() => ({
+  "origam-code__pre--line-numbers": props.lineNumbers,
+  "origam-code__pre--wrap": props.wrap
+}));
+const scrollerStyles = computed(() => {
+  if (props.maxHeight == null) return {};
+  const value = typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight;
+  return { "--origam-code---max-height": value, maxHeight: value };
+});
+defineExpose({ rebuild, copied, codeRef });
+</script>
+
+<style lang="scss">
+	.origam-code {
+		position: relative;
+		display: block;
+		background-color: var(--origam-code---background-color);
+		color: var(--origam-code---color);
+		border: var(--origam-code---border-width) solid var(--origam-code---border-color);
+		border-radius: var(--origam-code---border-radius);
+		padding: var(--origam-code---padding-block) var(--origam-code---padding-inline);
+		font-family: var(--origam-code---font-family);
+		font-size: var(--origam-code---font-size);
+		line-height: var(--origam-code---line-height);
+		overflow: hidden;
+
+	}
+
+	.origam-code__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--origam-code__header---gap);
+		padding: var(--origam-code__header---padding-block) var(--origam-code__header---padding-inline);
+		background-color: var(--origam-code__header---background-color);
+		color: var(--origam-code__header---color);
+		border-bottom: var(--origam-code---border-width) solid var(--origam-code---border-color);
+		margin: calc(-1 * var(--origam-code---padding-block)) calc(-1 * var(--origam-code---padding-inline));
+		margin-bottom: var(--origam-code---padding-block);
+	}
+
+	.origam-code__filename {
+		font-weight: var(--origam-code__filename---font-weight);
+		font-size: var(--origam-code__filename---font-size);
+		color: var(--origam-code__filename---color);
+	}
+
+	.origam-code__lang-badge {
+		font-size: var(--origam-code__filename---font-size);
+		color: var(--origam-code__filename---color);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.origam-code__copy {
+		all: unset;
+		box-sizing: border-box;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--origam-code__copy---gap);
+		padding: var(--origam-code__copy---padding-block) var(--origam-code__copy---padding-inline);
+		border-radius: var(--origam-code__copy---border-radius);
+		font-size: var(--origam-code__copy---font-size);
+		color: var(--origam-code__copy---color);
+		background-color: var(--origam-code__copy---background-color);
+		transition: color 120ms ease, background-color 120ms ease;
+	}
+
+	.origam-code__copy:hover {
+		color: var(--origam-code__copy---color-hover);
+		background-color: var(--origam-code__copy---background-color-hover);
+	}
+
+	.origam-code__copy--floating {
+		position: absolute;
+		top: var(--origam-code__copy---offset);
+		right: var(--origam-code__copy---offset);
+		z-index: 1;
+	}
+
+	.origam-code__scroller {
+		overflow: auto;
+	}
+
+	.origam-code--max-height .origam-code__scroller {
+		max-height: var(--origam-code---max-height);
+	}
+
+	.origam-code__pre {
+		margin: 0;
+		padding: 0;
+		background: transparent;
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+		counter-reset: line;
+	}
+
+	.origam-code__code {
+		display: block;
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+	}
+
+	.origam-code__row {
+		display: block;
+		padding-inline: var(--origam-code__row---padding-inline);
+		white-space: pre;
+		min-height: var(--origam-code---line-height);
+	}
+
+	.origam-code--wrap .origam-code__row {
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	.origam-code--line-numbers .origam-code__row {
+		counter-increment: line;
+		position: relative;
+		padding-inline-start: var(--origam-code---line-number-width);
+	}
+
+	.origam-code--line-numbers .origam-code__row::before {
+		content: counter(line);
+		position: absolute;
+		left: 0;
+		top: 0;
+		box-sizing: border-box;
+		width: var(--origam-code---line-number-width);
+		padding-right: var(--origam-code---line-number-padding-right);
+		text-align: right;
+		color: var(--origam-code---line-number-color);
+		user-select: none;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.origam-code__row--highlighted {
+		background-color: var(--origam-code__line-highlight---background-color);
+		box-shadow: inset 3px 0 0 var(--origam-code__line-highlight---accent-color);
+	}
+
+	.origam-code__footer {
+		padding: var(--origam-code__header---padding-block) var(--origam-code__header---padding-inline);
+		border-top: var(--origam-code---border-width) solid var(--origam-code---border-color);
+		margin: var(--origam-code---padding-block) calc(-1 * var(--origam-code---padding-inline)) calc(-1 * var(--origam-code---padding-block));
+		color: var(--origam-code__header---color);
+	}
+
+	.origam-code__scroller::-webkit-scrollbar {
+		height: 8px;
+		width: 8px;
+	}
+
+	.origam-code__scroller::-webkit-scrollbar-thumb {
+		background-color: var(--origam-code__scrollbar---color);
+		border-radius: 4px;
+	}
+</style>
+
+<style lang="scss">
+	/* Dual-theme shiki — UNSCOPED on purpose. shiki injects token spans
+	 * via v-html, so they don't carry the parent SFC's data-v scoping
+	 * attribute. A scoped selector (even :deep) doesn't reliably match
+	 * the deeply-nested untagged spans. An unscoped block keeps the
+	 * selector simple and reliable. We scope by the dedicated
+	 * `.origam-code__code` class instead — collisions are impossible.
+	 *
+	 * shiki output per token: `<span style="--shiki-light:#X;--shiki-dark:#Y">`.
+	 * We resolve --shiki-light by default, --shiki-dark under data-theme="dark"
+	 * (or prefers-color-scheme: dark when no data-theme is set). */
+	.origam-code__code span {
+		color: var(--shiki-light);
+	}
+
+	.origam-code .shiki {
+		background-color: var(--shiki-light-bg, transparent);
+	}
+
+	html[data-theme="dark"] .origam-code__code span {
+		color: var(--shiki-dark);
+	}
+
+	html[data-theme="dark"] .origam-code .shiki {
+		background-color: var(--shiki-dark-bg, transparent);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		html:not([data-theme="light"]) .origam-code__code span {
+			color: var(--shiki-dark);
+		}
+
+		html:not([data-theme="light"]) .origam-code .shiki {
+			background-color: var(--shiki-dark-bg, transparent);
+		}
+	}
+</style>

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

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

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

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

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

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

package/dist/src/components/ColorPicker/OrigamColorPicker.vue

@@ -141,8 +141,6 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false },
   landscape: { type: Boolean, required: false },
   hideHeader: { type: Boolean, required: false },
-  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 },
@@ -151,6 +149,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
   tag: { type: String, required: false },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -166,9 +165,11 @@ 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 },
   colorHsv: { type: [Object, null], required: false },
   dotSize: { type: [String, Number], required: false, default: 10 },
+  ariaLabel: { type: String, required: false },
   hideAlpha: { type: Boolean, required: false },
   mode: { type: null, required: false, default: COLOR_MODES_NAMES.RGBA },
   modes: { type: Array, required: false, default: () => [COLOR_MODES_NAMES.RGB, COLOR_MODES_NAMES.RGBA, COLOR_MODES_NAMES.HSL, COLOR_MODES_NAMES.HSLA, COLOR_MODES_NAMES.HEX, COLOR_MODES_NAMES.HEXA] },

package/dist/src/components/ColorPicker/OrigamColorPickerCanvas.vue

@@ -1,8 +1,13 @@
 <template>
 	<div
 			ref="resizeRef"
+			:aria-label="canvasAriaLabel"
+			:aria-valuetext="canvasAriaValueText"
 			:class="colorPickerCanvasClasses"
 			:style="colorPickerCanvasStyles"
+			role="application"
+			tabindex="0"
+			@keydown="handleKeyDown"
 			@mousedown="handleMouseDown"
 			@touchstart.passive="handleMouseDown"
 	>
@@ -10,6 +15,7 @@
 				ref="canvasRef"
 				:height="canvasHeight"
 				:width="canvasWidth"
+				aria-hidden="true"
 		/>
 		<template v-if="colorHsv">
 			<div
@@ -22,13 +28,15 @@
 </template>
 
 <script setup>
-import { useProps, useResizeObserver, useStyle } from "../../composables";
+import { useLocale, useProps, useResizeObserver, useStyle } from "../../composables";
+import { KEYBOARD_VALUES } from "../../enums";
 import { clamp, convertToUnit, getEventCoordinates, int } from "../../utils";
 import { computed, onMounted, ref, shallowRef, StyleValue, watch } from "vue";
 const props = defineProps({
   colorHsv: { type: [Object, null], required: false },
   disabled: { type: Boolean, required: false },
   dotSize: { type: [String, Number], required: false },
+  ariaLabel: { 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 },
@@ -41,6 +49,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:colorHsv"]);
 const { filterProps } = useProps(props);
+const { t } = useLocale();
 const isInteracting = shallowRef(false);
 const canvasRef = ref();
 const { resizeRef } = useResizeObserver((entries) => {
@@ -118,6 +127,65 @@ const updateCanvas = () => {
   ctx.fillStyle = valueGradient;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 };
+const canvasAriaLabel = computed(() => {
+  return props.ariaLabel ?? t("origam.colorPicker.canvas.ariaLabel");
+});
+const canvasAriaValueText = computed(() => {
+  const s = Math.round((props.colorHsv?.s ?? 0) * 100);
+  const v = Math.round((props.colorHsv?.v ?? 0) * 100);
+  return t("origam.colorPicker.canvas.value", s, v);
+});
+const STEP_SMALL = 0.01;
+const STEP_LARGE = 0.05;
+const handleKeyDown = (e) => {
+  if (props.disabled) return;
+  const step = e.shiftKey ? STEP_LARGE : STEP_SMALL;
+  const hsv = props.colorHsv;
+  if (!hsv) return;
+  let { h, s, v, a } = hsv;
+  let handled = false;
+  switch (e.key) {
+    case KEYBOARD_VALUES.LEFT:
+      s = clamp(s - step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.RIGHT:
+      s = clamp(s + step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.UP:
+      v = clamp(v + step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.DOWN:
+      v = clamp(v - step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.HOME:
+      s = 0;
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.END:
+      s = 1;
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.PAGEUP:
+      v = 1;
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.PAGEDOWN:
+      v = 0;
+      handled = true;
+      break;
+  }
+  if (!handled) return;
+  e.preventDefault();
+  emits("update:colorHsv", { h, s, v, a });
+  _dotPosition.value = {
+    x: s * canvasWidth.value,
+    y: (1 - v) * canvasHeight.value
+  };
+};
 const handleMouseDown = (e) => {
   if (e.type === "mousedown") {
     e.preventDefault();
@@ -203,6 +271,12 @@ defineExpose({
 		overflow: hidden;
 		contain: content;
 		touch-action: none;
+		outline: none;
+
+		&:focus-visible {
+			outline: 2px solid var(--origam-color__border---focus);
+			outline-offset: 2px;
+		}
 
 		&__dot {
 			position: absolute;

package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue

@@ -143,7 +143,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 },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
@@ -153,6 +153,7 @@ const props = defineProps({
   role: { type: String, required: false },
   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 },
@@ -170,7 +171,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 },