origam 2.9.0 → 2.10.0

package/dist/src/assets/css/tokens/dark.css

@@ -880,8 +880,8 @@
   --origam-field__input---padding-block-xl: 14px;
   --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
   --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
-  --origam-field__input---padding-start: var(--origam-space---4);
-  --origam-field__input---padding-end: var(--origam-space---4);
+  --origam-field__input---padding-start: 0;
+  --origam-field__input---padding-end: 0;
   --origam-field__input---opacity: 0.7;
   --origam-field__label---font-size: 0.75em;
   --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -2255,6 +2255,7 @@
   --origam-slider-field---padding-block: var(--origam-space---2);
   --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
   --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-slider-field---border-radius: var(--origam-radius---full);
   --origam-slider-field__track---height: 4px;
   --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
   --origam-slider-field__track---border-radius: var(--origam-radius---full);
@@ -3651,8 +3652,8 @@
     --origam-field__input---padding-block-xl: 14px;
     --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
     --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
-    --origam-field__input---padding-start: var(--origam-space---4);
-    --origam-field__input---padding-end: var(--origam-space---4);
+    --origam-field__input---padding-start: 0;
+    --origam-field__input---padding-end: 0;
     --origam-field__input---opacity: 0.7;
     --origam-field__label---font-size: 0.75em;
     --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -5026,6 +5027,7 @@
     --origam-slider-field---padding-block: var(--origam-space---2);
     --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
     --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
+    --origam-slider-field---border-radius: var(--origam-radius---full);
     --origam-slider-field__track---height: 4px;
     --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
     --origam-slider-field__track---border-radius: var(--origam-radius---full);

package/dist/src/assets/css/tokens/light.css

@@ -881,8 +881,8 @@
   --origam-field__input---padding-block-xl: 14px;
   --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
   --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
-  --origam-field__input---padding-start: var(--origam-space---4);
-  --origam-field__input---padding-end: var(--origam-space---4);
+  --origam-field__input---padding-start: 0;
+  --origam-field__input---padding-end: 0;
   --origam-field__input---opacity: 0.7;
   --origam-field__label---font-size: 0.75em;
   --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -2256,6 +2256,7 @@
   --origam-slider-field---padding-block: var(--origam-space---2);
   --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
   --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-slider-field---border-radius: var(--origam-radius---full);
   --origam-slider-field__track---height: 4px;
   --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
   --origam-slider-field__track---border-radius: var(--origam-radius---full);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -880,8 +880,8 @@
   --origam-field__input---padding-block-xl: 14px;
   --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
   --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
-  --origam-field__input---padding-start: var(--origam-space---4);
-  --origam-field__input---padding-end: var(--origam-space---4);
+  --origam-field__input---padding-start: 0;
+  --origam-field__input---padding-end: 0;
   --origam-field__input---opacity: 0.7;
   --origam-field__label---font-size: 0.75em;
   --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -2255,6 +2255,7 @@
   --origam-slider-field---padding-block: var(--origam-space---2);
   --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
   --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-slider-field---border-radius: var(--origam-radius---full);
   --origam-slider-field__track---height: 4px;
   --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
   --origam-slider-field__track---border-radius: var(--origam-radius---full);

package/dist/src/assets/scss/tokens/_light.scss

@@ -881,8 +881,8 @@
   --origam-field__input---padding-block-xl: 14px;
   --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
   --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
-  --origam-field__input---padding-start: var(--origam-space---4);
-  --origam-field__input---padding-end: var(--origam-space---4);
+  --origam-field__input---padding-start: 0;
+  --origam-field__input---padding-end: 0;
   --origam-field__input---opacity: 0.7;
   --origam-field__label---font-size: 0.75em;
   --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -2256,6 +2256,7 @@
   --origam-slider-field---padding-block: var(--origam-space---2);
   --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
   --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
+  --origam-slider-field---border-radius: var(--origam-radius---full);
   --origam-slider-field__track---height: 4px;
   --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
   --origam-slider-field__track---border-radius: var(--origam-radius---full);

package/dist/src/components/App/OrigamApp.vue

@@ -4,10 +4,10 @@
 			ref="origamAppRef"
 			:class="appClasses"
 			:style="appStyles"
-			:color="color"
-			:bg-color="bgColor"
-			:full-height="fullHeight"
-			:overlaps="overlaps"
+			:color="props.color"
+			:bg-color="props.bgColor"
+			:full-height="props.fullHeight"
+			:overlaps="props.overlaps"
 	>
 		<template #default>
 			<slot name="default"/>
@@ -17,9 +17,9 @@
 
 <script lang="ts" setup>
 import { OrigamLayout } from "../../components";
-import { useProps, useRtl, useStyle } from "../../composables";
+import { useDefaults, useProps, useRtl, useStyle } from "../../composables";
 import { computed, ref, StyleValue } from "vue";
-const props = defineProps({
+const _props = defineProps({
   fullHeight: { type: Boolean, required: false, default: true },
   overlaps: { type: Array, required: false },
   id: { type: String, required: false },
@@ -28,6 +28,7 @@ const props = defineProps({
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
+const props = useDefaults(_props);
 const { filterProps } = useProps(props);
 const { rtlClasses } = useRtl();
 const origamAppRef = ref();

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

@@ -404,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);
@@ -418,6 +434,10 @@ 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
@@ -432,8 +452,21 @@ defineExpose(forwardRefs({
 		// `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>

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -509,3 +509,32 @@ defineExpose(forwardRefs({
   isLoaded
 }, origamTextFieldRef));
 </script>
+
+<style lang="scss" scoped>
+	.origam-date-picker-field {
+		:deep(.origam-date-picker-field__selection-text) {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			min-width: 0;
+		}
+
+		// Same single-line fix as OrigamSelect / OrigamColorPickerField: the
+		// underlying native `<input>` is taken OUT of flow so it can't sit
+		// beside the formatted `selectionText`/`rangeSelection` 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
+		// is insufficient — the in-flow input still forces a wrap in a
+		// narrow container (confirmed: 61px vs 36px at 150px width on the
+		// range variant).
+		:deep(.origam-field__input) {
+			flex-wrap: nowrap;
+
+			> input {
+				position: absolute;
+				flex: 0 0;
+				min-width: 0;
+			}
+		}
+	}
+</style>

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

@@ -519,7 +519,14 @@ defineExpose({
 		flex: 1 0;
 		grid-area: control;
 		position: relative;
-		padding-inline: var(--origam-field---padding-start) var(--origam-field---padding-end);
+		// Corner-clearing: when the corner radius is larger than the inline
+		// padding, the text / floating label collide with the rounded outline.
+		// Floor the inline padding at the effective radius (capped at the control
+		// height for pills). Prepended fields opt out below — their prepend icon
+		// already fills the corner.
+		padding-inline:
+			max(var(--origam-field---padding-start), min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px)))
+			var(--origam-field---padding-end);
 		backdrop-filter: var(--origam-field---backdrop-filter, none);
 		-webkit-backdrop-filter: var(--origam-field---backdrop-filter, none);
 
@@ -704,7 +711,7 @@ defineExpose({
 
 			#{$this}__outline {
 				&--start {
-					flex: 0 0 var(--origam-field---padding-start);
+					flex: 0 0 max(var(--origam-field---padding-start), min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px)));
 				}
 
 				&--end {
@@ -775,6 +782,16 @@ defineExpose({
 
 		&--prepended {
 			--origam-field---padding-start: 6px;
+
+			// A prepend-inner (icon / swatch) already fills the left corner, so
+			// opt out of the corner-clearing floor: keep the inline padding and
+			// the start outline leg at the raw padding-start (widening them would
+			// draw the outline over the prepend content).
+			padding-inline: var(--origam-field---padding-start) var(--origam-field---padding-end);
+
+			#{$this}__outline--start {
+				flex-basis: var(--origam-field---padding-start);
+			}
 		}
 
 		&--appended {
@@ -974,7 +991,19 @@ defineExpose({
 					&#{$this}__label--floating {
 						transform: translateY(-50%);
 						transform-origin: center;
-						margin: 0 4px;
+						// Align the floating label's inline-start with the input
+						// text (and the resting label), both of which sit at
+						// `--origam-field__input---padding-start`. The old hard
+						// `margin: 0 4px` pinned the floating label to the notch
+						// corner instead, leaving it inset by (input-padding − 4)
+						// px LESS than the value — a visible label/value
+						// misalignment that grows with the corner radius (most
+						// obvious on large-radius themes, e.g. cartoon `rounded-lg`,
+						// where it read as "the input is more indented than the
+						// label"). Keep the 4px on the inline-end for notch
+						// breathing room.
+						margin-block: 0;
+						margin-inline: var(--origam-field__input---padding-start, 0) 4px;
 					}
 				}
 

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

@@ -44,6 +44,7 @@
 							:is-vertical="isVertical"
 							:max="resolvedMax"
 							:min="resolvedMin"
+							:rounded="resolvedRounded"
 							:show-ticks="showTicks"
 							:start="isRange ? trackRangeStart : 0"
 							:stop="isRange ? trackRangeStop : trackStop"
@@ -273,6 +274,7 @@
 					:is-vertical="isVertical"
 					:max="resolvedMax"
 					:min="resolvedMin"
+					:rounded="resolvedRounded"
 					:show-ticks="showTicks"
 					:start="isRange ? trackRangeStart : 0"
 					:stop="isRange ? trackRangeStop : trackStop"
@@ -426,6 +428,7 @@ import {
   useDefaults,
   useFocus,
   useProps,
+  useRounded,
   useRtl,
   useSteps,
   useStyle,
@@ -584,12 +587,14 @@ const bufferedPercentage = computed(() => {
   const clamped = clamp(props.buffered, resolvedMin.value, resolvedMax.value);
   return toPercent(clamped);
 });
-const bufferedStyles = computed(() => {
+const bufferedPosition = computed(() => {
   const pct = bufferedPercentage.value;
-  if (isVertical.value) {
-    return { height: `${pct}%`, bottom: "0" };
-  }
-  return indexFromEnd.value ? { width: `${pct}%`, insetInlineEnd: "0" } : { width: `${pct}%`, insetInlineStart: "0" };
+  if (isVertical.value) return { height: `${pct}%`, bottom: "0" };
+  if (indexFromEnd.value) return { width: `${pct}%`, insetInlineEnd: "0" };
+  return { width: `${pct}%`, insetInlineStart: "0" };
+});
+const bufferedStyles = computed(() => {
+  return [bufferedPosition.value, roundedStyles.value];
 });
 const hasPeaks = computed(() => {
   if (!isAudioVariant.value) return false;
@@ -767,6 +772,10 @@ const bgColor = computed(() => {
 });
 const { backgroundColorClasses: thumbBgClasses, backgroundColorStyles: thumbBgStyles } = useBackgroundColor(color);
 const { textColorClasses: thumbTextClasses, textColorStyles: thumbTextStyles } = useTextColor(color);
+const resolvedRounded = computed(() => {
+  return props.trackProps?.rounded ?? props.rounded;
+});
+const { roundedClasses, roundedStyles } = useRounded(resolvedRounded);
 const inputProps = computed(() => {
   return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused", "centerAffix", "color", "bgColor", "activeColor", "activeBgColor", "hoverColor", "hoverBgColor"]);
 });
@@ -845,6 +854,7 @@ const sliderFieldClasses = computed(() => {
     variantClass.value,
     sharedStateClasses.value,
     rtlClasses.value,
+    roundedClasses.value,
     props.class
   ];
 });
@@ -855,6 +865,7 @@ const bareWrapperClasses = computed(() => {
     variantClass.value,
     sharedStateClasses.value,
     rtlClasses.value,
+    roundedClasses.value,
     props.class
   ];
 });
@@ -964,7 +975,7 @@ defineExpose({
 			pointer-events: none;
 			background: var(--origam-slider-field__buffered---background-color, color-mix(in srgb, currentColor 40%, transparent));
 			opacity: var(--origam-slider-field__buffered---opacity, 0.5);
-			border-radius: 999px;
+			border-radius: var(--origam-slider-field---border-radius, 999px);
 			top: 50%;
 			transform: translateY(-50%);
 			height: var(--origam-slider-field--variant--field---track-thickness, var(--origam-slider-field---track-size, 4px));
@@ -1187,15 +1198,15 @@ defineExpose({
 
 			:deep(.origam-slider-field-track) {
 				background: transparent;
-				border-radius: 999px;
+				border-radius: var(--origam-slider-field---border-radius, 999px);
 			}
 
 			:deep(.origam-slider-field-track__background) {
-				border-radius: 999px;
+				border-radius: var(--origam-slider-field---border-radius, 999px);
 			}
 
 			:deep(.origam-slider-field-track__fill) {
-				border-radius: 999px;
+				border-radius: var(--origam-slider-field---border-radius, 999px);
 			}
 
 			&.origam-slider-field--horizontal {
@@ -1263,7 +1274,7 @@ defineExpose({
 
 		:deep(.origam-slider-field-track) {
 			background-color: var(--origam-slider-field--bare---track-background-color, color-mix(in srgb, currentColor 25%, transparent));
-			border-radius: 999px;
+			border-radius: var(--origam-slider-field---border-radius, 999px);
 			height: var(--origam-slider-field--variant--field---track-thickness);
 			width: 100%;
 			transition: height 140ms ease;
@@ -1276,14 +1287,14 @@ defineExpose({
 			.origam-slider-field-track__fill {
 				background: currentColor;
 				height: 100%;
-				border-radius: 999px;
+				border-radius: var(--origam-slider-field---border-radius, 999px);
 			}
 		}
 
 		.origam-slider-field__buffered {
 			background: var(--origam-slider-field__buffered--bare---background-color, color-mix(in srgb, currentColor 40%, transparent));
 			opacity: 1;
-			border-radius: 999px;
+			border-radius: var(--origam-slider-field---border-radius, 999px);
 			height: var(--origam-slider-field--variant--field---track-thickness);
 			z-index: 1;
 		}