origam 2.9.0 → 2.11.0

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;
 		}

package/dist/src/components/Tabs/OrigamTab.vue

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

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			:id="id"
 			ref="rootRef"
 			role="tablist"

package/dist/src/interfaces/SelectionControl/selection-control.interface.d.ts

@@ -1,6 +1,17 @@
-import type { IActiveProps, IBgColorProps, IColorProps, ICommonsComponentEmits, ICommonsComponentProps, IDensityProps, ISelectionControlGroupProps, IHoverProps } from '../../interfaces';
+import type { IActiveProps, IBgColorProps, IBorderProps, IColorProps, ICommonsComponentEmits, ICommonsComponentProps, IDensityProps, IElevationProps, ISelectionControlGroupProps, IHoverProps, IRoundedProps } from '../../interfaces';
 import type { TColor, TIcon } from '../../types';
-export interface ISelectionControlProps extends ICommonsComponentProps, Partial<Omit<ISelectionControlGroupProps, 'items'>>, IColorProps, IBgColorProps, IActiveProps, IHoverProps, IDensityProps {
+/**
+ * `border` / `rounded` / `elevation` (props-first, issue #241) — declared
+ * here so `OrigamSelectionControl` (the element that owns the visible
+ * state-layer box behind the Checkbox/Radio glyph) can consume them via
+ * the standard `useBorder` / `useRounded` / `useElevation` composables,
+ * mirroring the `ISwitchTrackProps` pattern (the track owns the surface,
+ * not the outer `OrigamSwitch`). `ICheckboxBtnProps` / `IRadioBtnProps`
+ * extend this interface, so `OrigamCheckbox(Btn)` / `OrigamRadio(Btn)`
+ * forward these values down automatically through `filterProps` without
+ * any additional wiring.
+ */
+export interface ISelectionControlProps extends ICommonsComponentProps, Partial<Omit<ISelectionControlGroupProps, 'items'>>, IColorProps, IBgColorProps, IActiveProps, IHoverProps, IDensityProps, IBorderProps, IRoundedProps, IElevationProps {
     label?: string;
     trueValue?: any;
     falseValue?: any;