origam 2.16.0 → 2.17.0

package/dist/src/components/ExpansionPanel/OrigamExpansionPanels.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="expansionPanelsClasses"
 			:style="expansionPanelsStyles"
 	>
@@ -113,23 +114,21 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
-import { OrigamDefaultsProvider, OrigamExpansionPanel } from "../../components";
-import {
-  useActive,
-  useBothColor,
-  useDensity,
-  useElevation,
-  useGroup,
-  useHover,
-  useLoader,
-  usePassedProps,
-  useProps,
-  useStateEffect,
-  useStyle
-} from "../../composables";
-import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
-import { omitUndefined } from "../../utils";
-import { LOADER_KIND } from "../../enums";
+import OrigamDefaultsProvider from "../DefaultsProvider/OrigamDefaultsProvider.vue";
+import OrigamExpansionPanel from "./OrigamExpansionPanel.vue";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useGroup } from "../../composables/Commons/group.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts/ExpansionPanel/expansion-panel.const";
+import { omitUndefined } from "../../utils/Commons/commons.util";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
 const props = defineProps({
   flat: { type: Boolean, required: false },
   items: { type: Array, required: false },
@@ -190,7 +189,8 @@ const props = defineProps({
   elevation: { type: [Number, String], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false }
 });
 defineEmits(["update:modelValue"]);
 defineSlots();
@@ -202,14 +202,16 @@ const slotDefaults = computed(() => ({
     color: wasPropPassed("color") ? props.color : void 0,
     bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
     rounded: wasPropPassed("rounded") ? props.rounded : void 0,
-    border: wasPropPassed("border") ? props.border : void 0
+    border: wasPropPassed("border") ? props.border : void 0,
+    eager: wasPropPassed("eager") ? props.eager : void 0,
+    loadingText: wasPropPassed("loadingText") ? props.loadingText : void 0
   })
 }));
 useGroup(props, ORIGAM_EXPANSION_PANEL_KEY);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);
-const { isHover, hoverState } = useHover(props);
-const { isActive, activeState } = useActive(props);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
+const { isOn: isActive, config: activeState } = useStateFlag(props, { state: "active" });
 const {
   borderClasses,
   borderStyles,
@@ -253,7 +255,7 @@ const expansionPanelsClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(expansionPanelsStyles);
+const { id, css, load, isLoaded, unload } = useStyle(expansionPanelsStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/Field/OrigamField.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="styleId"
 			v-contrast
 			:class="fieldClasses"
 			:style="fieldStyles"
@@ -39,7 +40,10 @@
 					v-if="hasPrependInner"
 					key="prependInner"
 					class="origam-field__prepend-inner"
+					:role="isPrependInnerClickable ? 'button' : undefined"
+					:tabindex="isPrependInnerClickable ? 0 : undefined"
 					@click="handleClickPrependInner"
+					@keydown="handleKeydownPrependInner"
 			>
 				<slot name="prependInner">
 					<origam-avatar
@@ -105,27 +109,30 @@
 					v-if="hasClear"
 					key="clear"
 			>
-				<div
+				<button
 						v-show="dirty"
+						type="button"
 						class="origam-field__clearable"
+						:aria-label="clearLabel"
+						@blur="handleBlur"
+						@focus="handleFocus"
 						@mousedown="handleMousedownClear"
+						@keydown="handleKeydownClear"
 				>
 					<slot name="clear">
-						<origam-icon
-								:icon="clearIcon"
-								@blur="handleBlur"
-								@focus="handleFocus"
-								@keydown="handleKeydownClear"
-						/>
+						<origam-icon :icon="clearIcon"/>
 					</slot>
-				</div>
+				</button>
 			</origam-expand-x>
 
 			<div
 					v-if="hasAppendInner"
 					key="appendInner"
 					class="origam-field__append-inner"
+					:role="isAppendInnerClickable ? 'button' : undefined"
+					:tabindex="isAppendInnerClickable ? 0 : undefined"
 					@click="handleClickAppendInner"
+					@keydown="handleKeydownAppendInner"
 			>
 				<slot name="appendInner">
 					<origam-avatar
@@ -167,43 +174,50 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
-import { OrigamAvatar, OrigamExpandX, OrigamIcon, OrigamLabel, OrigamProgress, OrigamSkeleton } from "../../components";
-import {
-  useActive,
-  useAdjacentInner,
-  useBothColor,
-  useDefaults,
-  useDensity,
-  useFocus,
-  useLoader,
-  useProps,
-  useRtl,
-  useSize,
-  useStateEffect,
-  useStyle,
-  useTypography,
-  useVariant
-} from "../../composables";
-import { vContrast } from "../../directives";
-import { DENSITY, EASING, KEYBOARD_VALUES, LOADER_KIND, MDI_ICONS, PROGRESS_TYPE, VARIANT_INPUT } from "../../enums";
-import { animate, convertToUnit, getUid, nullifyTransforms } from "../../utils";
-const _props = defineProps({
+import { computed, onMounted, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamExpandX from "../Transition/OrigamExpandX.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamLabel from "../Label/OrigamLabel.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
+import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRtl } from "../../composables/Commons/rtl.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { useVariant } from "../../composables/Commons/variant.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { EASING } from "../../enums/Transition/transition.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { VARIANT_INPUT } from "../../enums/Commons/variant.enum";
+import { animate, nullifyTransforms } from "../../utils/Commons/animation.util";
+import { convertToUnit } from "../../utils/Commons/commons.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+const props = defineProps({
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  flat: { type: Boolean, required: false },
   inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
   persistentClear: { type: Boolean, required: false },
-  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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -255,7 +269,6 @@ 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: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -266,19 +279,24 @@ const _props = defineProps({
   elevation: { type: [Number, String], required: false },
   size: { type: null, required: false }
 });
-const props = useDefaults(_props);
-defineEmits(["update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active"]);
+defineEmits(["update:focused", "click:appendInner", "click:prependInner", "click:clear", "update:active"]);
 defineSlots();
 const slots = useSlots();
 const attrs = useAttrs();
+const { t } = useLocale();
 const {
   hasAppendInner,
   onClickAppendInner: handleClickAppendInner,
   onClickPrependInner: handleClickPrependInner,
+  onKeydownAppendInner: handleKeydownAppendInner,
+  onKeydownPrependInner: handleKeydownPrependInner,
+  isAppendInnerClickable,
+  isPrependInnerClickable,
   clickClear: handleClickClear,
   hasPrependInner,
   hasClear
 } = useAdjacentInner(props);
+const clearLabel = computed(() => t("origam.input.clear", props.label ?? ""));
 const uid = getUid();
 const id = computed(() => props.id || `input-${uid}`);
 const messagesId = computed(() => `${id.value}-messages`);
@@ -288,7 +306,7 @@ const handleClick = (e) => {
   }
 };
 const handleKeydownClear = (e) => {
-  if (e.key !== KEYBOARD_VALUES.ENTER && e.key !== " ") return;
+  if (e.key !== KEYBOARD_VALUES.ENTER && e.key !== KEYBOARD_VALUES.EMPTY) return;
   e.preventDefault();
   e.stopPropagation();
   handleClickClear(new MouseEvent("click"));
@@ -304,6 +322,7 @@ const slotProps = computed(() => {
     class: "origam-field__input",
     id: id.value,
     "aria-describedby": messagesId.value,
+    "aria-required": props.required || void 0,
     isActive: isActive.value,
     isFocused: isFocused.value,
     ref: controlRef.value,
@@ -377,53 +396,55 @@ const hasSuffix = computed(() => {
   return !!props.suffix || !!slots.suffix;
 });
 const { focusClasses, isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
-const { isActive: active, activeState, onActive: handleActive } = useActive(props);
+const { isOn: active, config: activeState, toggle: handleActive } = useStateFlag(props, { state: "active" });
 const isActive = computed(() => {
   return props.dirty || active.value || hasPrefix.value || hasSuffix.value;
 });
-watch(isFocused, (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    handleActive();
-  }
-});
-watch(isActive, (newVal, oldVal) => {
-  if (hasLabel.value && newVal !== oldVal) {
-    const el = origamLabelRef.value.$el;
-    const targetEl = origamFloatingLabelRef.value.$el;
-    requestAnimationFrame(() => {
-      const rect = nullifyTransforms(el);
-      const targetRect = targetEl.getBoundingClientRect();
-      const x = targetRect.x - rect.x;
-      const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2);
-      const targetWidth = targetRect.width / 0.75;
-      const width = Math.abs(targetWidth - rect.width) > 1 ? { maxWidth: convertToUnit(targetWidth) } : void 0;
-      const style = getComputedStyle(el);
-      const targetStyle = getComputedStyle(targetEl);
-      const duration = parseFloat(style.transitionDuration) * 1e3 || 150;
-      const scale = parseFloat(targetStyle.getPropertyValue("--origam-field__label---font-size"));
-      const color2 = targetStyle.getPropertyValue("color");
-      el.style.visibility = "visible";
-      targetEl.style.visibility = "hidden";
-      animate(el, {
-        transform: `translate(${x}px, ${y}px) scale(${scale})`,
-        color: color2,
-        ...width
-      }, {
-        duration,
-        easing: EASING.STANDARD,
-        direction: newVal ? "normal" : "reverse"
-      }).finished.then(() => {
-        el.style.removeProperty("visibility");
-        targetEl.style.removeProperty("visibility");
+onMounted(() => {
+  watch(isFocused, (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      handleActive();
+    }
+  });
+  watch(isActive, (newVal, oldVal) => {
+    if (hasLabel.value && newVal !== oldVal) {
+      const el = origamLabelRef.value.$el;
+      const targetEl = origamFloatingLabelRef.value.$el;
+      requestAnimationFrame(() => {
+        const rect = nullifyTransforms(el);
+        const targetRect = targetEl.getBoundingClientRect();
+        const x = targetRect.x - rect.x;
+        const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2);
+        const targetWidth = targetRect.width / 0.75;
+        const width = Math.abs(targetWidth - rect.width) > 1 ? { maxWidth: convertToUnit(targetWidth) } : void 0;
+        const style = getComputedStyle(el);
+        const targetStyle = getComputedStyle(targetEl);
+        const duration = parseFloat(style.transitionDuration) * 1e3 || 150;
+        const scale = parseFloat(targetStyle.getPropertyValue("--origam-field__label---font-size"));
+        const color2 = targetStyle.getPropertyValue("color");
+        el.style.visibility = "visible";
+        targetEl.style.visibility = "hidden";
+        animate(el, {
+          transform: `translate(${x}px, ${y}px) scale(${scale})`,
+          color: color2,
+          ...width
+        }, {
+          duration,
+          easing: EASING.STANDARD,
+          direction: newVal ? "normal" : "reverse"
+        }).finished.then(() => {
+          el.style.removeProperty("visibility");
+          targetEl.style.removeProperty("visibility");
+        });
       });
-    });
-  }
-}, { flush: "post" });
+    }
+  }, { flush: "post" });
+});
 const color = computed(() => {
-  return isActive.value && isFocused.value && props.activeColor ? props.activeColor : props.color;
+  return isActive.value && isFocused.value && activeState.value?.color ? activeState.value.color : props.color;
 });
 const bgColor = computed(() => {
-  return isActive.value && isFocused.value && props.activeBgColor ? props.activeBgColor : props.bgColor;
+  return isActive.value && isFocused.value && activeState.value?.bgColor ? activeState.value.bgColor : props.bgColor;
 });
 const { colorClasses, colorStyles } = useBothColor(bgColor, color);
 const { densityClasses } = useDensity(props);
@@ -468,12 +489,10 @@ const fieldClasses = computed(() => {
       "origam-field--disabled": props.disabled,
       "origam-field--dirty": props.dirty,
       "origam-field--error": props.error,
-      "origam-field--flat": props.flat,
       "origam-field--has-background": !!props.bgColor,
       "origam-field--inline": props.inline,
       "origam-field--persistent-clear": props.persistentClear,
       "origam-field--prepended": hasPrependInner.value,
-      "origam-field--reverse": props.reverse,
       "origam-field--single-line": props.singleLine,
       "origam-field--no-label": !hasLabel.value,
       "origam-text-field--prefixed": props.prefix,
@@ -492,7 +511,10 @@ const fieldClasses = computed(() => {
   ];
 });
 const { filterProps } = useProps(props);
-const { id: styleId, css, load, isLoaded, unload } = useStyle(fieldStyles);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(
+  fieldStyles,
+  () => props.id ? `${props.id}-field` : void 0
+);
 defineExpose({
   filterProps,
   css,
@@ -511,7 +533,7 @@ defineExpose({
 		display: grid;
 		grid-template-areas: "prepend-inner field clear append-inner";
 		grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
-		font-size: 16px;
+		font-size: var(--origam-field---font-size, 16px);
 		letter-spacing: 0.009375em;
 		max-width: 100%;
 		border-radius: var(--origam-field---border-radius, 8px);
@@ -560,7 +582,7 @@ defineExpose({
 			display: flex;
 			flex-wrap: wrap;
 			letter-spacing: 0.009375em;
-			opacity: 0.7;
+			opacity: var(--origam-field__input---opacity, 0.7);
 			box-sizing: border-box;
 			min-height: max(calc(var(--origam-input__control---height, 36px) + var(--origam-input---density, 0px)), 1.5rem + var(--origam-field__input---padding-top) + var(--origam-field__input---padding-bottom));
 			min-width: 0;
@@ -621,17 +643,19 @@ defineExpose({
 			opacity: 0;
 			transition: inherit;
 			white-space: nowrap;
-			min-height: max(var(--origam-input__control---height, 36px), 1.5rem + var(--origam-field-input---padding-top, 0px) + var(--origam-field-input---padding-bottom, 0px));
+			min-height: max(var(--origam-input__control---height, 36px), 1.5rem + var(--origam-field__input---padding-top, 0px) + var(--origam-field__input---padding-bottom, 0px));
 			padding-top: calc(var(--origam-field---padding-top, 4px) + calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px)));
 			padding-bottom: var(--origam-field---padding-bottom, 6px);
 		}
 
 		&__prefix {
 			padding-inline-start: var(--origam-field---padding-start, 16px);
+			opacity: var(--origam-field__prefix---opacity, 0);
 		}
 
 		&__suffix {
 			padding-inline-end: var(--origam-field---padding-end, 16px);
+			opacity: var(--origam-field__suffix---opacity, 0);
 		}
 
 		&__field {
@@ -667,13 +691,33 @@ defineExpose({
 			}
 		}
 
+		&__prepend-inner > .origam-icon {
+			opacity: var(--origam-field---prepend-inner-icon-opacity, 0.7);
+		}
+
+		&__append-inner > .origam-icon {
+			opacity: var(--origam-field---append-inner-icon-opacity, 0.7);
+		}
+
 		&__clearable {
 			cursor: pointer;
-			opacity: 0;
+			opacity: var(--origam-field__clearable---opacity, 0);
 			overflow: hidden;
-			margin-inline: 4px;
-			transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+			margin-inline: var(--origam-field__clearable---margin-inline, 4px);
+			transition: var(--origam-field__clearable---transition-duration, 150ms) var(--origam-field__clearable---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
 			transition-property: opacity, transform, width;
+
+			// issue #443 — now a real <button> (was a bare <div>): reset the
+			// UA button chrome the shared prepend/append/clear rule above
+			// doesn't cover (it only sets padding-top + padding-inline).
+			// `padding-bottom` alone, never the `padding` shorthand — that
+			// would clobber the token-driven padding-top/padding-inline set
+			// two rules up.
+			border: none;
+			background: none;
+			padding-bottom: 0;
+			font: inherit;
+			color: inherit;
 		}
 
 		&__label {
@@ -686,7 +730,7 @@ defineExpose({
 			position: absolute;
 			top: calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px) - 8px);
 			transform-origin: left center;
-			transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+			transition: var(--origam-field__label---transition-duration, 150ms) var(--origam-field__label---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
 			transition-property: opacity, transform;
 			z-index: 1;
 
@@ -728,6 +772,14 @@ defineExpose({
 			}
 		}
 
+    &--is-rtl {
+      direction: rtl;
+    }
+
+    &--is-ltr {
+      direction: ltr;
+    }
+
 		&--prefixed {
 			--origam-field---padding-start: 6px;
 		}
@@ -764,14 +816,17 @@ defineExpose({
 				}
 			}
 
-			#{$this}__prefix,
+			#{$this}__prefix {
+				opacity: var(--origam-field__prefix---opacity-active, 1);
+			}
+
 			#{$this}__suffix {
-				opacity: 1;
+				opacity: var(--origam-field__suffix---opacity-active, 1);
 			}
 		}
 
 		&--disabled {
-			opacity: 0.5;
+			opacity: var(--origam-field---opacity-disabled, 0.5);
 			pointer-events: none;
 
 			#{$this}__prefix,
@@ -848,7 +903,7 @@ defineExpose({
 		&--focused,
 		&--persistent-clear {
 			#{$this}__clearable {
-				opacity: 1;
+				opacity: var(--origam-field__clearable---opacity-visible, 1);
 			}
 		}
 
@@ -903,13 +958,13 @@ defineExpose({
 			&-solo {
 				box-shadow: var(--origam-theme---elevation, var(--origam-field--variant-solo---box-shadow, var(--origam-shadow---sm)));
 				border-color: transparent;
-				--origam-field__input---padding-top: 20px;
+				--origam-field__input---padding-top: var(--origam-field__input---padding-block-solo);
 			}
 
 			&-filled {
 				background: var(--origam-field--variant-filled---background-color, color-mix(in srgb, currentColor 12%, transparent));
 				border-radius: var(--origam-field---border-radius, 8px) var(--origam-field---border-radius, 8px) 0 0;
-				--origam-field__input---padding-top: 20px;
+				--origam-field__input---padding-top: var(--origam-field__input---padding-block-filled);
 
 				#{$this}__outlines {
 					#{$this}__outline {
@@ -952,12 +1007,12 @@ defineExpose({
 			&-outlined {
 				--origam-field---border-width: var(--origam-field---border-width-outlined, 1px);
 				--origam-field---border-opacity: var(--origam-field---border-opacity-outlined, .38);
-				background: var(--origam-field---background-color, transparent);
+				background: var(--origam-field---background-color, var(--origam-field---variant-outlined-background-color, transparent));
 
 				#{$this}__outline {
-					border-color: var(--origam-field---border-color, currentColor);
-					border-style: solid;
-					opacity: var(--origam-field---border-opacity);
+					border-color: var(--origam-field---border-color, var(--origam-field__outline---border-color, currentColor));
+					border-style: var(--origam-field__outline---border-style, solid);
+					opacity: var(--origam-field---border-opacity, var(--origam-field__outline---border-opacity, .38));
 
 					&--start {
 						border-top-width: var(--origam-field---border-width);
@@ -1022,10 +1077,10 @@ defineExpose({
 				--origam-field---border-opacity: .38;
 
 				#{$this}__outline {
-					border-color: var(--origam-field---border-color, currentColor);
-					border-style: solid;
-					opacity: var(--origam-field---border-opacity);
-					transition: opacity .25s cubic-bezier(.4, 0, .2, 1);
+					border-color: var(--origam-field---border-color, var(--origam-field__outline---border-color, currentColor));
+					border-style: var(--origam-field__outline---border-style, solid);
+					opacity: var(--origam-field---border-opacity, var(--origam-field__outline---border-opacity, .38));
+					transition: opacity var(--origam-field__outline---transition-duration, .25s) var(--origam-field__outline---transition-easing, cubic-bezier(.4, 0, .2, 1));
 					border-width: 0;
 
 					&--start {
@@ -1043,7 +1098,7 @@ defineExpose({
 
 				&:hover,
 				&#{$this}--focused {
-					--origam-field---border-opacity: 1;
+					--origam-field---border-opacity: var(--origam-field__outline---border-opacity-hover, 1);
 				}
 			}
 		}