origam 2.3.0 → 2.5.0

package/dist/src/components/InlineEdit/OrigamInlineEdit.vue

@@ -0,0 +1,477 @@
+<template>
+	<component
+			:is="tag"
+			class="origam-inline-edit"
+			:class="rootClasses"
+			:style="rootStyles"
+			:aria-busy="isPending ? 'true' : 'false'"
+			data-cy="origam-inline-edit"
+	>
+		<template v-if="!isEditing">
+			<slot
+					name="display"
+					:value="displayValue"
+					:edit="handleEnterEdit"
+					:is-empty="isEmpty"
+					:placeholder="resolvedPlaceholder"
+					:disabled="disabled"
+			>
+				<button
+						type="button"
+						class="origam-inline-edit__display"
+						:class="{
+							'origam-inline-edit__display--empty': isEmpty,
+							'origam-inline-edit__display--disabled': disabled
+						}"
+						:disabled="disabled"
+						:aria-label="displayAriaLabel"
+						data-cy="origam-inline-edit-display"
+						@click="handleEnterEdit"
+				>
+					{{ isEmpty ? resolvedPlaceholder : displayValue }}
+				</button>
+			</slot>
+
+			<div
+					v-if="showActions"
+					class="origam-inline-edit__actions"
+					data-cy="origam-inline-edit-actions-display"
+			>
+				<origam-btn
+						:icon="MDI_ICONS.PENCIL_OUTLINE"
+						class="origam-inline-edit__action-btn origam-inline-edit__action-btn--edit"
+						:disabled="disabled"
+						:aria-label="editActionLabel"
+						:data-cy="`origam-inline-edit-action-${INLINE_EDIT_ACTION.EDIT}`"
+						size="x-small"
+						variant="text"
+						@click="handleEnterEdit"
+				/>
+			</div>
+		</template>
+
+		<template v-else>
+			<slot
+					name="edit"
+					:value="draft"
+					:set-value="setValue"
+					:confirm="handleConfirm"
+					:cancel="handleCancel"
+					:error="error"
+					:is-pending="isPending"
+			>
+				<origam-textarea-field
+						v-if="multiline"
+						ref="inputRef"
+						:model-value="draft"
+						:placeholder="resolvedPlaceholder"
+						:disabled="disabled || isPending"
+						:aria-invalid="error !== null"
+						:aria-describedby="error !== null ? errorId : undefined"
+						class="origam-inline-edit__field"
+						data-cy="origam-inline-edit-input"
+            hide-details
+						@update:model-value="handleInput"
+						@keydown="handleKeyDown"
+						@blur="handleBlur"
+				>
+					<template
+							v-if="showActions"
+							#appendInner
+					>
+						<slot
+								name="actions"
+								:confirm="handleConfirm"
+								:cancel="handleCancel"
+								:is-pending="isPending"
+						>
+							<origam-btn
+									:icon="MDI_ICONS.CHECK"
+									class="origam-inline-edit__action-btn origam-inline-edit__action-btn--confirm"
+									:disabled="disabled || isPending"
+									:aria-label="confirmActionLabel"
+									:data-cy="`origam-inline-edit-action-${INLINE_EDIT_ACTION.CONFIRM}`"
+									size="x-small"
+									variant="text"
+									color="success"
+									@mousedown.prevent
+									@click="handleConfirm"
+							/>
+							<origam-btn
+									:icon="MDI_ICONS.CLOSE"
+									class="origam-inline-edit__action-btn origam-inline-edit__action-btn--cancel"
+									:disabled="disabled"
+									:aria-label="cancelActionLabel"
+									:data-cy="`origam-inline-edit-action-${INLINE_EDIT_ACTION.CANCEL}`"
+									size="x-small"
+									variant="text"
+									color="danger"
+									@mousedown.prevent
+									@click="handleCancel"
+							/>
+						</slot>
+					</template>
+				</origam-textarea-field>
+
+				<origam-text-field
+						v-else
+						ref="inputRef"
+						:model-value="draft"
+						:type="inputType"
+						:placeholder="resolvedPlaceholder"
+						:disabled="disabled || isPending"
+						:aria-invalid="error !== null"
+						:aria-describedby="error !== null ? errorId : undefined"
+						class="origam-inline-edit__field"
+						data-cy="origam-inline-edit-input"
+						hide-details
+						@update:model-value="handleInput"
+						@keydown="handleKeyDown"
+						@blur="handleBlur"
+				>
+					<template
+							v-if="showActions"
+							#appendInner
+					>
+						<slot
+								name="actions"
+								:confirm="handleConfirm"
+								:cancel="handleCancel"
+								:is-pending="isPending"
+						>
+							<origam-btn
+									:icon="MDI_ICONS.CHECK"
+									class="origam-inline-edit__action-btn origam-inline-edit__action-btn--confirm"
+									:disabled="disabled || isPending"
+									:aria-label="confirmActionLabel"
+									:data-cy="`origam-inline-edit-action-${INLINE_EDIT_ACTION.CONFIRM}`"
+									size="x-small"
+									variant="text"
+									color="success"
+									@mousedown.prevent
+									@click="handleConfirm"
+							/>
+							<origam-btn
+									:icon="MDI_ICONS.CLOSE"
+									class="origam-inline-edit__action-btn origam-inline-edit__action-btn--cancel"
+									:disabled="disabled"
+									:aria-label="cancelActionLabel"
+									:data-cy="`origam-inline-edit-action-${INLINE_EDIT_ACTION.CANCEL}`"
+									size="x-small"
+									variant="text"
+									color="danger"
+									@mousedown.prevent
+									@click="handleCancel"
+							/>
+						</slot>
+					</template>
+				</origam-text-field>
+
+				<span
+						v-if="error !== null"
+						:id="errorId"
+						class="origam-inline-edit__error"
+						role="alert"
+						data-cy="origam-inline-edit-error"
+				>{{ error }}</span>
+			</slot>
+
+			<slot
+					v-if="!showActions"
+					name="actions"
+					:confirm="handleConfirm"
+					:cancel="handleCancel"
+					:is-pending="isPending"
+			/>
+		</template>
+	</component>
+</template>
+
+<script setup>
+import {
+  computed,
+  nextTick,
+  ref,
+  useId,
+  watch
+} from "vue";
+import { OrigamBtn, OrigamTextField, OrigamTextareaField } from "../../components";
+import { useInlineEdit } from "../../composables";
+import { INLINE_EDIT_ACTION, MDI_ICONS } from "../../enums";
+const props = defineProps({
+  modelValue: { type: [String, Number], required: true },
+  placeholder: { type: String, required: false, default: "Click to edit" },
+  validate: { type: Function, required: false, default: void 0 },
+  autoFocus: { type: Boolean, required: false, default: true },
+  selectOnFocus: { type: Boolean, required: false, default: true },
+  confirmOnBlur: { type: Boolean, required: false, default: true },
+  confirmOnEnter: { type: Boolean, required: false, default: true },
+  cancelOnEscape: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false, default: false },
+  multiline: { type: Boolean, required: false, default: false },
+  trim: { type: Boolean, required: false, default: true },
+  inputType: { type: String, required: false, default: "text" },
+  loadingOnConfirm: { type: Boolean, required: false, default: false },
+  showActions: { type: Boolean, required: false, default: 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: "span" }
+});
+const emit = defineEmits(["update:modelValue", "edit", "cancel", "confirm", "validate-error"]);
+const modelRef = computed(() => props.modelValue);
+const {
+  isEditing,
+  draft,
+  error,
+  isPending,
+  edit,
+  confirm,
+  cancel,
+  setValue
+} = useInlineEdit(modelRef, {
+  validate: props.validate,
+  trim: props.trim,
+  onConfirm: (value) => {
+    const normalised = typeof props.modelValue === "number" ? Number(value) : value;
+    const out = typeof normalised === "number" && Number.isNaN(normalised) ? value : normalised;
+    emit("confirm", out);
+    emit("update:modelValue", out);
+  },
+  onCancel: () => emit("cancel"),
+  onError: (message) => emit("validate-error", message)
+});
+const inputRef = ref(null);
+const errorId = `origam-inline-edit-error-${useId()}`;
+const displayValue = computed(() => {
+  const v = props.modelValue;
+  if (v === null || v === void 0) return "";
+  return String(v);
+});
+const isEmpty = computed(() => displayValue.value.trim().length === 0);
+const resolvedPlaceholder = computed(() => props.placeholder ?? "Click to edit");
+const displayAriaLabel = computed(() => {
+  const label = isEmpty.value ? resolvedPlaceholder.value : displayValue.value;
+  return `Edit ${label}`;
+});
+const editActionLabel = computed(() => `Edit ${displayValue.value || resolvedPlaceholder.value}`);
+const confirmActionLabel = "Confirm";
+const cancelActionLabel = "Cancel";
+const handleEnterEdit = () => {
+  if (props.disabled) return;
+  edit();
+  emit("edit");
+};
+const handleConfirm = () => {
+  void confirm();
+};
+const handleCancel = () => {
+  cancel();
+};
+const handleInput = (value) => {
+  setValue(value ?? "");
+};
+const handleKeyDown = (event) => {
+  if (event.key === "Enter" && props.confirmOnEnter && !props.multiline) {
+    event.preventDefault();
+    handleConfirm();
+    return;
+  }
+  if (event.key === "Enter" && props.confirmOnEnter && props.multiline && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault();
+    handleConfirm();
+    return;
+  }
+  if (event.key === "Escape" && props.cancelOnEscape) {
+    event.preventDefault();
+    handleCancel();
+  }
+};
+const handleBlur = () => {
+  if (!props.confirmOnBlur) return;
+  if (isPending.value) return;
+  handleConfirm();
+};
+watch(isEditing, async (next) => {
+  if (!next) return;
+  if (!props.autoFocus) return;
+  await nextTick();
+  const el = inputRef.value;
+  if (!el) return;
+  if (typeof el.focus === "function") el.focus();
+  if (props.selectOnFocus && typeof el.select === "function") {
+    el.select();
+  }
+});
+const rootClasses = computed(() => [
+  {
+    "origam-inline-edit--editing": isEditing.value,
+    "origam-inline-edit--disabled": props.disabled,
+    "origam-inline-edit--pending": isPending.value,
+    "origam-inline-edit--loading-on-confirm": props.loadingOnConfirm && isPending.value,
+    "origam-inline-edit--multiline": props.multiline,
+    "origam-inline-edit--has-error": error.value !== null,
+    "origam-inline-edit--show-actions": props.showActions
+  },
+  props.class
+]);
+const rootStyles = computed(() => [props.style]);
+defineExpose({
+  edit: handleEnterEdit,
+  confirm: handleConfirm,
+  cancel: handleCancel,
+  isEditing,
+  draft,
+  error,
+  isPending
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-inline-edit {
+		position: relative;
+		display: inline-flex;
+		flex-direction: row;
+		align-items: flex-start;
+		gap: var(--origam-inline-edit---actions-gap, var(--origam-inline-edit__actions---gap, 4px));
+		max-width: 100%;
+		transition: opacity var(--origam-inline-edit---transition-duration, 160ms) ease;
+	}
+
+	.origam-inline-edit--disabled {
+		opacity: 0.65;
+		pointer-events: none;
+	}
+
+	.origam-inline-edit--loading-on-confirm {
+		opacity: 0.75;
+		pointer-events: none;
+	}
+
+	.origam-inline-edit__display {
+		all: unset;
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		min-height: var(--origam-inline-edit__display---min-height, 24px);
+		padding: var(--origam-inline-edit__display---padding-block, 2px)
+		         var(--origam-inline-edit__display---padding-inline, 6px);
+		border-radius: var(--origam-inline-edit__display---border-radius, 4px);
+		font: inherit;
+		color: var(--origam-color__text---primary);
+		cursor: text;
+		transition: background-color var(--origam-inline-edit---transition-duration, 160ms) ease,
+		            color var(--origam-inline-edit---transition-duration, 160ms) ease;
+	}
+
+	.origam-inline-edit__display:hover:not(:disabled) {
+		background-color: var(--origam-inline-edit__display---hover-bg-color);
+	}
+
+	.origam-inline-edit__display:focus-visible {
+		outline: 2px solid var(--origam-color__action--primary---bg);
+		outline-offset: 2px;
+	}
+
+	.origam-inline-edit__display--empty {
+		color: var(--origam-inline-edit__display---color-empty);
+		font-style: italic;
+	}
+
+	.origam-inline-edit__display--disabled {
+		cursor: not-allowed;
+	}
+
+	.origam-inline-edit__field {
+		flex: 1;
+		min-width: var(--origam-inline-edit__field---min-width, 180px);
+	}
+
+	.origam-inline-edit__error {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		right: 0;
+		z-index: 2;
+		padding: var(--origam-inline-edit__error---padding-block, 4px)
+		         var(--origam-inline-edit__error---padding-inline, 8px);
+		border-radius: var(--origam-inline-edit__error---border-radius, 4px);
+		background-color: var(
+			--origam-inline-edit__error---background-color,
+			color-mix(in srgb, var(--origam-color__feedback--danger---bg-subtle, #ffe5e7) 75%, transparent)
+		);
+		color: var(--origam-inline-edit__error---color, var(--origam-color__feedback--danger---fgSubtle, #b91c1c));
+		font-size: var(--origam-inline-edit__error---font-size, 0.75rem);
+		font-weight: var(--origam-inline-edit__error---font-weight, 500);
+		line-height: 1.3;
+		pointer-events: none;
+	}
+
+	.origam-inline-edit__actions {
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		gap: var(--origam-inline-edit__actions---gap, 2px);
+	}
+
+	.origam-inline-edit__action-btn {
+		all: unset;
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--origam-inline-edit__action-btn---size, 28px);
+		height: var(--origam-inline-edit__action-btn---size, 28px);
+		border-radius: var(--origam-inline-edit__action-btn---border-radius, 4px);
+		cursor: pointer;
+		font-size: var(--origam-inline-edit__action-btn---font-size, 0.875rem);
+		font-weight: 600;
+		transition: background-color var(--origam-inline-edit---transition-duration, 160ms) ease,
+		            color var(--origam-inline-edit---transition-duration, 160ms) ease,
+		            opacity var(--origam-inline-edit---transition-duration, 160ms) ease;
+	}
+
+	.origam-inline-edit__action-btn:focus-visible {
+		outline: 2px solid var(--origam-color__action--primary---bg);
+		outline-offset: 2px;
+	}
+
+	.origam-inline-edit__action-btn:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	.origam-inline-edit__action-btn--edit {
+		color: var(--origam-color__text---secondary, #555);
+	}
+
+	.origam-inline-edit__action-btn--edit:hover:not(:disabled) {
+		background-color: var(--origam-color__surface---raised, #f5f5f5);
+		color: var(--origam-color__text---primary);
+	}
+
+	.origam-inline-edit__action-btn--confirm {
+		background-color: var(--origam-color__feedback--success---bgSubtle, #e6f6ec);
+		color: var(--origam-color__feedback--success---fgSubtle, #16a34a);
+	}
+
+	.origam-inline-edit__action-btn--confirm:hover:not(:disabled) {
+		background-color: var(--origam-color__feedback--success---bg, #16a34a);
+		color: var(--origam-color__feedback--success---fg, #fff);
+	}
+
+	.origam-inline-edit__action-btn--cancel {
+		background-color: var(--origam-color__feedback--danger---bgSubtle, #fee);
+		color: var(--origam-color__feedback--danger---fgSubtle, #b00);
+	}
+
+	.origam-inline-edit__action-btn--cancel:hover:not(:disabled) {
+		background-color: var(--origam-color__feedback--danger---bg, #dc2626);
+		color: var(--origam-color__feedback--danger---fg, #fff);
+	}
+
+	.origam-inline-edit__action-icon {
+		line-height: 1;
+	}
+</style>

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

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

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

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

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

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

package/dist/src/components/Input/OrigamInput.vue

@@ -138,8 +138,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/Kbd/OrigamKbd.vue

@@ -43,8 +43,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 },
   size: { type: null, required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Label/OrigamLabel.vue

@@ -61,8 +61,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 },
   tag: { type: String, required: false, default: "label" }
 });
 const props = useDefaults(_props);

package/dist/src/components/Layout/OrigamLayout.vue

@@ -15,10 +15,17 @@
 </template>
 
 <script setup>
-import { computed, StyleValue } from "vue";
+import { computed, StyleValue, toRef } from "vue";
 import {
+  useBorder,
+  useBothColor,
   useCreateLayout,
+  useDimension,
+  useElevation,
+  useMargin,
+  usePadding,
   useProps,
+  useRounded,
   useStyle
 } from "../../composables";
 const props = defineProps({
@@ -26,15 +33,77 @@ const props = defineProps({
   fullHeight: { 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 }
+  style: { type: [String, Array, 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 },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [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 },
+  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 },
+  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 },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  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 },
+  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 }
 });
 const { filterProps } = useProps(props);
 const { layoutClasses, layoutStyles, layoutRef: origamLayoutRef, getLayoutItem, items, layoutId } = useCreateLayout(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses } = useElevation(props);
+const { dimensionStyles } = useDimension(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
 const layStyles = computed(() => {
-  return [layoutStyles.value, props.style];
+  return [
+    layoutStyles.value,
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
+    props.style
+  ];
 });
 const layClasses = computed(() => {
-  return [layoutClasses.value, props.class];
+  return [
+    layoutClasses.value,
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
+    props.class
+  ];
 });
 const { id, css, load, isLoaded, unload } = useStyle(layStyles);
 defineExpose({

package/dist/src/components/Lazy/OrigamLazy.vue

@@ -2,6 +2,7 @@
 	<component
 			:is="tag"
 			v-intersect="intersect"
+			:aria-busy="!isActive || undefined"
 			:class="lazyClasses"
 			:style="lazyStyles"
 	>

package/dist/src/components/List/OrigamList.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="listClasses"
 			:style="listStyles"
 			:tabindex="tabIndex"
@@ -150,8 +151,8 @@ const props = defineProps({
   itemProps: { type: null, required: false, default: "props" },
   returnObject: { type: Boolean, required: false },
   valueComparator: { type: null, required: false, default: deepEqual },
-  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 },
   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/List/OrigamListGroup.vue

@@ -65,8 +65,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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },