origam 2.3.0 → 2.6.1

package/dist/src/components/Sheet/OrigamSheet.vue

@@ -12,10 +12,12 @@
 				v-if="showHandle"
 				ref="handleEl"
 				class="origam-sheet__handle"
-				role="separator"
-				aria-orientation="horizontal"
+				role="button"
+				tabindex="0"
 				aria-label="Drag handle"
 				data-cy="sheet-bottom-handle"
+				@keydown.enter.prevent="onActive"
+				@keydown.space.prevent="onActive"
 		>
 			<span class="origam-sheet__handle-pill"/>
 		</div>
@@ -24,7 +26,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, toRef, watch } from "vue";
 import {
   useActive,
@@ -64,7 +66,8 @@ 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, 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 },
@@ -98,7 +101,10 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:snap", "update:open"]);
 const { filterProps } = useProps(props);
-const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { colorClasses, colorStyles } = useBothColor(
+  toRef(props, "bgColor"),
+  toRef(props, "color")
+);
 const { isHover, hoverState, hoverClasses, onMouseenter, onMouseleave } = useHover(props);
 const { isActive, activeState, activeClasses, onActive } = useActive(props);
 const {
@@ -261,6 +267,8 @@ defineExpose({
 		margin-inline-end: var(--origam-sheet---margin-inline-end);
 
 		background: var(--origam-sheet---background);
+		backdrop-filter: var(--origam-sheet---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-sheet---backdrop-filter, none);
 		box-shadow: var(--origam-sheet---box-shadow);
 		color: var(--origam-sheet---color);
 
@@ -269,7 +277,7 @@ defineExpose({
 			--origam-sheet---border-right-width: var(--origam-border__width---thin, 1px);
 			--origam-sheet---border-bottom-width: var(--origam-border__width---thin, 1px);
 			--origam-sheet---border-left-width: var(--origam-border__width---thin, 1px);
-			box-shadow: var(--origam-sheet--border---box-shadow);
+			box-shadow: var(--origam-sheet--border---box-shadow, var(--origam-sheet---box-shadow));
 		}
 
 		&--rounded {

package/dist/src/components/Skeleton/OrigamSkeleton.vue

@@ -45,7 +45,7 @@
 	/>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   useBothColor,
   useProps,
@@ -64,8 +64,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 },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
@@ -115,9 +115,7 @@ const skeletonContainerClasses = computed(() => [
   `origam-skeleton-wrapper--${props.variant}`,
   props.class
 ]);
-const skeletonContainerStyles = computed(() => [
-  props.style
-]);
+const skeletonContainerStyles = computed(() => [props.style]);
 const skeletonClasses = computed(() => [
   "origam-skeleton",
   `origam-skeleton--${props.variant}`,
@@ -213,6 +211,13 @@ defineExpose({
 		}
 	}
 
+	@media (prefers-reduced-motion: reduce) {
+		.origam-skeleton--pulse {
+			animation: none;
+			background-image: none;
+		}
+	}
+
 	.origam-skeleton-wrapper {
 		&--list-item {
 			display: flex;

package/dist/src/components/Slide/OrigamSlideGroup.vue

@@ -56,7 +56,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, shallowRef, StyleValue, watch } from "vue";
 import { OrigamFade, OrigamIcon } from "../../components";
 import {