origam 2.17.0 → 2.18.0

package/dist/src/components/OtpInputField/OrigamOtpInputField.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="styleId"
 			:aria-label="label || undefined"
 			:class="otpInputFieldClasses"
 			:style="otpInputFieldStyles"
@@ -148,7 +149,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import OrigamField from "../Field/OrigamField.vue";
 import OrigamOverlay from "../Overlay/OrigamOverlay.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
@@ -201,6 +202,21 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
+  prependInnerAriaLabel: { type: String, required: false },
+  appendInnerAriaLabel: { type: String, 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 },
   focused: { type: Boolean, required: false },
   density: { type: null, required: false },
   text: { type: String, required: false },
@@ -220,19 +236,6 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], 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 },
@@ -261,14 +264,26 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   validateOn: { type: null, required: false },
-  validationValue: { type: null, required: false },
-  appendAvatar: { type: String, required: false },
-  appendIcon: { type: null, required: false },
-  prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  validationValue: { type: null, required: false }
 });
 const emits = defineEmits(["finish", "click:control", "mousedown:control", "update:modelValue", "update:focused", "click:appendInner", "click:prependInner", "click:clear"]);
 defineSlots();
+let disposed = false;
+const frames = /* @__PURE__ */ new Set();
+const scheduleFrame = (cb) => {
+  if (disposed) return;
+  const id2 = requestAnimationFrame(() => {
+    frames.delete(id2);
+    if (disposed) return;
+    cb();
+  });
+  frames.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of frames) cancelAnimationFrame(id2);
+  frames.clear();
+});
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();
@@ -376,12 +391,12 @@ const handleKeydown = (e) => {
     if (focusIndex.value > 0 && e.key === "Backspace") {
       target = "prev";
     } else {
-      requestAnimationFrame(() => {
+      scheduleFrame(() => {
         inputRef.value[index]?.select();
       });
     }
   }
-  requestAnimationFrame(() => {
+  scheduleFrame(() => {
     if (target != null) {
       focusChild(contentRef.value, target);
     }
@@ -454,7 +469,7 @@ const otpInputFieldClasses = computed(() => {
     props.class
   ];
 });
-const { id: styleId, css, load, isLoaded, unload } = useStyle(otpInputFieldStyles);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(otpInputFieldStyles, () => props.id);
 defineExpose(forwardRefs({
   blur: () => {
     inputRef.value?.forEach((input) => input.blur());
@@ -493,8 +508,17 @@ defineExpose(forwardRefs({
 
 		.origam-field {
 			height: 100%;
-			--origam-field---padding-start: 0;
-			--origam-field---padding-end: 0;
+			// ⛔ #800 — une cellule OTP n'a ni etiquette ni texte aligne au bord :
+			// son chiffre est CENTRE. Le plancher de degagement des coins d'
+			// `OrigamField` n'y protege de rien et decentre le chiffre de 2px
+			// (mesure Chromium : `padding-inline` 4px / 0px). On le neutralise
+			// explicitement. Jusqu'a #800 le meme rendu etait obtenu par un `0`
+			// SANS UNITE qui rendait la declaration invalide — le bon rendu
+			// reposait donc sur une erreur de parse, et serait tombe au premier
+			// refactor du `max()`.
+			--origam-field---corner-clearance: 0px;
+			--origam-field---padding-start: 0px;
+			--origam-field---padding-end: 0px;
 		}
 
 		&__divider {

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -318,6 +318,7 @@ import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
+import { BORDER_PROP_KEYS } from "../../consts/Commons/border.const";
 import { DEFAULT_PASSWORD_REQUIREMENTS, REQUIREMENT_MIN_LENGTH, REQUIREMENT_NUMBER, REQUIREMENT_SPECIAL, REQUIREMENT_TINY, REQUIREMENT_UPPERCASE } from "../../consts/PasswordField/password-field.const";
 import vIntersect from "../../directives/Intersect/intersect.directive";
 import { DENSITY } from "../../enums/Commons/density.enum";
@@ -388,6 +389,21 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
+  prependInnerAriaLabel: { type: String, required: false },
+  appendInnerAriaLabel: { type: String, 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 },
   focused: { type: Boolean, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
@@ -406,19 +422,6 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], 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, default: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -455,7 +458,9 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false }
 });
 const emits = defineEmits(["click:control", "mousedown:control", "update:strength", "update:focused", "click:appendInner", "click:prependInner", "click:clear", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
@@ -615,7 +620,7 @@ const enrichedRules = computed(() => {
 });
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", ...BORDER_PROP_KEYS]);
 });
 const fieldProps = computed(() => {
   return origamFieldRef.value?.filterProps(props, ["class", "id", "active", "dirty", "disabled", "focused", "error", "style"]);

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

@@ -182,6 +182,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   size: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },

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

@@ -13,16 +13,21 @@
 					v-bind="{id, messagesId, isDisabled, isReadonly, isValid}"
 			>
 
-				<slot
-						name="label"
-						v-bind="{label, required}"
+				<div
+						:id="groupLabelId"
+						class="origam-radio-group__label"
 				>
-					<origam-label
-							:id="id"
-							:required="required"
-							:text="label"
-					/>
-				</slot>
+					<slot
+							name="label"
+							v-bind="{label, required}"
+					>
+						<origam-label
+								:required="required"
+								:text="label"
+								tag="span"
+						/>
+					</slot>
+				</div>
 
 				<origam-defaults-provider :defaults="radioDefaults">
 					<origam-selection-control-group
@@ -30,7 +35,7 @@
 							ref="origamSelectionControlGroupRef"
 							v-model="model"
 							:aria-describedby="messagesId"
-							:aria-labelledby="label ? id : undefined"
+							:aria-labelledby="groupLabelledBy"
 							:disabled="isDisabled"
 							:items="items"
 							:multiple="false"
@@ -141,6 +146,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   size: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
@@ -161,7 +168,7 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   items: { type: [Array, Object], required: false }
 });
-defineSlots();
+const slots = defineSlots();
 defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const origamSelectionControlGroupRef = ref();
@@ -172,6 +179,10 @@ const id = computed(() => {
   return props.id || `radio-group-${uid}`;
 });
 const model = useVModel(props, "modelValue");
+const groupLabelId = computed(() => `${id.value}-label`);
+const groupLabelledBy = computed(() => {
+  return props.label || slots.label ? groupLabelId.value : void 0;
+});
 const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
   return origamInputRef.value?.filterProps(props, ["modelValue", "id", "focused", "style", "class"]);
@@ -213,3 +224,17 @@ defineExpose({
   styleId
 });
 </script>
+
+<style lang="scss" scoped>
+	/*
+	 * Le wrapper n'existe que pour porter l'id cible d'`aria-labelledby`
+	 * (#814). `display: contents` le retire de l'arbre des boites : les
+	 * enfants du slot `label` restent les elements flex directs de
+	 * `.origam-input__control`, donc la mise en page est inchangee — mesure
+	 * avant/apres identique au pixel sur les variantes « Default » et
+	 * « Slots - Label ».
+	 */
+	.origam-radio-group__label {
+		display: contents;
+	}
+</style>

package/dist/src/components/RatingField/OrigamRatingField.vue

@@ -3,8 +3,11 @@
 			:id="id"
 			ref="origamInputRef"
 			v-model="model"
+			:aria-labelledby="groupLabelledBy"
+			:aria-readonly="readonly || undefined"
 			:class="ratingFieldClasses"
 			:style="ratingFieldStyles"
+			role="radiogroup"
 			v-bind="{...rootAttrs, ...inputProps}"
 	>
 		<template
@@ -19,12 +22,15 @@
 					name="default"
 					v-bind="{id,messagesId,isDisabled,isReadonly,isValid}"
 			>
-				<div class="origam-rating-field__label">
+				<div
+						:id="groupLabelId"
+						class="origam-rating-field__label"
+				>
 					<slot name="label">
 						<origam-label
-								:for="id"
 								:required="required"
 								:text="label"
+								tag="span"
 						/>
 					</slot>
 				</div>
@@ -158,7 +164,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, shallowRef, StyleValue, useAttrs, useSlots } from "vue";
+import { computed, nextTick, ref, shallowRef, StyleValue, useAttrs, useSlots } from "vue";
 import OrigamBtn from "../Btn/OrigamBtn.vue";
 import OrigamInput from "../Input/OrigamInput.vue";
 import OrigamLabel from "../Label/OrigamLabel.vue";
@@ -167,8 +173,14 @@ import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
+import {
+  RATING_FIELD_ENABLED_RADIO_SELECTOR,
+  RATING_FIELD_MUTATING_KEYS,
+  RATING_FIELD_ROOT_SELECTOR
+} from "../../consts/RatingField/rating-field.const";
 import { BLOCK } from "../../enums/Commons/anchor.enum";
 import { DENSITY } from "../../enums/Commons/density.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
 import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { SIZES } from "../../enums/Commons/size.enum";
 import { VARIANT } from "../../enums/Commons/variant.enum";
@@ -253,6 +265,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   size: { type: null, required: false, default: SIZES.DEFAULT },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
@@ -286,6 +300,21 @@ const name = computed(() => {
   return props.name ?? `origam-rating-${getUid()}`;
 });
 const hoverIndex = shallowRef(-1);
+const handleKeydown = (e) => {
+  if (props.disabled || props.readonly) {
+    if (RATING_FIELD_MUTATING_KEYS.includes(e.key)) e.preventDefault();
+    return;
+  }
+  if (e.key !== KEYBOARD_VALUES.HOME && e.key !== KEYBOARD_VALUES.END) return;
+  const group = e.target?.closest(RATING_FIELD_ROOT_SELECTOR);
+  if (!group) return;
+  const radios = Array.from(group.querySelectorAll(RATING_FIELD_ENABLED_RADIO_SELECTOR));
+  if (!radios.length) return;
+  e.preventDefault();
+  const target = e.key === KEYBOARD_VALUES.HOME ? radios[0] : radios[radios.length - 1];
+  target.focus();
+  if (!target.checked) target.click();
+};
 const itemState = computed(() => {
   return increments.value.map((value) => {
     const isFilled = normalizedValue.value >= value;
@@ -303,20 +332,38 @@ const eventState = computed(() => {
     const onMouseleave = () => {
       hoverIndex.value = -1;
     };
-    const onClick = () => {
-      if (props.disabled || props.readonly) return;
-      model.value = normalizedValue.value === value && props.clearable ? 0 : value;
+    const onClick = (e) => {
+      if (!props.disabled && !props.readonly) {
+        model.value = normalizedValue.value === value && props.clearable ? 0 : value;
+      }
+      void nextTick(() => resyncRadios(e?.target));
+    };
+    const onChange = (e) => {
+      if (!props.disabled && !props.readonly) {
+        model.value = value;
+      }
+      void nextTick(() => resyncRadios(e?.target));
     };
     return {
       onMouseenter: props.hover ? onMouseenter : void 0,
       onMouseleave: props.hover ? onMouseleave : void 0,
-      onClick
+      onClick,
+      onChange,
+      onKeydown: handleKeydown
     };
   });
 });
 const isChecked = (value) => {
   return normalizedValue.value === value;
 };
+const resyncRadios = (source) => {
+  const group = source?.closest(RATING_FIELD_ROOT_SELECTOR);
+  if (!group) return;
+  group.querySelectorAll('input[type="radio"]').forEach((radio) => {
+    const shouldBeChecked = isChecked(parseFloat(radio.value));
+    if (radio.checked !== shouldBeChecked) radio.checked = shouldBeChecked;
+  });
+};
 const hasLabels = computed(() => {
   return !!props.itemLabels?.length || slots.itemLabel;
 });
@@ -346,6 +393,10 @@ const ratingFieldClasses = computed(() => {
   ];
 });
 const { id, css, load, isLoaded, unload } = useStyle(ratingFieldStyles, () => props.id);
+const groupLabelId = computed(() => `${id.value}-label`);
+const groupLabelledBy = computed(() => {
+  return props.label || slots.label ? groupLabelId.value : void 0;
+});
 defineExpose({
   filterProps,
   css,

package/dist/src/components/RatingField/OrigamRatingFieldItem.vue

@@ -4,37 +4,39 @@
 			:class="ratingFieldItemClasses"
 			:style="ratingFieldItemStyles"
 	>
-		<label
-				:for="id"
-				class="origam-rating-field-item__label"
-		>
-			<span class="origam-rating-field-item__hidden">{{ t(itemAriaLabel, value, length) }}</span>
-			<slot
-					v-if="showStar"
-					name="item"
-					v-bind="{props: ratingBtnProps, value}"
+		<template v-if="showStar">
+			<label
+					:for="id"
+					class="origam-rating-field-item__label"
 			>
-				<origam-btn
-						ref="origamBtnRef"
-						v-bind="{...ratingBtnProps}"
-						@click="handleClick"
-						@mouseenter="handleMouseEnter"
-						@mouseleave="handleMouseLeave"
-				/>
-			</slot>
-		</label>
+				<span class="origam-rating-field-item__hidden">{{ t(itemAriaLabel, value, length) }}</span>
+				<slot
+						name="item"
+						v-bind="{props: ratingBtnProps, value}"
+				>
+					<origam-btn
+							ref="origamBtnRef"
+							v-bind="{...ratingBtnProps}"
+							@click="handleClick"
+							@mouseenter="handleMouseEnter"
+							@mouseleave="handleMouseLeave"
+					/>
+				</slot>
+			</label>
 
-		<input
-				:id="id"
-				:checked="checked"
-				:disabled="disabled"
-				:name="name"
-				:readonly="readonly"
-				:value="value"
-				class="origam-rating-field-item__hidden"
-				tabindex="-1"
-				type="radio"
-		/>
+			<input
+					:id="id"
+					:checked="checked"
+					:disabled="disabled"
+					:name="name"
+					:readonly="readonly"
+					:value="value"
+					class="origam-rating-field-item__hidden"
+					type="radio"
+					@change="handleChange"
+					@keydown="handleKeydown"
+			/>
+		</template>
 	</component>
 </template>
 
@@ -105,7 +107,7 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false }
 });
-const emits = defineEmits(["mouseenter", "mouseleave", "click"]);
+const emits = defineEmits(["mouseenter", "mouseleave", "change", "keydown", "click"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
@@ -128,6 +130,12 @@ const handleMouseLeave = (e) => {
 const handleClick = (e) => {
   emits("click", e);
 };
+const handleChange = (e) => {
+  emits("change", e);
+};
+const handleKeydown = (e) => {
+  emits("keydown", e);
+};
 const ratingFieldItemStyles = computed(() => {
   return [
     props.style
@@ -157,6 +165,30 @@ defineExpose({
 
 <style lang="scss" scoped>
 	.origam-rating-field-item {
+		/*
+		 * #812 — WCAG 2.4.7 (Focus Visible).
+		 *
+		 * The control a keyboard user focuses is the native
+		 * `<input type="radio">`, and `&__hidden` below makes it
+		 * `height:0; width:0; opacity:0`. Putting it back in the tab order
+		 * without this rule would have swapped one defect for another: the
+		 * group would become operable while the focus indicator landed on a
+		 * 0x0 transparent element. That is the trade #810 refused to make and
+		 * #812 names explicitly.
+		 *
+		 * `:has()` is the CSS-first answer — the ring is painted on the STAR,
+		 * which is the box the user actually sees, while focus stays on the
+		 * input that owns the radio semantics. No JS, no second focusable
+		 * element, no `tabindex` bookkeeping.
+		 *
+		 * `:focus-visible` (not `:focus`) so a mouse click on a star does not
+		 * leave a ring behind — the browser's own heuristic, not ours.
+		 */
+		&:has(:focus-visible) {
+			outline: var(--origam-border__width---2, 2px) solid var(--origam-color__border---focus, currentColor);
+			outline-offset: var(--origam-space---1, 4px);
+		}
+
 		&__label {
 			cursor: pointer;
 
@@ -184,6 +216,22 @@ defineExpose({
 			clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 			z-index: 1;
 
+			/*
+			 * #812 — a `clip-path` clips the element's OWN outline too, not
+			 * just its descendants. Measured: with the shared
+			 * `outline-offset: 4px` above, focusing a half-step radio painted
+			 * a ring entirely outside the polygon — computed `outline-width`
+			 * read `2px` while the screenshot showed nothing at all. That is
+			 * the exact shape of a false green: the property is set, the pixel
+			 * is not there.
+			 *
+			 * An INSET offset puts the ring back inside the clipped region, so
+			 * it survives and outlines precisely the half the step selects.
+			 */
+			&:has(:focus-visible) {
+				outline-offset: calc(-1 * var(--origam-border__width---2, 2px));
+			}
+
 			&,
 			&:hover {
 				:deep(.origam-btn__overlay) {