origam 2.9.0 → 2.11.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/Avatar/OrigamAvatar.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			:id="id"
 			:class="avatarClasses"
 			@click="handleClick"

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

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			:id="id"
 			role="group"
 			:class="btnGroupClasses"
@@ -30,6 +30,7 @@ import { OrigamBtn, OrigamDefaultsProvider } from "../../components";
 import {
   useDefaults,
   useDensity,
+  usePassedProps,
   useProps,
   useSize,
   useStateEffect,
@@ -37,6 +38,7 @@ import {
   useVariant
 } from "../../composables";
 import { DENSITY } from "../../enums";
+import { omitUndefined } from "../../utils";
 import { computed, StyleValue, useSlots } from "vue";
 const _props = defineProps({
   divided: { type: Boolean, required: false },
@@ -89,19 +91,33 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-btn": {
+  "origam-btn": omitUndefined({
+    // `variant` is the ONE deliberate exception, kept unconditional:
+    // `--variant-text` (the group's own root default, and every
+    // child's own component default) has NO active-state background
+    // rule at all — only `outlined`/`tonal` paint a filled surface
+    // on the selected segment (see OrigamBtn.vue's
+    // `&--variant-outlined { &--active { background-color: ... } }`).
+    // The group's OWN resolved `variant` (whether explicitly passed,
+    // or resolved from a theme's `'origam-btn-group'` defaults) must
+    // always reach the children — else a themed
+    // `<origam-btn-toggle variant="outlined">` gets the right root
+    // chrome but every child silently stays on 'text', so the active
+    // segment never fills — no visible selection at all.
     variant: props.variant,
-    density: props.density,
-    color: props.color,
-    bgColor: props.bgColor,
-    size: props.size,
+    density: wasPropPassed("density") ? props.density : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
+    size: wasPropPassed("size") ? props.size : void 0,
     // New API: `hover` / `active` accept boolean | IHoverState |
     // IActiveState; pass-through propagates the parent's intent
-    // override to each child OrigamBtn.
-    hover: props.hover,
-    active: props.active
-  }
+    // override to each child OrigamBtn — only when the consumer
+    // actually set it.
+    hover: wasPropPassed("hover") ? props.hover : void 0,
+    active: wasPropPassed("active") ? props.active : void 0
+  })
 }));
 const items = computed(() => props.items ?? []);
 const slots = useSlots();

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

@@ -77,7 +77,26 @@ const props = defineProps({
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], 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 },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  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 },
+  elevation: { type: [Number, String], required: false }
 });
 const emits = defineEmits(["update:indeterminate", "update:modelValue", "update:focused", "click:label"]);
 defineSlots();

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/ExpansionPanel/OrigamExpansionPanel.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			v-contrast
 			:class="expansionPanelClasses"
 			:style="expansionPanelStyles"

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/Label/OrigamLabel.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			:id="id"
 			v-contrast
 			:class="labelClasses"

package/dist/src/components/Messages/OrigamMessages.vue

@@ -4,7 +4,7 @@
 			:transition="transition"
 	>
 		<component
-				:is="tag"
+				:is="props.tag"
 				:class="messagesClasses"
 				:style="[messagesStyles, rootTypographyStyles]"
 				aria-live="polite"

package/dist/src/components/Radio/OrigamRadioBtn.vue

@@ -73,7 +73,26 @@ const props = defineProps({
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], 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 },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  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 },
+  elevation: { type: [Number, String], required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
 const { filterProps } = useProps(props);

package/dist/src/components/SelectionControl/OrigamSelectionControl.vue

@@ -15,7 +15,8 @@
 
       <div
         v-ripple="rippleProp"
-        class="origam-selection-control__input"
+        :class="selectionControlInputClasses"
+        :style="selectionControlInputStyles"
       >
         <slot
           name="input"
@@ -69,10 +70,13 @@ import { computed, inject, nextTick, ref, shallowRef, StyleValue, useAttrs } fro
 import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts";
 import { OrigamIcon, OrigamLabel } from "../../components";
 import {
+  useBorder,
   useDefaults,
   useDensity,
+  useElevation,
   useHover,
   useProps,
+  useRounded,
   useStateEffect,
   useStyle,
   useTextColor,
@@ -108,7 +112,26 @@ const _props = defineProps({
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], 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 },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  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 },
+  elevation: { type: [Number, String], required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["click:label", "update:modelValue"]);
@@ -202,6 +225,9 @@ const bgColor = computed(() => {
   return model.value ? props.activeBgColor || props.bgColor : props.bgColor;
 });
 const { textColorClasses: wrapperColorClasses, textColorStyles: wrapperColorStyles } = useTextColor(color);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
 const rippleProp = computed(() => {
   if (props.ripple) {
     return [!props.disabled && !props.readonly, null, ["center", "circle"]];
@@ -219,6 +245,21 @@ const selectionControlWrapperClasses = computed(() => {
     wrapperColorClasses.value
   ];
 });
+const selectionControlInputClasses = computed(() => {
+  return [
+    "origam-selection-control__input",
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value
+  ];
+});
+const selectionControlInputStyles = computed(() => {
+  return [
+    borderStyles.value,
+    roundedStyles.value,
+    elevationStyles.value
+  ];
+});
 const selectionControlClasses = computed(() => {
   return [
     "origam-selection-control",
@@ -254,7 +295,6 @@ defineExpose(forwardRefs({
     contain: layout;
     display: flex;
     flex: 1 0;
-    grid-area: control;
     position: relative;
     user-select: none;
 
@@ -307,7 +347,11 @@ defineExpose(forwardRefs({
         left: 0;
         width: 100%;
         height: 100%;
-        border-radius: 100%;
+        // Le halo suit la forme du contrôle. Codé en dur à 100%, il restait
+        // circulaire même sous `rounded="md"` : la seule surface que la prop
+        // pouvait peindre au repos ignorait la prop. `inherit` reprend le
+        // border-radius résolu par `useRounded` sur `__input`.
+        border-radius: inherit;
         background-color: currentColor;
         opacity: 0;
         pointer-events: none;