origam 2.3.0 → 2.6.1

package/dist/src/components/Drawer/OrigamDrawer.vue

@@ -4,19 +4,12 @@
 			:to="teleportDrawer"
 			defer
 	>
-		<!--
-			`<origam-transition>` wraps the conditional <component v-if>
-			so the drawer animates on mount/unmount instead of popping
-			in / out. Default transition is `origam-transition--slide-x`
-			(horizontal slide keyframes shipped by OrigamSlideX). The
-			teleport itself stays mounted so transition events fire on
-			the inner element.
-		-->
 		<origam-transition :transition="transition">
 			<component
 					:is="tag"
 					v-if="isActive"
 					:ref="rootEl"
+					:aria-label="props.name || 'Navigation'"
 					:class="drawerClasses"
 					:style="drawerStyles"
 					v-bind="{...scopeId, ...$attrs}"
@@ -60,10 +53,11 @@
 	</teleport>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ComputedRef,
+  isRef,
   nextTick,
   onBeforeMount,
   Ref,
@@ -132,8 +126,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 },
   density: { type: null, required: false },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
@@ -249,10 +243,11 @@ const { layoutItemStyles, layoutItemScrimStyles, layoutId } = useLayoutItem({
     () => props.absolute || isSticky.value && typeof isStuck.value !== "string"
   )
 });
-const isLayoutOrphan = computed(() => layoutId.value === "origam-layout-orphan");
+const resolvedLayoutId = computed(() => isRef(layoutId) ? layoutId.value : layoutId);
+const isLayoutOrphan = computed(() => resolvedLayoutId.value === "origam-layout-orphan");
 const teleportDrawer = computed(() => {
   if (isLayoutOrphan.value) return void 0;
-  return `#${layoutId.value} .origam-layout__wrapper`;
+  return `#${resolvedLayoutId.value} .origam-layout__wrapper`;
 });
 const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles });
 const scrimStyles = computed(() => ({
@@ -465,6 +460,13 @@ defineExpose({
 	// keyframe transforms below are stomped → drawer never animates
 	// visibly.
 
+	@media (prefers-reduced-motion: reduce) {
+		.origam-transition--drawer-enter-active,
+		.origam-transition--drawer-leave-active {
+			transition-duration: 0.01ms !important;
+		}
+	}
+
 	.origam-transition--drawer {
 		&-enter-active,
 		&-leave-active {

package/dist/src/components/EmptyState/OrigamEmptyState.vue

@@ -0,0 +1,241 @@
+<template>
+	<component
+			:is="tag"
+			:class="emptyStateClasses"
+			:style="emptyStateStyles"
+			role="status"
+			aria-live="polite"
+	>
+		<slot v-if="hasDefaultSlot"/>
+
+		<template v-else>
+			<div
+					class="origam-empty-state__icon"
+					aria-hidden="true"
+			>
+				<slot name="icon">
+					<origam-icon
+							:icon="resolvedIcon"
+							class="origam-empty-state__icon-glyph"
+					/>
+				</slot>
+			</div>
+
+			<div
+					v-if="hasTitle"
+					class="origam-empty-state__title"
+					:style="titleTypographyStyles"
+			>
+				<slot name="title">{{ title }}</slot>
+			</div>
+
+			<div
+					v-if="hasDescription"
+					class="origam-empty-state__description"
+					:style="descriptionTypographyStyles"
+			>
+				<slot name="description">{{ description }}</slot>
+			</div>
+
+			<div
+					v-if="hasActions"
+					class="origam-empty-state__actions"
+			>
+				<slot name="actions"/>
+			</div>
+		</template>
+	</component>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  StyleValue,
+  useSlots
+} from "vue";
+import { OrigamIcon } from "../Icon";
+import { useTypography } from "../../composables";
+import { EMPTY_STATE_PRESET_CONFIG } from "../../consts/EmptyState/empty-state.const";
+const props = defineProps({
+  preset: { type: String, required: false, default: "no-data" },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  icon: { type: null, required: false },
+  iconColor: { type: String, required: false },
+  size: { type: String, required: false, default: "md" },
+  align: { type: String, required: false, default: "center" },
+  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: "div" },
+  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 slots = useSlots();
+const presetConfig = computed(() => EMPTY_STATE_PRESET_CONFIG[props.preset]);
+const resolvedIcon = computed(() => props.icon ?? presetConfig.value.icon);
+const resolvedIntent = computed(() => props.iconColor ?? presetConfig.value.intent);
+const hasDefaultSlot = computed(() => Boolean(slots.default));
+const hasTitle = computed(() => Boolean(slots.title) || (props.title?.length ?? 0) > 0);
+const hasDescription = computed(() => Boolean(slots.description) || (props.description?.length ?? 0) > 0);
+const hasActions = computed(() => Boolean(slots.actions));
+const emptyStateClasses = computed(() => {
+  return [
+    "origam-empty-state",
+    `origam-empty-state--size-${props.size}`,
+    `origam-empty-state--align-${props.align}`,
+    `origam-empty-state--preset-${props.preset}`,
+    `origam-empty-state--intent-${resolvedIntent.value}`,
+    props.class
+  ];
+});
+const emptyStateStyles = computed(() => {
+  return [props.style];
+});
+const { typographyStyles: titleTypographyStyles } = useTypography(props, "empty-state__title");
+const { typographyStyles: descriptionTypographyStyles } = useTypography(props, "empty-state__description");
+defineExpose({
+  resolvedIcon,
+  resolvedIntent,
+  hasDefaultSlot,
+  hasTitle,
+  hasDescription,
+  hasActions
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-empty-state {
+		--origam-empty-state---resolved-padding-block: var(--origam-empty-state---padding-block-md, var(--origam-empty-state---padding-block, 40px));
+		--origam-empty-state---resolved-padding-inline: var(--origam-empty-state---padding-inline, 24px);
+		--origam-empty-state---resolved-gap: var(--origam-empty-state---gap-md, var(--origam-empty-state---gap, 16px));
+		--origam-empty-state---resolved-max-width: var(--origam-empty-state---max-width, 480px);
+		--origam-empty-state---resolved-icon-size: var(--origam-empty-state__icon---size-md, var(--origam-empty-state__icon---size, 64px));
+		--origam-empty-state---resolved-icon-color: var(--origam-empty-state__icon---color, var(--origam-color__text---secondary, #525252));
+		--origam-empty-state---resolved-title-color: var(--origam-empty-state__title---color, var(--origam-color__text---primary, #171717));
+		--origam-empty-state---resolved-title-font-size: var(--origam-empty-state__title---font-size-md, var(--origam-empty-state__title---font-size, 1.25rem));
+		--origam-empty-state---resolved-description-color: var(--origam-empty-state__description---color, var(--origam-color__text---secondary, #525252));
+		--origam-empty-state---resolved-description-font-size: var(--origam-empty-state__description---font-size-md, var(--origam-empty-state__description---font-size, 1rem));
+
+		display: flex;
+		flex-direction: column;
+		gap: var(--origam-empty-state---resolved-gap);
+		padding-block: var(--origam-empty-state---resolved-padding-block);
+		padding-inline: var(--origam-empty-state---resolved-padding-inline);
+		box-sizing: border-box;
+		width: 100%;
+	}
+
+	.origam-empty-state__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--origam-empty-state---resolved-icon-color);
+		font-size: var(--origam-empty-state---resolved-icon-size);
+		line-height: 1;
+	}
+
+	.origam-empty-state__icon-glyph {
+		font-size: inherit;
+		color: inherit;
+	}
+
+	.origam-empty-state__title {
+		color: var(--origam-empty-state---resolved-title-color);
+		font-family: var(--origam-empty-state__title---font-family, Inter, system-ui, sans-serif);
+		font-weight: var(--origam-empty-state__title---font-weight, 600);
+		font-size: var(--origam-empty-state__title---font-size, var(--origam-empty-state---resolved-title-font-size));
+		line-height: var(--origam-empty-state__title---line-height, 1.375);
+		margin: 0;
+	}
+
+	.origam-empty-state__description {
+		color: var(--origam-empty-state---resolved-description-color);
+		font-family: var(--origam-empty-state__description---font-family, Inter, system-ui, sans-serif);
+		font-weight: var(--origam-empty-state__description---font-weight, 400);
+		font-size: var(--origam-empty-state__description---font-size, var(--origam-empty-state---resolved-description-font-size));
+		line-height: var(--origam-empty-state__description---line-height, 1.625);
+		max-width: var(--origam-empty-state---resolved-max-width);
+		margin: 0;
+	}
+
+	.origam-empty-state__actions {
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: var(--origam-empty-state__actions---gap, 12px);
+		margin-top: var(--origam-empty-state__actions---margin-top, 8px);
+	}
+
+	.origam-empty-state--align-center {
+		align-items: center;
+		text-align: center;
+	}
+
+	.origam-empty-state--align-center .origam-empty-state__description {
+		margin-inline: auto;
+	}
+
+	.origam-empty-state--align-left {
+		align-items: flex-start;
+		text-align: left;
+	}
+
+	.origam-empty-state--size-sm {
+		--origam-empty-state---resolved-padding-block: var(--origam-empty-state---padding-block-sm, 24px);
+		--origam-empty-state---resolved-gap: var(--origam-empty-state---gap-sm, 12px);
+		--origam-empty-state---resolved-icon-size: var(--origam-empty-state__icon---size-sm, 48px);
+		--origam-empty-state---resolved-title-font-size: var(--origam-empty-state__title---font-size-sm, 1.125rem);
+		--origam-empty-state---resolved-description-font-size: var(--origam-empty-state__description---font-size-sm, 0.875rem);
+	}
+
+	.origam-empty-state--size-md {
+		--origam-empty-state---resolved-padding-block: var(--origam-empty-state---padding-block-md, 40px);
+		--origam-empty-state---resolved-gap: var(--origam-empty-state---gap-md, 16px);
+		--origam-empty-state---resolved-icon-size: var(--origam-empty-state__icon---size-md, 64px);
+		--origam-empty-state---resolved-title-font-size: var(--origam-empty-state__title---font-size-md, 1.25rem);
+		--origam-empty-state---resolved-description-font-size: var(--origam-empty-state__description---font-size-md, 1rem);
+	}
+
+	.origam-empty-state--size-lg {
+		--origam-empty-state---resolved-padding-block: var(--origam-empty-state---padding-block-lg, 64px);
+		--origam-empty-state---resolved-gap: var(--origam-empty-state---gap-lg, 24px);
+		--origam-empty-state---resolved-icon-size: var(--origam-empty-state__icon---size-lg, 96px);
+		--origam-empty-state---resolved-title-font-size: var(--origam-empty-state__title---font-size-lg, 1.5rem);
+		--origam-empty-state---resolved-description-font-size: var(--origam-empty-state__description---font-size-lg, 1.125rem);
+	}
+
+	.origam-empty-state--intent-neutral {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__text---secondary);
+	}
+
+	.origam-empty-state--intent-primary {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__action--primary---bg);
+	}
+
+	.origam-empty-state--intent-secondary {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__action--secondary---bg);
+	}
+
+	.origam-empty-state--intent-ghost {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__text---secondary);
+	}
+
+	.origam-empty-state--intent-success {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__feedback--success---bg);
+	}
+
+	.origam-empty-state--intent-warning {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__feedback--warning---bg);
+	}
+
+	.origam-empty-state--intent-danger {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__feedback--danger---bg);
+	}
+
+	.origam-empty-state--intent-info {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__feedback--info---bg);
+	}
+</style>

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="expansionPanelClasses"
 			:style="expansionPanelStyles"
 	>
@@ -93,11 +94,14 @@
 			</slot>
 		</template>
 
-		<slot name="default"/>
+		<slot
+				v-else
+				name="default"
+		/>
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, provide, ref, StyleValue, toRef, useSlots } from "vue";
 import { OrigamExpansionPanelContent, OrigamExpansionPanelHeader, OrigamProgress } from "../../components";
 import {
@@ -112,6 +116,7 @@ import {
   useStateEffect,
   useStyle
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
 import { PROGRESS_TYPE } from "../../enums";
 const _props = defineProps({
@@ -120,8 +125,8 @@ const _props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, 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 },
@@ -169,6 +174,11 @@ const _props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], 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 },
   content: { type: null, required: false },
   eager: { type: Boolean, required: false },
   loading: { type: [Boolean, Number, Object], required: false },

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

@@ -3,8 +3,12 @@
 		<component
 				:is="tag"
 				v-show="isSelected"
+				:id="`expansion-panel-content-${expansionPanel.id}`"
+				v-contrast
+				:aria-labelledby="`expansion-panel-header-${expansionPanel.id}`"
 				:class="expansionPanelContentClasses"
 				:style="expansionPanelContentStyles"
+				role="region"
 		>
 			<div class="origam-expansion-panel-content__wrapper">
 				<template v-if="loaderConfig.isActive && loaderConfig.kind === 'skeleton'">
@@ -47,9 +51,10 @@
 	</origam-expand-y>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, StyleValue, toRef } from "vue";
 import { OrigamExpandY, OrigamProgress, OrigamSkeleton } from "../../components";
+import { vContrast } from "../../directives";
 import {
   useBorder,
   useBothColor,
@@ -66,8 +71,8 @@ import { PROGRESS_TYPE } from "../../enums";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
 const props = defineProps({
   content: { type: null, 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: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },

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

@@ -1,7 +1,10 @@
 <template>
 	<component
 			:is="tag"
+			:id="`expansion-panel-header-${expansionPanel.id}`"
 			v-ripple="ripple"
+			v-contrast
+			:aria-controls="`expansion-panel-content-${expansionPanel.id}`"
 			:aria-expanded="isSelected"
 			:class="expansionPanelHeaderClasses"
 			:disabled="isDisabled"
@@ -82,7 +85,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, StyleValue, toRef, useSlots } from "vue";
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import {
@@ -93,10 +96,11 @@ import {
   useHover,
   useProps,
   useStateEffect,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
-import { vRipple } from "../../directives";
+import { vContrast, vRipple } from "../../directives";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
   expandIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_DOWN },
@@ -106,8 +110,8 @@ const props = defineProps({
   static: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
   title: { type: 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: "button" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -148,7 +152,12 @@ const props = defineProps({
   ripple: { type: [Boolean, Object], 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 },
+  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 }
 });
 defineEmits(["click:append", "click:prepend"]);
 const { filterProps } = useProps(props);
@@ -198,6 +207,7 @@ const {
   marginStyles
 } = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { typographyStyles } = useTypography(props, "expansion-panel__header");
 const expansionPanelHeaderStyles = computed(() => {
   return [
     colorStyles.value,
@@ -205,6 +215,7 @@ const expansionPanelHeaderStyles = computed(() => {
     borderStyles.value,
     paddingStyles.value,
     marginStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });

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

@@ -111,13 +111,14 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
 import { OrigamDefaultsProvider, OrigamExpansionPanel } from "../../components";
 import {
   useActive,
   useBothColor,
   useDensity,
+  useElevation,
   useGroup,
   useHover,
   useLoader,
@@ -135,8 +136,8 @@ const props = defineProps({
   expandIcon: { type: null, required: false },
   collapseIcon: { type: null, required: false },
   hideActions: { type: Boolean, 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: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },

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

@@ -1,5 +1,6 @@
 <template>
 	<div
+			v-contrast
 			:class="fieldClasses"
 			:style="fieldStyles"
 			v-bind="attrs"
@@ -165,7 +166,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import { OrigamAvatar, OrigamExpandX, OrigamIcon, OrigamLabel, OrigamProgress, OrigamSkeleton } from "../../components";
 import {
@@ -181,8 +182,10 @@ import {
   useSize,
   useStateEffect,
   useStyle,
+  useTypography,
   useVariant
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { DENSITY, EASING, KEYBOARD_VALUES, MDI_ICONS, PROGRESS_TYPE, VARIANT_INPUT } from "../../enums";
 import { animate, convertToUnit, getUid, nullifyTransforms } from "../../utils";
 const _props = defineProps({
@@ -199,14 +202,16 @@ 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 },
   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, 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 },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -246,6 +251,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, default: VARIANT_INPUT.OUTLINED },
@@ -297,6 +307,7 @@ const slotProps = computed(() => {
     onFocus: handleFocus
   };
 });
+const { typographyStyles } = useTypography(props, "field__label");
 const origamLabelRef = ref();
 const hasLabel = computed(() => {
   return !props.singleLine && !!(props.label || slots.label);
@@ -308,6 +319,9 @@ const labelProps = computed(() => {
     for: id.value,
     text: props.label,
     ...defaultLabelProps,
+    // BEM-child typography — emits --origam-field__label---font-size on the
+    // label element so the SCSS floating rule and JS animation scale read it.
+    style: typographyStyles.value,
     // 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
@@ -334,6 +348,9 @@ const floatingLabelProps = computed(() => {
     floating: true,
     ref: "origamFloatingLabelRef",
     ...defaultFloatingLabelProps,
+    // BEM-child typography — same var as labelProps so the floating
+    // label's font-size SCSS rule and the JS scale animation both read it.
+    style: typographyStyles.value,
     // 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.
@@ -485,7 +502,7 @@ defineExpose({
 		font-size: 16px;
 		letter-spacing: 0.009375em;
 		max-width: 100%;
-		border-radius: var(--origam-field---rounded);
+		border-radius: var(--origam-field---border-radius, 8px);
 		contain: layout;
 		flex: 1 0;
 		grid-area: control;
@@ -495,7 +512,7 @@ defineExpose({
 		&__skeleton {
 			width: 100%;
 			min-height: var(--origam-field__skeleton---min-height, var(--origam-input__control---height, 36px));
-			border-radius: var(--origam-field---rounded);
+			border-radius: var(--origam-field---border-radius, 8px);
 			grid-column: 1 / -1;
 			grid-row: 1;
 		}
@@ -646,7 +663,7 @@ defineExpose({
 			max-width: calc(100% - var(--origam-field__input---padding-start, 0) - var(--origam-field__input---padding-end, 0));
 			pointer-events: none;
 			position: absolute;
-			top: calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density) - 8px);
+			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-property: opacity, transform;
@@ -853,7 +870,7 @@ defineExpose({
 
 			&-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;
+				border-radius: var(--origam-field---border-radius, 8px) var(--origam-field---border-radius, 8px) 0 0;
 				--origam-field__input---padding-top: 20px;
 
 				#{$this}__outlines {
@@ -909,10 +926,10 @@ defineExpose({
 						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-start-radius: var(--origam-field---border-radius, 8px);
 						border-start-end-radius: 0;
 						border-end-end-radius: 0;
-						border-end-start-radius: var(--origam-field---rounded);
+						border-end-start-radius: var(--origam-field---border-radius, 8px);
 					}
 
 					&--end {
@@ -921,8 +938,8 @@ defineExpose({
 						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-start-end-radius: var(--origam-field---border-radius, 8px);
+						border-end-end-radius: var(--origam-field---border-radius, 8px);
 						border-end-start-radius: 0;
 					}