origam 2.8.1 → 2.10.0

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

@@ -180,12 +180,12 @@ import {
   OrigamTextField,
   OrigamTranslateScale
 } from "../../components";
-import { useDate, useLocale, useProps, useTextColor, useVModel, useStyle } from "../../composables";
+import { useDate, useDefaults, useLocale, useProps, useTextColor, useVModel, useStyle } from "../../composables";
 import { ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, KEYBOARD_VALUES, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, isEmpty, matchesSelector, wrapInArray } from "../../utils";
 import { computed, inject, nextTick, ref, shallowRef, StyleValue, toRef, useSlots, watch } from "vue";
-const props = defineProps({
+const _props = defineProps({
   menu: { type: Boolean, required: false },
   menuProps: { type: Object, required: false },
   range: { type: Boolean, required: false, default: false },
@@ -307,6 +307,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();
@@ -508,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/Dialog/OrigamDialog.vue

@@ -184,7 +184,7 @@ const props = defineProps({
   contained: { type: Boolean, required: false },
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) },
-  scrim: { type: [Boolean, String], required: false },
+  scrim: { type: [Boolean, String], required: false, default: true },
   flat: { type: Boolean, required: false },
   hover: { type: Boolean, required: false },
   image: { type: String, required: false },

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

@@ -519,7 +519,16 @@ 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);
 
 		&__skeleton {
 			width: 100%;
@@ -702,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 {
@@ -773,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 {
@@ -788,6 +807,11 @@ defineExpose({
 			#{$this}__label {
 				opacity: 1;
 			}
+
+			&:not(#{$this}--disabled) {
+				outline: var(--origam-field---focus-ring-width, 0px) solid var(--origam-field---focus-ring-color, transparent);
+				outline-offset: var(--origam-field---focus-ring-offset, 0px);
+			}
 		}
 
 		&--disabled,
@@ -967,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/Layout/OrigamLayout.vue

@@ -151,8 +151,17 @@ defineExpose({
 		}
 
 		&--full-height &__wrapper {
+			// `min-height` (not `height`) — full-height means "occupy AT
+			// LEAST the viewport", not "clip to exactly the viewport".
+			// A fixed `height: 100vh` kept the wrapper's own box capped
+			// at one screen even when its content (app-bar + main slot)
+			// grows taller — the overflow still rendered (no
+			// `overflow: hidden` here) but the wrapper's box, and
+			// anything painting a background on an ancestor sized off
+			// it, never grew to match, leaving a visible gap below the
+			// first viewport on any page taller than one screen.
 			width: 100vw;
-			height: 100vh;
+			min-height: 100vh;
 		}
 	}
 </style>

package/dist/src/components/Menu/OrigamMenu.vue

@@ -81,6 +81,7 @@ import {
 } from "../../components";
 import {
   useBothColor,
+  useDefaults,
   useProps,
   useScopeId,
   useStateEffect,
@@ -90,7 +91,7 @@ import {
 import { ORIGAM_MENU_KEY } from "../../consts";
 import { INLINE, KEYBOARD_VALUES, LOCATION_STRATEGIES, MDI_ICONS, SCROLL_STRATEGIES } from "../../enums";
 import { focusableChildren, focusChild, forwardRefs, getNextElement, getUid } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   id: { type: String, required: false },
   absolute: { type: Boolean, required: false },
   attach: { type: [Boolean, String], required: false, skipCheck: true },
@@ -208,6 +209,7 @@ const props = defineProps({
   lineHeight: { type: String, required: false },
   letterSpacing: { type: String, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["contextmenu", "update:modelValue"]);
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));

package/dist/src/components/NumberField/OrigamNumberField.vue

@@ -269,10 +269,10 @@
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
 import { OrigamBtn, OrigamDivider, OrigamInput, OrigamTextField } from "../../components";
-import { useAdjacentInner, useFocus, useHold, useProps, useVModel, useStyle } from "../../composables";
+import { useAdjacentInner, useDefaults, useFocus, useHold, useProps, useVModel, useStyle } from "../../composables";
 import { DIRECTION, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
 import { clamp, forwardRefs } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   autofocus: { type: Boolean, required: false },
   placeholder: { type: String, required: false },
   persistentPlaceholder: { type: Boolean, required: false },
@@ -391,6 +391,7 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
+const props = useDefaults(_props);
 const emits = defineEmits(["click:control", "mousedown:control", "click:clear", "increment", "decrement", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "update:active", "click:append", "click:prepend"]);
 defineSlots();
 const { filterProps } = useProps(props);

package/dist/src/components/Overlay/OrigamOverlayScrim.vue

@@ -72,6 +72,8 @@ defineExpose({
 <style lang="scss" scoped>
 	.origam-scrim {
 		background-color: var(--origam-overlay-scrim---background-color, var(--origam-color__overlay---scrim)); // TODO: rename to color.overlay.backdrop once #arbitration2 resolved
+		backdrop-filter: var(--origam-overlay-scrim---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-overlay-scrim---backdrop-filter, none);
 		pointer-events: var(--origam-overlay-scrim---pointer-events, auto);
 		border-radius: inherit;
 		inset: 0;

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

@@ -103,6 +103,7 @@
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
 import { OrigamInput, OrigamRadioBtn } from "../../components";
 import {
+  useDefaults,
   useFocus,
   useHover,
   useMargin,
@@ -114,7 +115,7 @@ import {
 } from "../../composables";
 import { DENSITY } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
-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 },
@@ -206,6 +207,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"]);
 const { isHover, hoverState } = useHover(props);
 useStateEffect(props, isHover, void 0, hoverState, void 0);

package/dist/src/components/Select/OrigamSelect.vue

@@ -289,6 +289,7 @@ import {
   OrigamVirtualScroll
 } from "../../components";
 import {
+  useDefaults,
   useFilter,
   useItems,
   useLocale,
@@ -310,7 +311,7 @@ import {
   TEXT_FIELD_TYPE
 } from "../../enums";
 import { deepEqual, forwardRefs, getUid, matchesSelector, noop, wrapInArray } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   chips: { type: Boolean, required: false },
   closableChips: { type: Boolean, required: false },
   hideNoData: { type: Boolean, required: false },
@@ -454,6 +455,7 @@ const props = defineProps({
   noFilter: { type: Boolean, required: false },
   eager: { type: Boolean, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["click:control", "mousedown:control", "update:menu", "update:modelValue", "update:focused", "click:append", "click:prepend", "click:appendInner", "click:prependInner", "click:clear"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();

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

@@ -283,6 +283,8 @@ defineExpose(forwardRefs({
       justify-content: center;
       position: relative;
       border-radius: 50%;
+      backdrop-filter: var(--origam-selection-control__input---backdrop-filter, none);
+      -webkit-backdrop-filter: var(--origam-selection-control__input---backdrop-filter, none);
 
       > .origam-icon {
         opacity: 0.7;

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"
@@ -423,8 +425,10 @@ import { computed, ref, StyleValue, useSlots, WritableComputedRef } from "vue";
 import { OrigamInput, OrigamLabel, OrigamSliderFieldTrack } from "../../components";
 import {
   useBackgroundColor,
+  useDefaults,
   useFocus,
   useProps,
+  useRounded,
   useRtl,
   useSteps,
   useStyle,
@@ -433,7 +437,7 @@ import {
 } from "../../composables";
 import { DENSITY, DIRECTION, SLIDER_FIELD_VARIANT } from "../../enums";
 import { clamp, convertToUnit, createRange, omit } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   label: { type: String, required: false },
@@ -527,6 +531,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false },
   ripple: { type: [Boolean, Object], required: false }
 });
+const props = useDefaults(_props);
 const emits = defineEmits(["start", "end", "update:modelValue", "update:focused"]);
 const { filterProps } = useProps(props);
 const origamInputRef = ref();
@@ -582,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;
@@ -765,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"]);
 });
@@ -843,6 +854,7 @@ const sliderFieldClasses = computed(() => {
     variantClass.value,
     sharedStateClasses.value,
     rtlClasses.value,
+    roundedClasses.value,
     props.class
   ];
 });
@@ -853,6 +865,7 @@ const bareWrapperClasses = computed(() => {
     variantClass.value,
     sharedStateClasses.value,
     rtlClasses.value,
+    roundedClasses.value,
     props.class
   ];
 });
@@ -962,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));
@@ -1185,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 {
@@ -1261,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;
@@ -1274,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;
 		}

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -91,6 +91,7 @@ import { OrigamOverlay, OrigamSnack } from "../../components";
 import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
 import {
   useBothColor,
+  useDefaults,
   useLayout,
   usePosition,
   useProps,
@@ -104,7 +105,7 @@ import {
 import { ORIGAM_LAYOUT_KEY } from "../../consts";
 import { SCROLL_STRATEGIES } from "../../enums";
 import { forwardRefs } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   multiLine: { type: Boolean, required: false },
   text: { type: String, required: false },
   timer: { type: [Boolean, String], required: false },
@@ -200,6 +201,7 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false }
 });
+const props = useDefaults(_props);
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const isActive = useVModel(props, "modelValue");

package/dist/src/components/Snackbar/OrigamSnackbarItem.vue

@@ -168,6 +168,8 @@ defineExpose({ filterProps });
     border-color: var(--origam-snackbar-item---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
     color: var(--origam-snackbar-item---color, var(--origam-color__text---primary, #1a1a1a));
     box-shadow: var(--origam-snackbar-item---box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
+    backdrop-filter: var(--origam-snackbar-item---backdrop-filter, none);
+    -webkit-backdrop-filter: var(--origam-snackbar-item---backdrop-filter, none);
     font-size: var(--origam-snackbar-item---font-size, 0.875rem);
     line-height: 1.4;
 

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -39,6 +39,7 @@
 			>
 				<template #default="{bgColor: scBgColor}">
 					<origam-switch-track
+							ref="origamSwitchTrackRef"
 							:bg-color="scBgColor"
 							:disabled="isDisabled"
 							:error="isValid === false"
@@ -46,6 +47,7 @@
 							:is-valid="isValid"
 							:model-value="model"
 							:readonly="isReadonly"
+							v-bind="{ ...trackProps }"
 							@click="handleTrackClick"
 					>
 						<template
@@ -97,6 +99,7 @@
 					/>
 					<div
 							:class="getSwitchThumbClasses(icon)"
+							:style="switchThumbStyles"
 					>
 						<origam-translate-scale>
 							<div
@@ -142,17 +145,19 @@ import {
   OrigamTranslateScale
 } from "../../components";
 import {
+  useDefaults,
   useFocus,
   useHover,
   useLoader,
   useProps,
+  useRounded,
   useStateEffect,
   useStyle,
   useVModel
 } from "../../composables";
 import { DENSITY, PROGRESS_TYPE, SIZES } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   indeterminate: { type: Boolean, required: false },
   inset: { type: Boolean, required: false },
   flat: { type: Boolean, required: false },
@@ -250,12 +255,14 @@ const props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["update:modelValue", "update:focused", "update:indeterminate", "click:label"]);
 const { isHover, hoverState } = useHover(props);
 useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);
 const origamSelectionControlRef = ref();
 const origamInputRef = ref();
+const origamSwitchTrackRef = ref();
 const indeterminate = useVModel(props, "indeterminate");
 const model = useVModel(props, "modelValue");
 const { isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
@@ -282,6 +289,9 @@ const inputProps = computed(() => {
 const controlProps = computed(() => {
   return origamSelectionControlRef.value?.filterProps(props, ["modelValue", "type", "disabled", "readonly", "class", "style", "id"]);
 });
+const trackProps = computed(() => {
+  return origamSwitchTrackRef.value?.filterProps(props, ["modelValue", "disabled", "readonly", "error", "inset", "isValid", "bgColor", "color", "class", "style", "id"]);
+});
 const isSkeletonLoading = computed(() => {
   return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
 });
@@ -298,6 +308,12 @@ const switchStyles = computed(() => {
     props.style
   ];
 });
+const { roundedStyles: thumbRoundedStyles } = useRounded(props, "origam-switch__thumb");
+const switchThumbStyles = computed(() => {
+  return [
+    thumbRoundedStyles.value
+  ];
+});
 const getSwitchThumbClasses = (icon) => {
   return [
     "origam-switch__thumb",
@@ -446,6 +462,31 @@ defineExpose({
 		.origam-selection-control {
 			min-height: calc(var(--origam-switch__selection-control---min-height, 56px) + var(--origam-input---density, 0px));
 
+			/*
+			 * The base SelectionControl wrapper reserves a fixed
+			 * `calc(40px + 1.5 * density)` box sized for a checkbox/radio
+			 * input glyph. Switch instead renders a variable-width track
+			 * (36–52px depending on `--origam-switch__track---width` /
+			 * the `inset` variant, plus its own horizontal padding) as
+			 * the wrapper's only in-flow child — `__input` is forced
+			 * `position: absolute` below so it no longer participates in
+			 * the flex layout. That fixed formula was never track-aware:
+			 * under `density="compact"` (-8px) the wrapper shrinks to
+			 * 28px while the standard track needs ~46px, so the track
+			 * visually overflows into the neighbouring label ("Flat"
+			 * rendering as "lat"). Let the wrapper size to its actual
+			 * content (`max-content`) instead, keeping the original
+			 * density formula only as a floor via `min-width`/`min-height`
+			 * so the checkbox-sized footprint is preserved whenever the
+			 * track is smaller than it (never smaller than before).
+			 */
+			:deep(.origam-selection-control__wrapper) {
+				width: max-content;
+				height: max-content;
+				min-width: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
+				min-height: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
+			}
+
 			:deep(.origam-selection-control__input) {
 				border-radius: 50%;
 				transition: 0.2s transform cubic-bezier(0.4, 0, 0.2, 1);

package/dist/src/components/Switch/OrigamSwitchTrack.vue

@@ -37,7 +37,10 @@
 import { computed, StyleValue, useSlots } from "vue";
 import {
   useBackgroundColor,
+  useBorder,
+  useElevation,
   useProps,
+  useRounded,
   useStyle
 } from "../../composables";
 const props = defineProps({
@@ -45,13 +48,32 @@ const props = defineProps({
   isValid: { type: [Boolean, null], required: false, default: null },
   disabled: { type: Boolean, required: false, default: false },
   readonly: { type: Boolean, required: false, default: false },
-  error: { type: Boolean, required: false, default: false },
+  error: { type: [String, Boolean], required: false, default: false },
   inset: { type: Boolean, required: false, default: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, 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 }
+  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 },
+  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(["click", "update:modelValue"]);
 defineSlots();
@@ -62,6 +84,9 @@ const trackBgColor = computed(() => {
   return props.bgColor;
 });
 const { backgroundColorStyles } = useBackgroundColor(trackBgColor);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
 const slotProps = computed(() => ({
   model: props.modelValue,
   isValid: props.isValid
@@ -75,6 +100,9 @@ const handleClick = (e) => {
 const switchTrackStyles = computed(() => {
   return [
     backgroundColorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    elevationStyles.value,
     props.style
   ];
 });
@@ -88,6 +116,9 @@ const switchTrackClasses = computed(() => {
       "origam-switch-track--error": props.error,
       "origam-switch-track--inset": props.inset
     },
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
     props.class
   ];
 });
@@ -115,6 +146,8 @@ defineExpose({
 		border-radius: var(--origam-switch__track---border-radius, 9999px);
 		height: var(--origam-switch__track---height, 14px);
 		min-width: var(--origam-switch__track---width, 36px);
+		backdrop-filter: var(--origam-switch__track---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-switch__track---backdrop-filter, none);
 		cursor: pointer;
 		transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
 		overflow: hidden;