origam 2.5.0 → 2.6.2

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

@@ -83,8 +83,8 @@
 				<template #default>
 					<origam-list
 							v-if="hasList"
-							ref="origamListRef"
 							:id="listboxId"
+							ref="origamListRef"
 							:select-strategy="multiple ? SELECT_STRATEGY.INDEPENDENT : SELECT_STRATEGY.SINGLE_INDEPENDENT"
 							:selected="selectedValues"
 							:tabindex="-1"
@@ -149,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>
@@ -260,7 +260,7 @@
 	</origam-text-field>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   getCurrentInstance,
@@ -359,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 },
@@ -400,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 },
@@ -438,8 +445,8 @@ 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 }
 });
@@ -557,6 +564,8 @@ const menuListItemProps = (item, itemRef, index) => {
 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
@@ -612,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;
@@ -674,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) {

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 },
@@ -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;
@@ -382,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

@@ -29,7 +29,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, onScopeDispose, provide, StyleValue } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {
@@ -42,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 },

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

@@ -16,6 +16,8 @@
 				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,
@@ -65,6 +67,7 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { 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 },
@@ -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,
@@ -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}`,

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 {

package/dist/src/components/SliderField/OrigamSliderField.vue

@@ -418,7 +418,7 @@
 	</section>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useSlots, WritableComputedRef } from "vue";
 import { OrigamInput, OrigamLabel, OrigamSliderFieldTrack } from "../../components";
 import {
@@ -516,6 +516,11 @@ 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 },
   ripple: { type: [Boolean, Object], required: false }
 });
 const emits = defineEmits(["start", "end", "update:modelValue", "update:focused"]);
@@ -704,11 +709,7 @@ const handleSingleInput = (e) => {
   const v = roundValue(target.value);
   model.value = v;
 };
-const handleSingleChange = (e) => {
-  const target = e.target;
-  const v = roundValue(target.value);
-  model.value = v;
-};
+const handleSingleChange = handleSingleInput;
 const handleRangeStartInput = (e) => {
   const target = e.target;
   lastInteracted.value = "start";

package/dist/src/components/SliderField/OrigamSliderFieldTrack.vue

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

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -74,7 +74,7 @@
   </origam-overlay>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   inject,
@@ -83,7 +83,6 @@ import {
   ref,
   shallowRef,
   StyleValue,
-  toRef,
   useSlots,
   watch,
   watchEffect
@@ -202,7 +201,7 @@ const slots = useSlots();
 const isActive = useVModel(props, "modelValue");
 const { positionClasses } = usePosition(props);
 const { scopeId } = useScopeId();
-const { icon, statusClasses } = useStatus(props);
+const { icon, statusClasses, statusIntent } = useStatus(props);
 const origamOverlayRef = ref();
 const isHovering = shallowRef(false);
 const startY = shallowRef(0);
@@ -253,7 +252,9 @@ const snackbarIntent = computed(() => {
   if (!props.status) return void 0;
   return props.status;
 });
-const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const statusBgColor = computed(() => statusIntent.value ?? props.bgColor);
+const statusColor = computed(() => statusIntent.value ? void 0 : props.color);
+const { colorClasses, colorStyles } = useBothColor(statusBgColor, statusColor);
 const {
   roundedClasses,
   roundedStyles,

package/dist/src/components/Snackbar/OrigamSnackbarGroup.vue

@@ -35,7 +35,7 @@
   </teleport>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue } from "vue";
 import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
 import { useProps, useStyle } from "../../composables";

package/dist/src/components/Snackbar/OrigamSnackbarItem.vue

@@ -1,10 +1,12 @@
 <template>
   <div
+    v-contrast
     :aria-atomic="true"
     :aria-live="resolvedAriaLive"
     :class="itemClasses"
     :data-cy="dataCy"
     :role="resolvedRole"
+    :style="typographyStyles"
   >
     <div class="origam-snackbar-item__content">
       <div
@@ -43,39 +45,37 @@
       class="origam-snackbar-item__actions"
     >
       <slot name="actions">
-        <button
+        <origam-btn
           v-for="(action, index) in actions"
           :key="index"
-          :class="actionClasses(action)"
+          :color="action.intent ?? 'primary'"
           :data-cy="`${dataCy}-action-${index}`"
-          type="button"
+          :text="action.label"
+          class="origam-snackbar-item__action"
+          variant="text"
           @click="handleActionClick(action)"
-        >
-          {{ action.label }}
-        </button>
+        />
       </slot>
     </div>
 
-    <button
+    <origam-btn
       v-if="dismissible !== false"
       :aria-label="dismissLabel"
       :data-cy="`${dataCy}-dismiss`"
+      :icon="MDI_ICONS.CLOSE"
       class="origam-snackbar-item__dismiss"
-      type="button"
+      size="x-small"
+      variant="text"
       @click="emit('dismiss')"
-    >
-      <origam-icon
-        :icon="MDI_ICONS.CLOSE"
-        :size="18"
-      />
-    </button>
+    />
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, useSlots } from "vue";
-import { OrigamIcon } from "../../components";
-import { useProps } from "../../composables";
+import { OrigamBtn, OrigamIcon } from "../../components";
+import { useLocale, useProps, useTypography } from "../../composables";
+import { vContrast } from "../../directives";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
   intent: { type: String, required: false, default: "info" },
@@ -84,15 +84,23 @@ const props = defineProps({
   icon: { type: [String, Array, Boolean], required: false, skipCheck: true },
   actions: { type: Array, required: false },
   dismissible: { type: Boolean, required: false, default: true },
-  dismissLabel: { type: String, required: false, default: "Dismiss notification" },
+  dismissLabel: { type: String, required: false, default: void 0 },
   role: { type: String, required: false },
   ariaLive: { type: String, required: false },
   dataCy: { 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 }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  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 }
 });
+const { t } = useLocale();
+const dismissLabel = computed(() => props.dismissLabel ?? t("origam.snackbar.dismiss", "Dismiss notification"));
 const { filterProps } = useProps(props);
+const { typographyStyles } = useTypography(props, "snackbar-item");
 const slots = useSlots();
 const emit = defineEmits(["dismiss", "action"]);
 const INTENT_ICONS = {
@@ -124,13 +132,6 @@ const hasMessage = computed(() => {
 const hasActions = computed(() => {
   return Array.isArray(props.actions) && props.actions.length > 0 || !!slots["actions"];
 });
-const actionClasses = (action) => {
-  const intent = action.intent ?? "primary";
-  return [
-    "origam-snackbar-item__action",
-    `origam-snackbar-item__action--intent-${intent}`
-  ];
-};
 const handleActionClick = (action) => {
   emit("action", action);
 };

package/dist/src/components/Stepper/OrigamStepper.vue

@@ -1,8 +1,9 @@
 <template>
 	<nav
 			:id="id"
+			v-contrast
 			:class="stepperClasses"
-			aria-label="Progress steps"
+			:aria-label="t('origam.stepper.progressSteps', 'Progress steps')"
 	>
 		<slot name="default">
 			<template v-if="hasItems">
@@ -29,14 +30,16 @@
 	</nav>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, provide, ref, StyleValue, useSlots, watch } from "vue";
 import { OrigamStepperItem } from "../../components";
 import { ORIGAM_STEPPER_KEY } from "../../consts";
 import { DENSITY, SIZES } from "../../enums";
+import { vContrast } from "../../directives";
 import {
   useDensity,
   useDimension,
+  useLocale,
   useProps,
   useSize,
   useStateEffect,
@@ -91,6 +94,7 @@ const props = defineProps({
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false }
 });
+const { t } = useLocale();
 const emit = defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const slots = useSlots();

package/dist/src/components/Stepper/OrigamStepperItem.vue

@@ -4,11 +4,12 @@
 			:class="itemClasses"
 			:type="isClickable ? 'button' : undefined"
 			:aria-current="resolvedStatus === 'active' ? 'step' : undefined"
-			:aria-label="title ? `Step ${(index ?? 0) + 1}: ${title}` : undefined"
+			:aria-label="stepAriaLabel"
 			:disabled="isClickable && resolvedStatus === 'active' ? true : undefined"
 			@click="handleClick"
 	>
 		<span
+				v-contrast
 				:class="indicatorClasses"
 				aria-hidden="true"
 		>
@@ -39,12 +40,13 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject } from "vue";
 import { OrigamIcon } from "../../components";
 import { ORIGAM_STEPPER_KEY } from "../../consts";
 import { MDI_ICONS } from "../../enums";
-import { useProps } from "../../composables";
+import { useLocale, useProps } from "../../composables";
+import { vContrast } from "../../directives";
 const props = defineProps({
   index: { type: Number, required: false, default: 0 },
   title: { type: String, required: false },
@@ -56,6 +58,11 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
 });
+const { t } = useLocale();
+const stepAriaLabel = computed(() => {
+  if (!props.title) return void 0;
+  return t("origam.stepper.stepAriaLabel", (props.index ?? 0) + 1, props.title);
+});
 const emit = defineEmits(["click"]);
 const { filterProps } = useProps(props);
 const stepper = inject(ORIGAM_STEPPER_KEY);