origam 2.10.0 → 2.11.0

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

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

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;

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [