origam 0.3.9 → 2.2.1

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

@@ -2,172 +2,196 @@
 	<div
 			:class="fieldClasses"
 			:style="fieldStyles"
-			v-bind="$attrs"
+			v-bind="attrs"
 			@click="handleClick"
 	>
 		<div class="origam-field__overlay"/>
 
-		<template v-if="hasLoading">
+		<template v-if="loaderConfig.isActive && loaderConfig.kind === 'skeleton'">
+			<origam-skeleton
+					class="origam-field__skeleton"
+					variant="rectangular"
+					:loading="true"
+					v-bind="loaderConfig.overrides"
+			/>
+		</template>
+
+		<template v-if="hasLoader && loaderConfig.kind !== 'skeleton'">
 			<slot name="loader">
 				<div class="origam-field__loader">
 					<origam-progress
-							:active="!!props.loading"
-							:color="props.color"
-							:indeterminate="typeof props.loading !== 'number'"
-							:model-value="typeof props.loading === 'number' ? props.loading : undefined"
-							:type="PROGRESS_TYPE.LINEAR"
-							class="origam-field__progress origam-field__progress--linear"
+							:active="true"
+							:color="color"
+							:indeterminate="loaderConfig.indeterminate"
+							:model-value="loaderConfig.modelValue"
+							:type="loaderConfig.kind === 'circular' ? PROGRESS_TYPE.CIRCULAR : PROGRESS_TYPE.LINEAR"
+							:class="fieldProgressClasses"
 							thickness="4"
+							v-bind="loaderConfig.overrides"
 					/>
 				</div>
 			</slot>
 		</template>
 
-		<div
-				v-if="hasPrependInner"
-				key="prependInner"
-				class="origam-field__prepend-inner"
-				@click="handleClickPrependInner"
-		>
-			<slot name="prependInner">
-				<origam-avatar
-						v-if="prependInnerAvatar"
-						key="prepend-avatar"
-						:density="density"
-						:image="prependInnerAvatar"
-				/>
-				<origam-icon
-						v-if="prependInnerIcon"
-						key="prepend-icon"
-						:density="density"
-						:icon="prependInnerIcon"
-				/>
-			</slot>
-		</div>
-
-		<div
-				class="origam-field__field"
-				data-no-activator=""
-		>
-			<template v-if="hasFloatingLabel">
-				<slot name="floatingLabel">
-					<origam-label
-							key="floating-label"
-							ref="origamFloatingLabelRef"
-							:for="id"
-							:required="required"
-							:style="colorStyles"
-							:text="label"
-							class="origam-field__label"
-							floating
+		<template v-if="!loaderConfig.isActive || loaderConfig.kind !== 'skeleton'">
+			<div
+					v-if="hasPrependInner"
+					key="prependInner"
+					class="origam-field__prepend-inner"
+					@click="handleClickPrependInner"
+			>
+				<slot name="prependInner">
+					<origam-avatar
+							v-if="prependInnerAvatar"
+							key="prepend-avatar"
+							:density="density"
+							:image="prependInnerAvatar"
 					/>
-				</slot>
-			</template>
-
-			<template v-if="hasLabel">
-				<slot name="label">
-					<origam-label
-							ref="origamLabelRef"
-							:for="id"
-							:required="required"
-							:style="colorStyles"
-							:text="label"
-							class="origam-field__label"
+					<origam-icon
+							v-if="prependInnerIcon"
+							key="prepend-icon"
+							:density="density"
+							:icon="prependInnerIcon"
 					/>
 				</slot>
-			</template>
+			</div>
 
-			<span
-					v-if="hasPrefix"
-					class="origam-field__prefix"
+			<div
+					class="origam-field__field"
+					data-no-activator=""
 			>
-         <slot name="prefix">
-          <span>
-            {{ prefix }}
-          </span>
-         </slot>
-      </span>
-
-			<slot
-					name="default"
-					v-bind="slotProps"
-			/>
+				<template v-if="hasLabel">
+					<slot
+							name="label"
+							v-bind="labelProps"
+					>
+						<origam-label
+								v-bind="labelProps"
+								ref="origamLabelRef"
+						/>
+					</slot>
+				</template>
+
+				<span
+						v-if="hasPrefix"
+						class="origam-field__prefix"
+				>
+	         <slot name="prefix">
+	          <span>
+	            {{ prefix }}
+	          </span>
+	         </slot>
+	      </span>
+
+				<slot
+						name="default"
+						v-bind="slotProps"
+				/>
+
+				<span
+						v-if="hasSuffix"
+						class="origam-field__suffix"
+				>
+	        <slot name="suffix">
+	          <span>
+	            {{ suffix }}
+	          </span>
+	        </slot>
+	      </span>
+			</div>
 
-			<span
-					v-if="hasSuffix"
-					class="origam-field__suffix"
+			<origam-expand-x
+					v-if="hasClear"
+					key="clear"
 			>
-        <slot name="suffix">
-          <span>
-            {{ suffix }}
-          </span>
-        </slot>
-      </span>
-		</div>
-
-		<origam-expand-x
-				v-if="hasClear"
-				key="clear"
-		>
+				<div
+						v-show="dirty"
+						class="origam-field__clearable"
+						@mousedown="handleMousedownClear"
+				>
+					<slot name="clear">
+						<origam-icon
+								:icon="clearIcon"
+								@blur="handleBlur"
+								@focus="handleFocus"
+								@keydown="handleKeydownClear"
+						/>
+					</slot>
+				</div>
+			</origam-expand-x>
+
 			<div
-					v-show="props.dirty"
-					class="origam-field__clearable"
-					@mousedown="handleMousedownClear"
+					v-if="hasAppendInner"
+					key="appendInner"
+					class="origam-field__append-inner"
+					@click="handleClickAppendInner"
 			>
-				<slot name="clear">
+				<slot name="appendInner">
+					<origam-avatar
+							v-if="appendInnerAvatar"
+							key="append-avatar"
+							:density="density"
+							:image="appendInnerAvatar"
+					/>
 					<origam-icon
-							:icon="props.clearIcon"
-							@blur="handleBlur"
-							@focus="handleFocus"
-							@keydown="handleKeydownClear"
+							v-if="appendInnerIcon"
+							key="append-icon"
+							:density="density"
+							:icon="appendInnerIcon"
 					/>
 				</slot>
 			</div>
-		</origam-expand-x>
-
-		<div
-				v-if="hasAppendInner"
-				key="appendInner"
-				class="origam-field__append-inner"
-				@click="handleClickAppendInner"
-		>
-			<slot name="appendInner">
-				<origam-avatar
-						v-if="appendInnerAvatar"
-						key="append-avatar"
-						:density="density"
-						:image="appendInnerAvatar"
-				/>
-				<origam-icon
-						v-if="appendInnerIcon"
-						key="append-icon"
-						:density="density"
-						:icon="appendInnerIcon"
-				/>
-			</slot>
-		</div>
 
-		<div class="origam-field__outline">
-			<div class="v-field__outline__start"/>
-			<div class="v-field__outline__end"/>
-		</div>
+			<div class="origam-field__outlines">
+				<div class="origam-field__outline origam-field__outline--start"/>
+				<div class="origam-field__outline origam-field__outline--notch">
+					<template v-if="hasFloatingLabel">
+						<slot
+								name="floatingLabel"
+								v-bind="floatingLabelProps"
+						>
+							<origam-label
+									key="floating-label"
+									v-bind="floatingLabelProps"
+									ref="origamFloatingLabelRef"
+							/>
+						</slot>
+					</template>
+				</div>
+				<div class="origam-field__outline origam-field__outline--end"/>
+			</div>
+		</template>
 
 	</div>
 </template>
 
 <script setup>
-import { computed, ref, StyleValue, useSlots, watch } from "vue";
-import { OrigamAvatar, OrigamExpandX, OrigamIcon, OrigamLabel, OrigamProgress } from "../../components";
-import { useAdjacentInner, useBothColor, useDensity, useFocus, useLoader, useProps, useRtl } from "../../composables";
-import { EASING, KEYBOARD_VALUES, PROGRESS_TYPE } from "../../enums";
+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,
+  useVariant
+} from "../../composables";
+import { DENSITY, EASING, KEYBOARD_VALUES, MDI_ICONS, PROGRESS_TYPE, VARIANT_INPUT } from "../../enums";
 import { animate, convertToUnit, getUid, nullifyTransforms } from "../../utils";
-const props = defineProps({
-  active: { type: Boolean, required: false },
-  centerAffix: { type: Boolean, required: false },
+const _props = defineProps({
+  centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  error: { 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 },
@@ -178,30 +202,61 @@ 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 },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
   prependInnerIcon: { type: null, required: false },
-  clearIcon: { type: null, required: false },
+  clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
-  density: { type: null, required: false }
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
+  text: { type: String, required: false },
+  floating: { type: Boolean, required: false },
+  name: { type: 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 },
+  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 },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false, default: VARIANT_INPUT.OUTLINED },
+  elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false }
 });
-defineEmits(["update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear"]);
-const { filterProps } = useProps(props);
-const { loaderClasses } = useLoader(props);
-const { densityClasses } = useDensity(props);
-const { rtlClasses } = useRtl();
-const { focusClasses, isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
+const props = useDefaults(_props);
+defineEmits(["update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active"]);
+defineSlots();
+const slots = useSlots();
+const attrs = useAttrs();
 const {
   hasAppendInner,
   onClickAppendInner: handleClickAppendInner,
@@ -213,16 +268,6 @@ const {
 const uid = getUid();
 const id = computed(() => props.id || `input-${uid}`);
 const messagesId = computed(() => `${id.value}-messages`);
-const origamLabelRef = ref();
-const origamFloatingLabelRef = ref();
-const controlRef = ref();
-const currentColor = computed(() => {
-  return props.error || props.disabled ? void 0 : isActive.value && isFocused.value && props.activeColor ? props.activeColor : props.color;
-});
-const currentBgColor = computed(() => {
-  return props.error || props.disabled ? void 0 : isActive.value && isFocused.value && props.activeBgColor ? props.activeBgColor : props.bgColor;
-});
-const { colorStyles } = useBothColor(currentBgColor, currentColor);
 const handleClick = (e) => {
   if (e.target !== document.activeElement) {
     e.preventDefault();
@@ -239,6 +284,7 @@ const handleMousedownClear = (e) => {
   e.stopPropagation();
   handleClickClear(e);
 };
+const controlRef = ref();
 const slotProps = computed(() => {
   return {
     class: "origam-field__input",
@@ -246,29 +292,78 @@ const slotProps = computed(() => {
     "aria-describedby": messagesId.value,
     isActive: isActive.value,
     isFocused: isFocused.value,
-    controlRef: controlRef.value,
+    ref: controlRef.value,
     onBlur: handleBlur,
     onFocus: handleFocus
   };
 });
-const slots = useSlots();
+const origamLabelRef = ref();
+const hasLabel = computed(() => {
+  return !props.singleLine && !!(props.label || slots.label);
+});
+const labelProps = computed(() => {
+  const defaultLabelProps = origamLabelRef.value?.filterProps(props, ["text", "class", "style"]);
+  return {
+    class: ["origam-field__label"],
+    for: id.value,
+    text: props.label,
+    ...defaultLabelProps,
+    // The field's `border` / `rounded` visual props belong to
+    // the FIELD outline (the input box). Forwarding them onto
+    // the `<origam-label>` would draw a chip-like border + 8px
+    // radius around the label text — which is what user
+    // reported on OrigamFileField (the default `border: true,
+    // rounded: true` defaults of FileField were bleeding into
+    // the "Document" label). Reset them to `false` here so the
+    // label always renders as plain text regardless of what the
+    // surrounding field declares.
+    border: false,
+    rounded: false
+  };
+});
+const origamFloatingLabelRef = ref();
 const hasFloatingLabel = computed(() => {
   return !props.singleLine && !!(props.label || slots.floatingLabel);
 });
-const hasLabel = computed(() => {
-  return !props.singleLine && !!(props.label || slots.label);
+const floatingLabelProps = computed(() => {
+  const defaultFloatingLabelProps = origamFloatingLabelRef.value?.filterProps(props, ["text", "class", "style"]);
+  return {
+    class: ["origam-field__label", "origam-field__label--floating"],
+    for: id.value,
+    text: props.label,
+    floating: true,
+    ref: "origamFloatingLabelRef",
+    ...defaultFloatingLabelProps,
+    // Same reason as `labelProps` above — the field's `border` /
+    // `rounded` defaults belong to the field outline, NOT to the
+    // floating label that animates above/inside the input on focus.
+    // Without this override the floating "Document" label inherits
+    // `--border-thin` + `--rounded-md` from the field's defaults
+    // and renders as a chip-bordered pill, which the user reported
+    // as still wrong after fixing the static label.
+    border: false,
+    rounded: false
+  };
 });
-const hasLoading = computed(() => {
-  return slots.loader || !!props.loading;
+const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const hasLoader = computed(() => {
+  return slots.loader || loaderConfig.value.isActive;
 });
 const hasPrefix = computed(() => {
-  return !!props.prefix;
+  return !!props.prefix || !!slots.prefix;
 });
 const hasSuffix = computed(() => {
-  return !!props.suffix;
+  return !!props.suffix || !!slots.suffix;
 });
+const { focusClasses, isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
+const { isActive: active, activeState, onActive: handleActive } = useActive(props);
 const isActive = computed(() => {
-  return props.dirty || props.active || hasPrefix.value || hasSuffix.value;
+  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) {
@@ -285,12 +380,12 @@ watch(isActive, (newVal, oldVal) => {
       const targetStyle = getComputedStyle(targetEl);
       const duration = parseFloat(style.transitionDuration) * 1e3 || 150;
       const scale = parseFloat(targetStyle.getPropertyValue("--origam-field__label---font-size"));
-      const color = targetStyle.getPropertyValue("color");
+      const color2 = targetStyle.getPropertyValue("color");
       el.style.visibility = "visible";
       targetEl.style.visibility = "hidden";
       animate(el, {
         transform: `translate(${x}px, ${y}px) scale(${scale})`,
-        color,
+        color: color2,
         ...width
       }, {
         duration,
@@ -303,12 +398,37 @@ watch(isActive, (newVal, oldVal) => {
     });
   }
 }, { flush: "post" });
+const color = computed(() => {
+  return isActive.value && isFocused.value && props.activeColor ? props.activeColor : props.color;
+});
+const bgColor = computed(() => {
+  return isActive.value && isFocused.value && props.activeBgColor ? props.activeBgColor : props.bgColor;
+});
+const { colorClasses, colorStyles } = useBothColor(bgColor, color);
+const { densityClasses } = useDensity(props);
+const {
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  elevationStyles
+} = useStateEffect(props, void 0, isActive, void 0, activeState);
+const { rtlClasses } = useRtl();
+const { variantClasses } = useVariant(props);
+const { sizeClasses } = useSize(props, "origam-field");
 const fieldStyles = computed(() => {
   return [
     colorStyles.value,
+    roundedStyles.value,
+    elevationStyles.value,
     props.style
   ];
 });
+const fieldProgressClasses = computed(() => {
+  return [
+    "origam-field__progress",
+    `origam-field__progress--${loaderConfig.value.kind === "line" ? "linear" : loaderConfig.value.kind}`
+  ];
+});
 const fieldClasses = computed(() => {
   return [
     "origam-field",
@@ -321,6 +441,7 @@ const fieldClasses = computed(() => {
       "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,
@@ -329,15 +450,28 @@ const fieldClasses = computed(() => {
       "origam-text-field--prefixed": props.prefix,
       "origam-text-field--suffixed": props.suffix
     },
-    rtlClasses.value,
     loaderClasses.value,
+    colorClasses.value,
+    rtlClasses.value,
     densityClasses.value,
     focusClasses.value,
+    variantClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
+    sizeClasses.value,
     props.class
   ];
 });
+const { filterProps } = useProps(props);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(fieldStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
 });
 </script>
 
@@ -351,22 +485,31 @@ defineExpose({
 		font-size: 16px;
 		letter-spacing: 0.009375em;
 		max-width: 100%;
-		border-radius: 4px;
+		border-radius: var(--origam-field---rounded);
 		contain: layout;
 		flex: 1 0;
 		grid-area: control;
 		position: relative;
 		padding-inline: var(--origam-field---padding-start) var(--origam-field---padding-end);
 
-		--origam-field---padding-start: 16px;
-		--origam-field---padding-end: 16px;
-		--origam-field---padding-top: 8px;
-		--origam-field---padding-bottom: 4px;
+		&__skeleton {
+			width: 100%;
+			min-height: var(--origam-field__skeleton---min-height, var(--origam-input__control---height, 36px));
+			border-radius: var(--origam-field---rounded);
+			grid-column: 1 / -1;
+			grid-row: 1;
+		}
 
-		--origam-field__input---padding-top: calc(var(--origam-field---padding-top, 8px) + calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px)));
-		--origam-field__input---padding-bottom: var(--origam-field---padding-bottom, 4px);
-		--origam-field__input---padding-start: var(--origam-field---padding-bottom, 16px);
-		--origam-field__input---padding-end: var(--origam-field---padding-bottom, 16px);
+		&__loader {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			height: var(--origam-field__loader---height, 4px);
+			z-index: 1;
+			pointer-events: none;
+			grid-column: 1 / -1;
+		}
 
 		.origam-chip {
 			--origam-chip---height: 24px;
@@ -380,7 +523,8 @@ defineExpose({
 			flex-wrap: wrap;
 			letter-spacing: 0.009375em;
 			opacity: 0.7;
-			min-height: max(calc(var(--origam-input__control---height, 56px) + var(--origam-input---density, 0px)), 1.5rem + var(--origam-field__input---padding-top) + var(--origam-field__input---padding-bottom));
+			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;
 			padding-inline: var(--origam-field__input---padding-start) var(--origam-field__input---padding-end);
 			padding-top: var(--origam-field__input---padding-top);
@@ -388,6 +532,26 @@ defineExpose({
 			position: relative;
 			width: 100%;
 			row-gap: calc(8px - var(--origam-input---density, 0));
+			border: none;
+			background: transparent;
+
+			&::placeholder {
+				color: currentColor;
+				opacity: 0;
+			}
+
+			&:focus,
+			&:active {
+				outline: none;
+
+				&::placeholder {
+					opacity: 0.5;
+				}
+			}
+
+			&:invalid {
+				box-shadow: none;
+			}
 
 			input,
 			textarea {
@@ -419,7 +583,7 @@ defineExpose({
 			opacity: 0;
 			transition: inherit;
 			white-space: nowrap;
-			min-height: max(56px, 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);
 		}
@@ -488,10 +652,41 @@ defineExpose({
 			transition-property: opacity, transform;
 			z-index: 1;
 
-			&.origam-label--floating {
+			&--floating {
 				font-size: var(--origam-field__label---font-size);
 				visibility: hidden;
 				max-width: 100%;
+				position: static;
+			}
+		}
+
+		&__outlines {
+			align-items: stretch;
+			contain: layout;
+			display: flex;
+			height: 100%;
+			left: 0;
+			pointer-events: none;
+			position: absolute;
+			right: 0;
+			width: 100%;
+
+			#{$this}__outline {
+				&--start {
+					flex: 0 0 var(--origam-field---padding-start);
+				}
+
+				&--end {
+					flex: 1;
+				}
+
+				&--notch {
+					flex-basis: auto;
+					flex-shrink: 0;
+					flex-grow: 0;
+					position: relative;
+					max-width: calc(100% - 24px);
+				}
 			}
 		}
 
@@ -515,7 +710,7 @@ defineExpose({
 				top: 50%;
 				transform: translateY(-50%);
 
-				&.origam-label--floating {
+				&--floating {
 					transform: none;
 					top: calc(var(--origam-input---padding-top, 16px) / 2 + var(--origam-input---density, 0px));
 				}
@@ -526,7 +721,7 @@ defineExpose({
 			#{$this}__label {
 				visibility: hidden;
 
-				&.origam-label--floating {
+				&--floating {
 					visibility: unset;
 				}
 			}
@@ -555,10 +750,6 @@ defineExpose({
 			--origam-field---padding-end: 6px;
 		}
 
-		&--rounded {
-			border-radius: 24px;
-		}
-
 		&--focused {
 			#{$this}__append-inner,
 			#{$this}__prepend-inner {
@@ -583,16 +774,18 @@ defineExpose({
 
 		&--error {
 			&:not(#{$this}--disabled) {
+				--origam-field---border-color: var(--origam-field--error---border-color, var(--origam-color__feedback--danger---border));
+
 				#{$this}__append-inner,
 				#{$this}__clearable,
 				#{$this}__prepend-inner {
 					> .origam-icon {
-						color: rgba(255, 0, 0, 1);
+						color: var(--origam-field--error---color, var(--origam-color__feedback--danger---fgSubtle));
 					}
 				}
 
 				#{$this}__label {
-					color: rgba(255, 0, 0, 1);
+					color: var(--origam-field--error---color, var(--origam-color__feedback--danger---fgSubtle));
 				}
 			}
 		}
@@ -617,6 +810,215 @@ defineExpose({
 			}
 		}
 
+		&--inline {
+			background-color: transparent;
+			padding-inline: var(--origam-field--inline---padding-inline, 4px);
+			border-radius: 0;
+
+			#{$this}__outlines {
+				display: none;
+			}
+
+			#{$this}__label {
+				opacity: 0;
+				pointer-events: none;
+			}
+
+			:deep(.origam-field__input) {
+				padding-top: 0;
+				padding-bottom: 0;
+				padding-inline: 0;
+				min-height: unset;
+			}
+
+			box-shadow: none;
+
+			@media (hover: hover) {
+				&:hover:not(#{$this}--focused):not(#{$this}--disabled) {
+					box-shadow: 0 1px 0 0 var(--origam-color__border---subtle, currentColor);
+				}
+			}
+
+			&#{$this}--focused {
+				box-shadow: 0 1px 0 0 var(--origam-color__border---focus, var(--origam-color__action--primary---bg, currentColor));
+			}
+		}
+
+		&--variant {
+			&-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;
+			}
+
+			&-filled {
+				background: var(--origam-field--variant-filled---background-color, color-mix(in srgb, currentColor 12%, transparent));
+				border-radius: var(--origam-field---rounded) var(--origam-field---rounded) 0 0;
+				--origam-field__input---padding-top: 20px;
+
+				#{$this}__outlines {
+					#{$this}__outline {
+						border-bottom: 1px solid var(--origam-field---border-color, currentColor);
+						opacity: var(--origam-field--variant-filled---border-opacity, 0.42);
+					}
+				}
+
+				&:hover,
+				&#{$this}--focused {
+					#{$this}__outlines {
+						#{$this}__outline {
+							opacity: 1;
+						}
+					}
+				}
+
+				&#{$this}--error:not(#{$this}--disabled) {
+					#{$this}__outlines {
+						#{$this}__outline {
+							border-bottom-color: var(--origam-field---border-color, var(--origam-color__feedback--danger---border));
+						}
+					}
+				}
+			}
+
+			&-plain {
+				background: transparent;
+				--origam-field---border-width: 0px;
+
+				#{$this}__outlines {
+					display: none;
+				}
+
+				:deep(.origam-field__input) {
+					padding-inline: 0;
+				}
+			}
+
+			&-outlined {
+				--origam-field---border-width: 1px;
+				--origam-field---border-opacity: .38;
+				background: var(--origam-field---background-color, transparent);
+
+				#{$this}__outline {
+					border-color: var(--origam-field---border-color, currentColor);
+					border-style: solid;
+					opacity: var(--origam-field---border-opacity);
+
+					&--start {
+						border-top-width: var(--origam-field---border-width);
+						border-bottom-width: var(--origam-field---border-width);
+						border-inline-start-width: var(--origam-field---border-width);
+						border-inline-end-width: 0;
+						border-start-start-radius: var(--origam-field---rounded);
+						border-start-end-radius: 0;
+						border-end-end-radius: 0;
+						border-end-start-radius: var(--origam-field---rounded);
+					}
+
+					&--end {
+						border-top-width: var(--origam-field---border-width);
+						border-bottom-width: var(--origam-field---border-width);
+						border-inline-end-width: var(--origam-field---border-width);
+						border-inline-start-width: 0;
+						border-start-start-radius: 0;
+						border-start-end-radius: var(--origam-field---rounded);
+						border-end-end-radius: var(--origam-field---rounded);
+						border-end-start-radius: 0;
+					}
+
+					&--notch {
+						border-bottom-width: var(--origam-field---border-width);
+						border-top-width: var(--origam-field---border-width);
+						border-inline-width: 0;
+						border-radius: 0;
+					}
+				}
+
+				#{$this}__label {
+					&#{$this}__label--floating {
+						transform: translateY(-50%);
+						transform-origin: center;
+						margin: 0 4px;
+					}
+				}
+
+				&#{$this}--active,
+				&#{$this}--focused {
+					#{$this}__outline--notch {
+						border-top-width: 0;
+					}
+				}
+			}
+
+			&-underlined {
+				--origam-field---border-width: 1px;
+				--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-width: 0;
+
+					&--start {
+						border-bottom-width: var(--origam-field---border-width);
+					}
+
+					&--end {
+						border-bottom-width: var(--origam-field---border-width);
+					}
+
+					&--notch {
+						border-bottom-width: var(--origam-field---border-width);
+					}
+				}
+
+				&:hover,
+				&#{$this}--focused {
+					--origam-field---border-opacity: 1;
+				}
+			}
+		}
+
+		&--size-small {
+			--origam-input__control---height: var(--origam-input__control---height-sm, 28px);
+			--origam-field__input---padding-top:    var(--origam-field__input---padding-block-sm, 2px);
+			--origam-field__input---padding-bottom: var(--origam-field__input---padding-block-sm, 2px);
+		}
+
+		&--size-default {
+			--origam-input__control---height: var(--origam-input__control---height-md, 36px);
+			--origam-field__input---padding-top:    var(--origam-field__input---padding-block-md, 6px);
+			--origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md, 6px);
+		}
+
+		&--size-large {
+			--origam-input__control---height: var(--origam-input__control---height-lg, 44px);
+			--origam-field__input---padding-top:    var(--origam-field__input---padding-block-lg, 10px);
+			--origam-field__input---padding-bottom: var(--origam-field__input---padding-block-lg, 10px);
+		}
+
+		&--size-x-large {
+			--origam-input__control---height: var(--origam-input__control---height-xl, 52px);
+			--origam-field__input---padding-top:    var(--origam-field__input---padding-block-xl, 14px);
+			--origam-field__input---padding-bottom: var(--origam-field__input---padding-block-xl, 14px);
+		}
+
+		&--rounded-shaped {
+			border-start-start-radius: var(--origam-field---border-radius-rounded, 16px);
+			border-start-end-radius: 0;
+			border-end-start-radius: 0;
+			border-end-end-radius: var(--origam-field---border-radius-rounded, 16px);
+		}
+
+		&--rounded-shaped-invert {
+			border-start-start-radius: 0;
+			border-start-end-radius: var(--origam-field---border-radius-rounded, 16px);
+			border-end-start-radius: var(--origam-field---border-radius-rounded, 16px);
+			border-end-end-radius: 0;
+		}
+
 		@media (hover: hover) {
 			&:hover {
 				#{$this}__clearable {
@@ -630,11 +1032,12 @@ defineExpose({
 				opacity: 1;
 			}
 		}
-	}
-</style>
 
-<style>
-	:root {
-		--origam-field__label---font-size: 0.75em;
+		@media(prefers-reduced-motion: no-preference) {
+			#{$this}__label {
+				transition: .15s cubic-bezier(.4, 0, .2, 1);
+				transition-property: opacity, transform
+			}
+		}
 	}
 </style>