origam 2.8.1 → 2.10.0

package/dist/src/components/Avatar/OrigamAvatarGroup.vue

@@ -49,9 +49,10 @@
 
 <script lang="ts" setup>
 import { OrigamAvatar, OrigamDefaultsProvider } from "../../components";
-import { useActive, useDensity, useHover, useProps, useRtl, useStateEffect, useStyle } from "../../composables";
+import { useActive, useDensity, useHover, usePassedProps, useProps, useRtl, useStateEffect, useStyle } from "../../composables";
 import { vClickOutside } from "../../directives";
 import { DIRECTION } from "../../enums";
+import { omitUndefined } from "../../utils";
 import { computed, mergeProps, ref } from "vue";
 const props = defineProps({
   items: { type: Array, required: false, default: () => [] },
@@ -104,18 +105,19 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-avatar": {
-    density: props.density,
-    size: props.size,
-    color: props.color,
-    bgColor: props.bgColor,
-    rounded: props.rounded,
-    elevation: props.elevation,
-    border: props.border,
-    borderColor: props.borderColor,
-    borderStyle: props.borderStyle
-  }
+  "origam-avatar": omitUndefined({
+    density: wasPropPassed("density") ? props.density : void 0,
+    size: wasPropPassed("size") ? props.size : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
+    rounded: wasPropPassed("rounded") ? props.rounded : void 0,
+    elevation: wasPropPassed("elevation") ? props.elevation : void 0,
+    border: wasPropPassed("border") ? props.border : void 0,
+    borderColor: wasPropPassed("borderColor") ? props.borderColor : void 0,
+    borderStyle: wasPropPassed("borderStyle") ? props.borderStyle : void 0
+  })
 }));
 defineEmits(["update:active", "update:hover"]);
 const { filterProps } = useProps(props);
@@ -246,6 +248,23 @@ defineExpose({
 			margin-inline-end: var(--origam-avatar-group__item---margin-inline-end);
 		}
 
+		// Separation ring — a STRUCTURAL concern of the group (overlapping
+		// avatars need a visible seam to stay legible), orthogonal to each
+		// avatar's own themed `box-shadow` (elevation / cartoon hard-shadow
+		// signature / …). `outline` is used on purpose instead of layering
+		// a second `box-shadow`: it is a distinct CSS property, so it can
+		// never collide with, or need to be comma-combined with, the
+		// avatar's own `--origam-avatar---box-shadow` — the two coexist
+		// without any specificity/ordering trick. Applies to every stacked
+		// avatar (`__item`) AND the "+N" overflow chip (`__rest`), since
+		// both participate in the same overlapping stack — see #263.
+		&__item,
+		&__rest {
+			outline-color: var(--origam-avatar-group__item---outline-color);
+			outline-style: var(--origam-avatar-group__item---outline-style);
+			outline-width: var(--origam-avatar-group__item---outline-width);
+		}
+
 		&--expand-on-hover,
 		&--expand-on-click {
 			#{$this}__item:not(:first-child),

package/dist/src/components/Btn/OrigamBtn.vue

@@ -649,10 +649,19 @@ defineExpose({
 			// tokens, so it follows color/intent and theme), while the resting
 			// siblings stay outlined. This is what makes a btn-toggle read as
 			// a row of real buttons rather than a flat segmented strip.
+			//
+			// `-background-color-active` is a DEDICATED token, separate from
+			// the plain `-background-color` one: a theme is free to keep
+			// outlined buttons unfilled at rest (background-color:
+			// transparent, e.g. a print/minimalist identity) without also
+			// erasing the active/selected indicator — the two states are
+			// no longer forced to share one token. Themes that don't
+			// declare it fall straight through to the existing behaviour
+			// (their own `-background-color`), so this is additive only.
 			&#{$this}--active {
-				background-color: var(--origam-btn---background-color) !important;
+				background-color: var(--origam-btn---background-color-active, var(--origam-btn---background-color)) !important;
 				color: var(--origam-btn---color);
-				border-color: var(--origam-btn---background-color);
+				border-color: var(--origam-btn---background-color-active, var(--origam-btn---background-color));
 			}
 		}
 

package/dist/src/components/Btn/OrigamBtnGroup.vue

@@ -28,14 +28,17 @@
 <script lang="ts" setup>
 import { OrigamBtn, OrigamDefaultsProvider } from "../../components";
 import {
+  useDefaults,
   useDensity,
   useProps,
+  useSize,
   useStateEffect,
-  useStyle
+  useStyle,
+  useVariant
 } from "../../composables";
 import { DENSITY } from "../../enums";
 import { computed, StyleValue, useSlots } from "vue";
-const props = defineProps({
+const _props = defineProps({
   divided: { type: Boolean, required: false },
   items: { type: Array, required: false, default: () => [] },
   tag: { type: String, required: false, default: "div" },
@@ -80,14 +83,19 @@ const props = defineProps({
   paddingInline: { type: [Boolean, Number, String], required: false },
   hover: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false }
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false }
 });
+const props = useDefaults(_props);
 const { filterProps } = useProps(props);
 const slotDefaults = computed(() => ({
   "origam-btn": {
+    variant: props.variant,
     density: props.density,
     color: props.color,
     bgColor: props.bgColor,
+    size: props.size,
     // New API: `hover` / `active` accept boolean | IHoverState |
     // IActiveState; pass-through propagates the parent's intent
     // override to each child OrigamBtn.
@@ -101,6 +109,8 @@ const hasItems = computed(() => {
   return slots.default || !!items.value;
 });
 const { densityClasses } = useDensity(props);
+const { sizeClasses } = useSize(props);
+const { variantClasses } = useVariant(props);
 const {
   colorStyles,
   borderClasses,
@@ -137,6 +147,8 @@ const btnGroupClasses = computed(() => {
     roundedClasses.value,
     marginClasses.value,
     paddingClasses.value,
+    variantClasses.value,
+    sizeClasses.value,
     props.class
   ];
 });
@@ -155,13 +167,31 @@ defineExpose({
 	.origam-btn-group {
 		display: inline-flex;
 		flex-wrap: nowrap;
-		align-items: center;
+		align-items: stretch;
+		// `overflow: hidden` does the whole job of shaping the children:
+		// per CSS, the clip follows the PADDING-BOX curvature — the outer
+		// radius minus the border width — so square-cornered children are
+		// clipped flush against the inside of the border ring, on any
+		// border thickness, with the browser computing the inner radius.
 		overflow: hidden;
 		vertical-align: middle;
 
 		max-width: 100%;
 		min-width: 0;
-		min-height: calc(var(--origam-btn-group---height, 36px) + var(--origam-btn-group---density, 0));
+		// `--origam-btn-group---height` (own custom property, set by the
+		// `&--size-*` rules below) — NOT `--origam-btn---height` directly:
+		// that token is scoped LOCALLY to each Btn instance by its own
+		// size modifier class, it does not cascade from a sibling Split
+		// button down to the group. `box-sizing: border-box` makes this a
+		// TOTAL height (border included) — matching how Btn's own `height`
+		// already works — so the group's border-box height equals a themed
+		// btn's border-box height by construction, never taller by the
+		// border's own width. Children are `height: auto` + `align-items:
+		// stretch` (see :deep below): they fill the content box inside the
+		// border, exactly like a btn's own content sits inside its own
+		// border.
+		box-sizing: border-box;
+		height: calc(var(--origam-btn-group---height, 36px) + var(--origam-btn-group---density, 0px));
 
 		border-width: var(--origam-btn-group---border-width);
 		border-style: var(--origam-btn-group---border-style);
@@ -215,36 +245,177 @@ defineExpose({
 			--origam-btn-group---density: -8px;
 		}
 
-		:deep(.origam-btn) {
-			border-color: inherit;
+		// Same height values as `OrigamBtn`'s own `&--size-*` rules, one for
+		// one — a themed `<origam-btn-toggle size="small">` must resolve to
+		// the exact height a standalone `size="small"` Btn does.
+		&--size-x-small {
+			--origam-btn-group---height: 20px;
+		}
 
-			&:not(:last-child) {
-				border-inline-end: none;
-			}
+		&--size-small {
+			--origam-btn-group---height: 28px;
+		}
+
+		&--size-default {
+			--origam-btn-group---height: 36px;
+		}
+
+		&--size-large {
+			--origam-btn-group---height: 44px;
+		}
+
+		&--size-x-large {
+			--origam-btn-group---height: 52px;
+		}
+
+		// Full parity with `OrigamBtn`'s own variant rules — same CSS
+		// custom properties, same literal values, one-for-one. A themed
+		// `origam-btn: { variant: 'outlined' }` (cartoon/geek/editorial)
+		// must produce the SAME border-width/border-color/background/
+		// box-shadow on the group as it does on a standalone Btn; the
+		// group is not allowed to fall back to a subset. Earlier passes
+		// only ported the `background-color` half of each rule (border/
+		// shadow were silently dropped), which is exactly what made the
+		// toggle read as "thin border, no shadow" next to a themed Btn's
+		// thick border + hard shadow under cartoon.
+		&--variant-flat {
+			box-shadow: none;
+		}
 
-			&:not(:first-child) {
-				border-inline-start: none;
+		&--variant-text,
+		&--variant-plain {
+			background-color: transparent !important;
+			box-shadow: none;
+		}
+
+		&--variant-elevated {
+			box-shadow: var(--origam-btn---box-shadow-elevated, var(--origam-shadow---md));
+		}
+
+		&--variant-tonal {
+			background-color: var(
+				--origam-btn---background-color-tonal,
+				var(--origam-color__surface---overlay)
+			) !important;
+			box-shadow: none;
+		}
+
+		&--variant-outlined {
+			background-color: transparent !important;
+			// Mirror the literal border-width into the SAME custom property
+			// `--origam-btn-group---inner-border-radius` calc()s against
+			// (see the base rule above) — that calc reads the CUSTOM
+			// PROPERTY, which this rule would otherwise never touch (it
+			// only ever set the literal `border-width` property directly),
+			// leaving the calc's border-width input silently at its
+			// pre-variant fallback of 0 regardless of the REAL rendered
+			// border. `calc(20px - 0px)` still LOOKS plausible, so this
+			// class of bug doesn't throw or visibly break — it just quietly
+			// gives the child's fill the wrong inset curve.
+			--origam-btn-group---border-width: var(--origam-btn---border-width-outlined, var(--origam-border__width---thin));
+			border-width: var(--origam-btn-group---border-width);
+			border-style: solid;
+			border-color: var(--origam-btn---border-color, currentColor);
+			box-shadow: none;
+		}
+
+		&--variant-ghost {
+			background-color: var(
+				--origam-btn---background-color-ghost,
+				color-mix(in srgb, currentColor 12%, transparent)
+			) !important;
+			// See the matching comment in `&--variant-outlined` above.
+			--origam-btn-group---border-width: var(--origam-btn---border-width-ghost, var(--origam-border__width---thin));
+			border-width: var(--origam-btn-group---border-width);
+			border-style: solid;
+			border-color: var(
+				--origam-btn---border-color-ghost,
+				color-mix(in srgb, currentColor 24%, transparent)
+			);
+			box-shadow: var(
+				--origam-btn---box-shadow-ghost,
+				0 0 0 1px color-mix(in srgb, currentColor 18%, transparent),
+				0 4px 18px 0 color-mix(in srgb, currentColor 28%, transparent),
+				0 1px 0 0 color-mix(in srgb, white 35%, transparent) inset
+			);
+
+			@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
+				backdrop-filter: var(--origam-btn---backdrop-filter-ghost, blur(8px));
+				-webkit-backdrop-filter: var(--origam-btn---backdrop-filter-ghost, blur(8px));
 			}
 		}
 
-		// The GROUP owns the rounding (outer corners, via its own
-		// border-radius + overflow:hidden) and the elevation (a single
-		// shadow around the whole group). Child buttons are forced flat
-		// and shadowless so a per-child `rounded` / `elevation` (own prop
-		// or active/hover state) can't break the unified segmented look —
-		// e.g. rounded pills with the group surface bleeding through the
-		// gaps. `!important` is intentional: the group's design wins.
+		// A btnGroup/btnToggle reads as ONE button with internal
+		// separators — not N bordered buttons glued together. The GROUP
+		// owns the ONE visible border, the ONE outer radius and the ONE
+		// elevation; every child button is rendered "naked" (zero border
+		// of its own, zero radius, zero shadow) regardless of what the
+		// theme's OWN `origam-btn` config would normally paint on a
+		// standalone button — a themed `origam-btn: { border: true }`
+		// would otherwise stack a second border directly on top of the
+		// group's, reading as a visibly doubled/thicker line. `!important`
+		// is intentional: the group's design wins over the child's own
+		// resolved theme props.
+		//
+		// `overflow: hidden` alone clips the group to its own rounded
+		// shape but does NOT round the first/last child's own corners —
+		// a fully square button sitting inside a rounded clip leaves a
+		// visible gap at each of the 4 corners (the group's background
+		// showing through a "square peg in a round hole"). The first and
+		// last child must adopt the group's INNER radius — the outer
+		// radius minus the border's own width, i.e. the curve of the
+		// surface the border ring encloses, not the outer edge of the
+		// border itself. Using the outer radius here (as a previous pass
+		// did) is off by exactly `border-width`: on a thick border
+		// (cartoon's 3px) the active segment's fill corner curved too
+		// early, leaving a sliver of the group's own background visible
+		// between the fill and the inside of the border ring.
 		:deep(.origam-btn) {
+			border-width: 0 !important;
+			border-style: none !important;
 			border-radius: 0 !important;
 			box-shadow: none !important;
+			// `auto` releases the child's own explicit height so
+			// `align-items: stretch` fills the group's content box —
+			// the child occupies the inside of the border ring exactly
+			// like a standalone btn's content sits inside its own border.
+			height: auto !important;
+			min-height: 0 !important;
+
+			// Resting (non-selected) segments stay fully naked — no
+			// background of their own — so the group's ONE surface
+			// (painted above via `variantClasses`) shows through evenly
+			// across the whole strip instead of each child individually
+			// re-painting its own themed variant background (that
+			// per-child repaint, at varying opacity/tint per button, is
+			// what produced the inconsistent/blank-looking group surface
+			// bug). The SELECTED segment inside an `OrigamBtnToggle`
+			// keeps its own active-state background — that fill is the
+			// documented, intentional "reads as a real filled button"
+			// affordance for the current selection (see `OrigamBtn`'s
+			// `&--variant-outlined &--active` / `&--variant-tonal
+			// &--active` rules) and is NOT the bug being fixed here.
+			&:not(.origam-btn--active) {
+				background-color: transparent !important;
+			}
+
+			// NO per-corner radius overrides: children stay square
+			// (`border-radius: 0` above) and the group's `overflow: hidden`
+			// clips them to its own inner curvature — the browser derives
+			// the inner radius (outer − border-width) natively.
 		}
 
+		// `divided` adds back a THIN, intentional separator between
+		// segments — NOT the child's own border reinstated (still zeroed
+		// on every other side by the block above). Colour matches the
+		// group's own resolved border color so it reads as part of the
+		// same single surface, not a second competing border.
 		&--divided {
 			:deep(.origam-btn) {
 				&:not(:last-child) {
-					border-inline-end-width: thin;
-					border-inline-end-style: solid;
-					border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+					border-inline-end-width: thin !important;
+					border-inline-end-style: solid !important;
+					border-inline-end-color: var(--origam-btn-group---border-color, currentColor) !important;
 				}
 			}
 		}
@@ -259,6 +430,17 @@ defineExpose({
 		--origam-btn-group---border-width: var(--origam-btn---border-width, 0);
 		--origam-btn-group---border-style: var(--origam-btn---border-style, solid);
 		--origam-btn-group---border-color: var(--origam-btn---border-color, currentColor);
+		/* Base surface fallback for the `flat`/`elevated`/unset variants
+		 * (the ones that DON'T override background via their own
+		 * `--variant-*` rule above) — mirrors `OrigamBtn`'s own base
+		 * `background-color: var(--origam-btn---background-color, …)`
+		 * rule so the group's resting surface always matches the
+		 * theme's btn, never a hardcoded/transparent default. */
+		--origam-btn-group---background-color: var(--origam-btn---background-color, transparent);
+		/* Same fallback chain as background-color/border-* above — without
+		 * it the group's text/currentColor (used by outlined/ghost border
+		 * fallbacks) drifted from Btn's own default instead of matching. */
+		--origam-btn-group---color: var(--origam-btn---color, rgba(30, 30, 30, 0.87));
 
 	}
 </style>

package/dist/src/components/Btn/OrigamBtnToggle.vue

@@ -30,6 +30,7 @@
 <script lang="ts" setup>
 import { OrigamBtnGroup } from "../../components";
 import {
+  useDefaults,
   useGroup,
   useProps,
   useStyle
@@ -37,7 +38,7 @@ import {
 import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts";
 import { DENSITY } from "../../enums";
 import { computed, ref, StyleValue, useSlots } from "vue";
-const props = defineProps({
+const _props = defineProps({
   divided: { type: Boolean, required: false },
   items: { type: Array, required: false, default: () => [] },
   tag: { type: String, required: false, default: "div" },
@@ -83,6 +84,8 @@ const props = defineProps({
   hover: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
   disabled: { type: Boolean, required: false },
   modelValue: { type: null, required: false },
   multiple: { type: Boolean, required: false },
@@ -90,6 +93,7 @@ const props = defineProps({
   max: { type: Number, required: false },
   selectedClass: { type: String, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const { isSelected, next, prev, select, selected } = useGroup(props, ORIGAM_BTN_TOGGLE_KEY);

package/dist/src/components/Card/OrigamCard.vue

@@ -146,6 +146,7 @@ import { OrigamCardHeader, OrigamCardText, OrigamImg, OrigamProgress, OrigamSkel
 import {
   useActive,
   useAdjacent,
+  useDefaults,
   useDensity,
   useDimension,
   useHover,
@@ -160,7 +161,7 @@ import {
 import { vContrast, vRipple } from "../../directives";
 import { DENSITY, PROGRESS_TYPE } from "../../enums";
 import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
-const props = defineProps({
+const _props = defineProps({
   disabled: { type: Boolean, required: false },
   flat: { type: Boolean, required: false },
   hover: { type: Boolean, required: false },
@@ -236,12 +237,14 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["click:append", "click:prepend", "update:active", "update:hover"]);
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const link = useLink(props, attrs);
 const { isHover, hoverState, hoverClasses, onMouseenter, onMouseleave } = useHover(props);
 const { isActive, activeState, activeClasses, onActive } = useActive(props);
+const flatForElevation = computed(() => props.elevation != null ? false : props.flat);
 const {
   colorClasses,
   colorStyles,
@@ -262,7 +265,7 @@ const {
   hoverState,
   activeState,
   computed(() => !!props.disabled),
-  toRef(props, "flat")
+  flatForElevation
 );
 const {
   onClickPrepend: handleClickPrepend,

package/dist/src/components/Checkbox/OrigamCheckbox.vue

@@ -58,6 +58,7 @@
 <script lang="ts" setup>
 import { OrigamCheckboxBtn, OrigamInput } from "../../components";
 import {
+  useDefaults,
   useFocus,
   useMargin,
   usePadding,
@@ -68,7 +69,7 @@ import {
 import { DENSITY } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
-const props = defineProps({
+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 },
@@ -162,6 +163,7 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false }
 });
+const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
 defineSlots();
 const { filterProps } = useProps(props);

package/dist/src/components/Chip/OrigamChip.vue

@@ -365,6 +365,8 @@ defineExpose({
 
 		background-color: var(--origam-chip---background-color);
 		color: var(--origam-chip---color);
+		backdrop-filter: var(--origam-chip---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-chip---backdrop-filter, none);
 
 		&__content {
 			align-items: center;

package/dist/src/components/Code/OrigamCode.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			v-contrast
 			:class="codeClasses"
 			:style="codeStyles"
@@ -82,6 +82,7 @@ import {
   useDimension,
   useElevation,
   useLocale,
+  useDefaults,
   useMargin,
   usePadding,
   useRounded,
@@ -91,7 +92,7 @@ import { vContrast } from "../../directives";
 import { CODE_DEFAULTS } from "../../consts";
 import { CODE_LANG } from "../../enums";
 import { parseHighlightLines } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   code: { type: String, required: false, default: void 0 },
   lang: { type: null, required: false, default: CODE_LANG.PLAINTEXT },
   lineNumbers: { type: Boolean, required: false, default: false },
@@ -153,6 +154,7 @@ const props = defineProps({
   lineHeight: { type: String, required: false },
   letterSpacing: { type: String, required: false }
 });
+const props = useDefaults(_props);
 const emit = defineEmits(["copy"]);
 const slots = useSlots();
 const { borderClasses, borderStyles } = useBorder(props);

package/dist/src/components/ColorPicker/OrigamColorPickerPreview.vue

@@ -148,7 +148,7 @@ defineExpose({
 			width: 100%;
 			margin: 0;
 
-			:deep(.origam-slider-track__fill) {
+			:deep(.origam-slider-field-track__fill) {
 				display: none;
 			}
 		}

package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue

@@ -128,12 +128,12 @@
 
 <script lang="ts" setup>
 import { OrigamColorPicker, OrigamMenu, OrigamSheet, OrigamTextField, OrigamTranslateScale } from "../../components";
-import { useLocale, useProps, useVModel, useStyle } from "../../composables";
+import { useDefaults, useLocale, useProps, useVModel, useStyle } from "../../composables";
 import { COLOR_NULL, ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, HSVtoCSS, matchesSelector } from "../../utils";
 import { computed, inject, nextTick, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
-const props = defineProps({
+const _props = defineProps({
   menu: { type: Boolean, required: false },
   menuProps: { type: Object, required: false },
   openOnClear: { type: Boolean, required: false },
@@ -251,6 +251,7 @@ const props = defineProps({
   prependIcon: { type: null, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) }
 });
+const props = useDefaults(_props);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const origamTextFieldRef = ref();
@@ -403,6 +404,22 @@ defineExpose(forwardRefs({
 			padding-bottom: 0;
 			padding-inline-start: 0;
 			overflow: hidden;
+			border-start-start-radius: var(--origam-field---border-radius, 8px);
+			border-end-start-radius: var(--origam-field---border-radius, 8px);
+
+			// The swatch must sit FLUSH against the field's inline-start edge.
+			// `OrigamField` applies `--origam-field---padding-start` to the whole
+			// grid (prepend-inner included), so any consumer that raises it pushes
+			// the swatch inward and opens a gap between the colour and the left
+			// border. The Theme Builder does exactly this — it forces
+			// `--origam-field---padding-start: 14px` on prepended control fields to
+			// widen the outline's start leg so the left corner rounds — which left
+			// a ~14px gap in front of the swatch. Cancel the padding for the
+			// prepend cell only (negative margin = -padding-start) so the swatch
+			// bleeds back to the edge while the outline keeps its rounded corner.
+			// No-op when padding-start resolves to 0 (the component's own default),
+			// so there is zero regression for plain consumers.
+			margin-inline-start: calc(-1 * var(--origam-field---padding-start, 0px));
 
 			> .origam-sheet {
 				width: var(--origam-color-picker-field__swatch---width, 24px);
@@ -417,6 +434,39 @@ defineExpose(forwardRefs({
 			font-family: var(--origam-font__family---mono);
 			font-size: 0.875em;
 			letter-spacing: 0.03em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			min-width: 0;
+		}
+
+		// `.origam-field__input` is `display: flex; flex-wrap: wrap` by
+		// default (`OrigamField`'s base rule, meant for multi-chip inputs).
+		// This field renders BOTH the hex `colorSelection` span AND the
+		// underlying native `<input>` in that same row — in a narrow
+		// container (e.g. a dense side panel) the two don't fit on one
+		// line and wrap onto two, DOUBLING the field's height versus a
+		// plain text-field of the same density (confirmed: 55px vs 26px
+		// at compact density, identical width). The native input's own
+		// text is not meant to be visible here (the formatted
+		// `colorSelection` span is the real display value) — forcing
+		// `nowrap` lets the invisible native input shrink instead of
+		// pushing a wrap, with zero visual loss.
+		// Same single-line fix as OrigamSelect: the underlying native
+		// `<input>` is taken OUT of flow (`position: absolute`, `flex: 0 0`)
+		// so it can't sit beside the formatted hex `colorSelection` span and
+		// push the field onto a second line. The span is the real display
+		// value; the input only carries focus / the editable value. `nowrap`
+		// alone was insufficient — the in-flow input still forced a wrap in a
+		// narrow container.
+		:deep(.origam-field__input) {
+			flex-wrap: nowrap;
+
+			> input {
+				position: absolute;
+				flex: 0 0;
+				min-width: 0;
+			}
 		}
 	}
 </style>