@pgcorp/ui-kit 0.5.0 → 0.7.0

package/src/components/shared/controls/SCheckbox.vue

@@ -43,11 +43,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, useId, watch } from 'vue'
 import { Check, Minus } from '../../icons/sputnigUiIcons'
 import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { resolveOptionalDomId } from '../../../internal/runtimeContract'
+import { useBinaryInput } from '../../../internal/useBinaryInput'
 import SField from './SField.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -83,48 +82,20 @@ const emit = defineEmits<{
 }>()
 const ownedAttrs = useOwnedAttrs({ component: 'SCheckbox', owner: 'native checkbox input' })
 useInteractiveLeafRegistration({ owner: 'SCheckbox' })
-
-const generatedInputId = useId()
-const inputId = computed(() => resolveOptionalDomId(
-  'SCheckbox',
-  'id',
-  props.id,
-  `s-checkbox-${generatedInputId}`,
-))
-const inputEl = ref<HTMLInputElement | null>(null)
-
-const checkedValue = computed(() => {
-  if (typeof props.modelValue !== 'boolean') {
-    throw new TypeError('SCheckbox: modelValue must be boolean')
-  }
-  return props.modelValue
+const {
+  checkedValue,
+  inputEl,
+  inputId,
+  onChange,
+  onClick,
+} = useBinaryInput({
+  owner: 'SCheckbox',
+  inputName: 'checkbox',
+  props,
+  indeterminate: () => props.indeterminate,
+  emitUpdate: (value) => emit('update:modelValue', value),
+  emitClick: (event) => emit('click', event),
 })
-
-function applyIndeterminate(): void {
-  if (inputEl.value) {
-    inputEl.value.indeterminate = props.indeterminate && !checkedValue.value
-  }
-}
-
-onMounted(applyIndeterminate)
-watch([() => props.indeterminate, checkedValue], applyIndeterminate)
-
-function onChange(event: Event): void {
-  if (props.readonly) return
-  const target = event.currentTarget
-  if (!(target instanceof HTMLInputElement)) {
-    throw new TypeError('SCheckbox: change event owner must be the native checkbox input')
-  }
-  emit('update:modelValue', target.checked)
-}
-
-function onClick(event: MouseEvent): void {
-  if (props.readonly) {
-    event.preventDefault()
-    return
-  }
-  emit('click', event)
-}
 </script>
 
 <style lang="postcss" src="./SCheckbox.css" scoped></style>

package/src/components/shared/controls/SChoiceCards.vue

@@ -16,26 +16,19 @@
         :data-columns="columns"
         :data-density="density"
         :data-selection-indicator="selectionIndicator"
-        role="radiogroup"
-        :aria-labelledby="labelId"
-        :aria-describedby="describedBy"
-        :aria-required="required || undefined"
-        :aria-invalid="invalid || undefined"
-        :aria-disabled="disabled || undefined"
-        :aria-readonly="readonly || undefined"
+        v-bind="radioGroup.groupBindings({
+          labelledBy: labelId,
+          describedBy,
+          required,
+          invalid,
+        })"
       >
         <button
           v-for="option in options"
-          :key="optionToken(option)"
-          :ref="(element) => roving.register(option.value, resolveNativeElement(element))"
+          :key="radioGroup.optionToken(option.value)"
+          :ref="radioGroup.optionRef(option.value)"
           class="s-choice-card"
-          type="button"
-          :disabled="disabled || option.disabled"
-          :aria-checked="option.value === modelValue"
-          :tabindex="option.value === focusableValue ? 0 : -1"
-          role="radio"
-          @click="select(option.value)"
-          @keydown="roving.handleKeydown($event, option.value)"
+          v-bind="radioGroup.optionBindings(option)"
         >
           <span v-if="option.kicker" class="s-choice-card__kicker">{{ option.kicker }}</span>
           <span class="s-choice-card__title">{{ option.title }}</span>
@@ -83,10 +76,10 @@ export interface Props<T extends PublicSelectionKey = string> {
 
 <script setup lang="ts" generic="T extends SelectionKey = string">
 import { computed } from 'vue'
-import type { ComponentPublicInstance, VNodeChild } from 'vue'
+import type { VNodeChild } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { selectionKeyToken, useSelectionRoving } from '../_internal/useSelectionRoving'
+import { useRadioGroup } from '../_internal/useRadioGroup'
 import type { SelectionKey } from '../_internal/useSelectionRoving'
 import SFieldGroup from './SFieldGroup.vue'
 
@@ -116,30 +109,14 @@ defineSlots<{
 }>()
 const ownedAttrs = useOwnedAttrs({ component: 'SChoiceCards', owner: 'field group' })
 useInteractiveLeafRegistration({ owner: 'SChoiceCards' })
-const select = (value: T): void => {
-  if (props.disabled || props.readonly) return
-  emit('update:modelValue', value)
-}
-const rovingOptions = computed<readonly ChoiceCardOption<T>[]>(() => (
-  props.disabled
-    ? props.options.map((option) => ({ ...option, disabled: true }))
-    : props.options
-))
-const roving = useSelectionRoving({
-  options: rovingOptions,
+const radioGroup = useRadioGroup({
+  options: computed(() => props.options),
   selectedValue: computed(() => props.modelValue),
-  select,
+  disabled: computed(() => props.disabled),
+  readonly: computed(() => props.readonly),
+  update: (value) => emit('update:modelValue', value),
   component: 'SChoiceCards',
 })
-const focusableValue = roving.focusableValue
-const optionToken = (option: ChoiceCardOption<T>): string => selectionKeyToken(
-  'SChoiceCards',
-  option.value,
-  'option.value',
-)
-const resolveNativeElement = (element: Element | ComponentPublicInstance | null): HTMLElement | null => (
-  element instanceof HTMLElement ? element : null
-)
 </script>
 
 <style lang="postcss" src="./SChoiceCards.css" scoped></style>

package/src/components/shared/controls/SField.css

@@ -53,24 +53,12 @@
   @apply flex items-center;
 }
 
-.s-field__required {
-  @apply ml-0.5 text-danger-600 dark:text-danger-400;
-}
-
-.s-field__help,
-.s-field__error {
-  @apply mt-1 min-w-0 whitespace-normal text-xs;
-  overflow-wrap: anywhere;
-}
-
 .s-field__help {
   grid-area: help;
-  @apply text-surface-500 dark:text-surface-400;
 }
 
 .s-field__error {
   grid-area: error;
-  @apply text-danger-600 dark:text-danger-400;
 }
 
 .s-field[data-disabled='true'] .s-field__label,

package/src/components/shared/controls/SField.vue

@@ -10,7 +10,7 @@
   >
     <label v-if="hasLabel" :id="labelId" class="s-field__label" :for="controlId">
       <slot name="label">{{ label }}</slot>
-      <span v-if="required" class="s-field__required" aria-hidden="true">*</span>
+      <span v-if="required" :class="['s-field__required', FIELD_REQUIRED_CLASS]" aria-hidden="true">*</span>
     </label>
 
     <div class="s-field__control">
@@ -25,10 +25,10 @@
       />
     </div>
 
-    <p v-if="helpText || $slots.help" :id="helpId" class="s-field__help">
+    <p v-if="helpText || $slots.help" :id="helpId" :class="['s-field__help', FIELD_HELP_CLASS]">
       <slot name="help">{{ helpText }}</slot>
     </p>
-    <p v-if="isInvalid && (errorMessage || $slots.error)" :id="errorId" class="s-field__error">
+    <p v-if="isInvalid && (errorMessage || $slots.error)" :id="errorId" :class="['s-field__error', FIELD_ERROR_CLASS]">
       <slot name="error">{{ errorMessage }}</slot>
     </p>
   </div>
@@ -36,6 +36,12 @@
 
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
+import {
+  FIELD_ERROR_CLASS,
+  FIELD_HELP_CLASS,
+  FIELD_REQUIRED_CLASS,
+  useFieldSupportingText,
+} from '../../../internal/fieldPresentation'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 
 defineOptions({ inheritAttrs: false })
@@ -76,13 +82,11 @@ const ownedAttrs = useOwnedAttrs({ component: 'SField', owner: 'field root' })
 const isInvalid = computed(() => props.invalid)
 const hasLabel = computed(() => Boolean(props.label || slots.label))
 const labelId = computed(() => `${props.controlId}-label`)
-const helpId = computed(() => `${props.controlId}-help`)
-const errorId = computed(() => `${props.controlId}-error`)
-const describedBy = computed(() => {
-  const ids: string[] = []
-  if (props.helpText || slots.help) ids.push(helpId.value)
-  if (isInvalid.value && (props.errorMessage || slots.error)) ids.push(errorId.value)
-  return ids.length > 0 ? ids.join(' ') : undefined
+const fieldId = computed(() => props.controlId)
+const { describedBy, errorId, helpId } = useFieldSupportingText({
+  baseId: fieldId,
+  hasHelp: () => Boolean(props.helpText || slots.help),
+  hasError: () => Boolean(isInvalid.value && (props.errorMessage || slots.error)),
 })
 </script>
 

package/src/components/shared/controls/SFieldGroup.css

@@ -8,10 +8,6 @@
   @apply mb-2 min-w-0 text-sm font-medium text-surface-700 dark:text-surface-300;
 }
 
-.s-field-group__required {
-  @apply ml-0.5 text-danger-600 dark:text-danger-400;
-}
-
 .s-field-group__controls {
   @apply grid min-w-0 gap-2;
 }
@@ -32,23 +28,9 @@
   @apply grid-cols-4;
 }
 
-.s-field-group__help,
-.s-field-group__error {
-  @apply mt-1 min-w-0 whitespace-normal text-xs;
-  overflow-wrap: anywhere;
-}
-
-.s-field-group__help {
-  @apply text-surface-500 dark:text-surface-400;
-}
-
-.s-field-group__error {
-  @apply text-danger-600 dark:text-danger-400;
-}
-
 .s-field-group[data-disabled='true'] .s-field-group__legend,
 .s-field-group[data-readonly='true'] .s-field-group__legend {
-  @apply text-surface-400 dark:text-surface-500;
+  color: var(--s-field-disabled-foreground);
 }
 
 @media (max-width: 40rem) {

package/src/components/shared/controls/SFieldGroup.vue

@@ -14,7 +14,7 @@
   >
     <legend :id="labelId" class="s-field-group__legend">
       <slot name="label">{{ validatedLabel }}</slot>
-      <span v-if="required" class="s-field-group__required" aria-hidden="true">*</span>
+      <span v-if="required" :class="['s-field-group__required', FIELD_REQUIRED_CLASS]" aria-hidden="true">*</span>
     </legend>
 
     <div class="s-field-group__controls">
@@ -29,10 +29,10 @@
       />
     </div>
 
-    <p v-if="helpText || $slots.help" :id="helpId" class="s-field-group__help">
+    <p v-if="helpText || $slots.help" :id="helpId" :class="['s-field-group__help', FIELD_HELP_CLASS]">
       <slot name="help">{{ helpText }}</slot>
     </p>
-    <p v-if="invalid && (errorMessage || $slots.error)" :id="errorId" class="s-field-group__error">
+    <p v-if="invalid && (errorMessage || $slots.error)" :id="errorId" :class="['s-field-group__error', FIELD_ERROR_CLASS]">
       <slot name="error">{{ errorMessage }}</slot>
     </p>
   </fieldset>
@@ -40,6 +40,12 @@
 
 <script setup lang="ts">
 import { computed, useId, useSlots } from 'vue'
+import {
+  FIELD_ERROR_CLASS,
+  FIELD_HELP_CLASS,
+  FIELD_REQUIRED_CLASS,
+  useFieldSupportingText,
+} from '../../../internal/fieldPresentation'
 import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
   validateBoundedInteger,
@@ -92,13 +98,10 @@ const groupId = computed(() => validateDomId(
 ))
 const labelId = computed(() => `${groupId.value}-legend`)
 const validatedLabel = computed(() => validateNonEmptyString('SFieldGroup', 'label', props.label))
-const helpId = computed(() => `${groupId.value}-help`)
-const errorId = computed(() => `${groupId.value}-error`)
-const describedBy = computed(() => {
-  const ids: string[] = []
-  if (props.helpText || slots.help) ids.push(helpId.value)
-  if (props.invalid && (props.errorMessage || slots.error)) ids.push(errorId.value)
-  return ids.length > 0 ? ids.join(' ') : undefined
+const { describedBy, errorId, helpId } = useFieldSupportingText({
+  baseId: groupId,
+  hasHelp: () => Boolean(props.helpText || slots.help),
+  hasError: () => Boolean(props.invalid && (props.errorMessage || slots.error)),
 })
 const validatedLayout = computed<SFieldGroupLayout>(() => validateExactString(
   'SFieldGroup',

package/src/components/shared/controls/SFieldLabel.css

@@ -9,4 +9,3 @@
 .s-field-label[data-size='md'] { @apply text-sm; }
 .s-field-label[data-align='end'] { @apply text-right; }
 .s-field-label[data-disabled='true'] { @apply text-surface-400 dark:text-surface-500; }
-.s-field-label__required { @apply ml-0.5 text-danger-600 dark:text-danger-400; }

package/src/components/shared/controls/SFieldLabel.vue

@@ -8,12 +8,13 @@
     :data-disabled="disabled || undefined"
   >
     <slot />
-    <span v-if="required" class="s-field-label__required" aria-hidden="true">*</span>
+    <span v-if="required" :class="['s-field-label__required', FIELD_REQUIRED_CLASS]" aria-hidden="true">*</span>
   </label>
 </template>
 
 <script setup lang="ts">
 import type { VNodeChild } from 'vue'
+import { FIELD_REQUIRED_CLASS } from '../../../internal/fieldPresentation'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 
 defineOptions({ inheritAttrs: false })

package/src/components/shared/controls/SInteractiveSurface.css

@@ -51,9 +51,9 @@
 .s-interactive-surface[data-radius='md'] { @apply rounded-md; }
 .s-interactive-surface[data-radius='lg'] { @apply rounded-lg; }
 .s-interactive-surface[data-radius='xl'] { @apply rounded-xl; }
-.s-interactive-surface[data-tone='primary'] { @apply border-primary-200 bg-primary-500/5 dark:border-primary-500/30 dark:bg-primary-500/10; }
-.s-interactive-surface[data-tone='success'] { @apply border-success-200 bg-success-50 dark:border-success-800 dark:bg-success-950; }
-.s-interactive-surface[data-tone='danger'] { @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950; }
+.s-interactive-surface[data-s-tone='primary'] { @apply border-primary-200 bg-primary-500/5 dark:border-primary-500/30 dark:bg-primary-500/10; }
+.s-interactive-surface[data-s-tone='success'] { @apply border-success-200 bg-success-50 dark:border-success-800 dark:bg-success-950; }
+.s-interactive-surface[data-s-tone='danger'] { @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950; }
 .s-interactive-surface[data-selected='true'] { @apply border-primary-400 bg-primary-50 dark:border-primary-600 dark:bg-primary-950; }
 .s-interactive-surface[data-pressed='true'] { @apply border-primary-500 bg-primary-100 dark:border-primary-500 dark:bg-primary-950/70; }
 .s-interactive-surface[data-disabled='true'] { @apply cursor-not-allowed opacity-60; }

package/src/components/shared/controls/SInteractiveSurface.vue

@@ -5,6 +5,7 @@ import type { STooltipTriggerBinding } from '../data-display/STooltip.vue'
 import { hasOwn } from '../../../internal/es2020'
 import { resolveLinkTarget } from '../../../internal/linkTarget'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import {
   PassiveContentBoundary,
   useInteractiveLeafRegistration,
@@ -14,6 +15,7 @@ import {
 defineOptions({ inheritAttrs: false })
 
 export type InteractiveSurfaceTone = 'default' | 'primary' | 'success' | 'danger'
+const INTERACTIVE_SURFACE_TONES = ['default', 'primary', 'success', 'danger'] as const satisfies readonly InteractiveSurfaceTone[]
 export type InteractiveSurfaceDensity = 'compact' | 'comfortable'
 export type InteractiveSurfacePadding = 'none' | 'sm' | 'md'
 export type InteractiveSurfaceRadius = 'md' | 'lg' | 'xl'
@@ -84,6 +86,12 @@ defineSlots<{
 }>()
 
 const ownedAttrs = useOwnedAttrs({ component: 'SInteractiveSurface', owner: 'interactive surface owner' })
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SInteractiveSurface',
+  'tone',
+  props.tone,
+  INTERACTIVE_SURFACE_TONES,
+))
 
 const assertOptionalBoolean = (surface: Record<string, unknown>, field: 'disabled' | 'pressed'): void => {
   if (surface[field] !== undefined && typeof surface[field] !== 'boolean') {
@@ -213,7 +221,6 @@ const validatedTooltipTrigger = computed<STooltipTriggerBinding | undefined>(()
   }
   return candidate as STooltipTriggerBinding
 })
-
 const activationBindings = (): Readonly<Record<string, unknown>> => ({
   ...ownedAttrs.bindings(),
   ...(validatedTooltipTrigger.value ?? {}),
@@ -282,9 +289,9 @@ function activateAction(event: MouseEvent): void {
 <template>
   <div
     v-bind="surfaceMode === 'static' ? ownedAttrs.bindings() : undefined"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-interactive-surface"
     :data-mode="surfaceMode"
-    :data-tone="tone"
     :data-density="density"
     :data-padding="padding"
     :data-radius="radius"

package/src/components/shared/controls/SMarker.css

@@ -1,19 +1,19 @@
 @reference "../../../styles/reference.css";
 .s-marker { @apply inline-block h-2 w-2 shrink-0 rounded-full bg-surface-400 ring-1 ring-inset ring-surface-500/50; }
 .s-marker[data-size='lg'] { @apply h-7 w-7 ring-2 ring-white/80 shadow-sm dark:ring-surface-950/80; }
-.s-marker[data-tone='primary'] { @apply bg-primary-500 ring-primary-600/50; }
-.s-marker[data-tone='success'] { @apply bg-success-500 ring-success-600/50; }
-.s-marker[data-tone='blue'] { @apply bg-blue-400 ring-blue-500/50; }
-.s-marker[data-tone='sky'] { @apply bg-sky-400 ring-sky-500/50; }
-.s-marker[data-tone='indigo'] { @apply bg-indigo-400 ring-indigo-500/50; }
-.s-marker[data-tone='emerald'] { @apply bg-emerald-400 ring-emerald-500/50; }
-.s-marker[data-tone='green'] { @apply bg-green-400 ring-green-500/50; }
-.s-marker[data-tone='teal'] { @apply bg-teal-400 ring-teal-500/50; }
-.s-marker[data-tone='amber'] { @apply bg-amber-400 ring-amber-500/50; }
-.s-marker[data-tone='orange'] { @apply bg-orange-400 ring-orange-500/50; }
-.s-marker[data-tone='rose'] { @apply bg-rose-400 ring-rose-500/50; }
-.s-marker[data-tone='pink'] { @apply bg-pink-400 ring-pink-500/50; }
-.s-marker[data-tone='fuchsia'] { @apply bg-fuchsia-400 ring-fuchsia-500/50; }
-.s-marker[data-tone='cyan'] { @apply bg-cyan-400 ring-cyan-500/50; }
-.s-marker[data-tone='lime'] { @apply bg-lime-400 ring-lime-500/50; }
-.s-marker[data-tone='custom'] { background-color: var(--s-marker-custom-color); --tw-ring-color: var(--s-marker-custom-color); }
+.s-marker[data-s-tone='primary'] { @apply bg-primary-500 ring-primary-600/50; }
+.s-marker[data-s-tone='success'] { @apply bg-success-500 ring-success-600/50; }
+.s-marker[data-s-tone='blue'] { @apply bg-blue-400 ring-blue-500/50; }
+.s-marker[data-s-tone='sky'] { @apply bg-sky-400 ring-sky-500/50; }
+.s-marker[data-s-tone='indigo'] { @apply bg-indigo-400 ring-indigo-500/50; }
+.s-marker[data-s-tone='emerald'] { @apply bg-emerald-400 ring-emerald-500/50; }
+.s-marker[data-s-tone='green'] { @apply bg-green-400 ring-green-500/50; }
+.s-marker[data-s-tone='teal'] { @apply bg-teal-400 ring-teal-500/50; }
+.s-marker[data-s-tone='amber'] { @apply bg-amber-400 ring-amber-500/50; }
+.s-marker[data-s-tone='orange'] { @apply bg-orange-400 ring-orange-500/50; }
+.s-marker[data-s-tone='rose'] { @apply bg-rose-400 ring-rose-500/50; }
+.s-marker[data-s-tone='pink'] { @apply bg-pink-400 ring-pink-500/50; }
+.s-marker[data-s-tone='fuchsia'] { @apply bg-fuchsia-400 ring-fuchsia-500/50; }
+.s-marker[data-s-tone='cyan'] { @apply bg-cyan-400 ring-cyan-500/50; }
+.s-marker[data-s-tone='lime'] { @apply bg-lime-400 ring-lime-500/50; }
+.s-marker[data-s-tone='custom'] { background-color: var(--s-marker-custom-color); --tw-ring-color: var(--s-marker-custom-color); }

package/src/components/shared/controls/SMarker.vue

@@ -1,8 +1,8 @@
 <template>
   <span
     v-bind="ownedAttrs.bindings()"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-marker"
-    :data-tone="marker.tone"
     :data-size="size"
     :style="customProperties"
     aria-hidden="true"
@@ -17,12 +17,38 @@ export type { SCustomMarker, SMarker, SMarkerTone } from '../_internal/markerCon
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import { createCustomMarker, type SMarker } from '../_internal/markerContract'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<{ marker: SMarker; size?: 'sm' | 'lg' }>(), { size: 'sm' })
 const ownedAttrs = useOwnedAttrs({ component: 'SMarker', owner: 'marker root' })
+const MARKER_TONES = [
+  'surface',
+  'primary',
+  'success',
+  'blue',
+  'sky',
+  'indigo',
+  'emerald',
+  'green',
+  'teal',
+  'amber',
+  'orange',
+  'rose',
+  'pink',
+  'fuchsia',
+  'cyan',
+  'lime',
+  'custom',
+] as const
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SMarker',
+  'marker.tone',
+  props.marker.tone,
+  MARKER_TONES,
+))
 const customProperties = computed(() => {
   if (props.marker.tone !== 'custom') return undefined
   createCustomMarker(props.marker.color)

package/src/components/shared/controls/SSegmentedControl.vue

@@ -17,27 +17,21 @@
         :data-option-wrap="optionWrap"
         :data-invalid="group.invalid || undefined"
         :data-readonly="group.readonly || undefined"
-        role="radiogroup"
-        :aria-labelledby="group.labelId"
-        :aria-describedby="group.describedBy"
-        :aria-invalid="group.invalid || undefined"
-        :aria-required="group.required || undefined"
-        :aria-readonly="group.readonly || undefined"
+        v-bind="radioGroup.groupBindings({
+          labelledBy: group.labelId,
+          describedBy: group.describedBy,
+          required: group.required,
+          invalid: group.invalid,
+        })"
       >
         <button
           v-for="option in options"
-          :key="optionToken(option)"
-          :ref="(element) => roving.register(option.value, resolveNativeElement(element))"
+          :key="radioGroup.optionToken(option.value)"
+          :ref="radioGroup.optionRef(option.value)"
           class="s-segmented-control__item"
           :data-size="size"
-          type="button"
-          :aria-checked="option.value === modelValue"
-          :disabled="group.disabled || option.disabled"
-          role="radio"
-          :tabindex="option.value === focusableValue ? 0 : -1"
           :title="option.title"
-          @click="selectOption(option)"
-          @keydown="roving.handleKeydown($event, option.value)"
+          v-bind="radioGroup.optionBindings(option)"
         >{{ option.label }}</button>
       </div>
     </template>
@@ -74,10 +68,9 @@ export interface Props<T extends PublicSelectionKey = string> {
 
 <script setup lang="ts" generic="T extends SelectionKey = string">
 import { computed } from 'vue'
-import type { ComponentPublicInstance } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { selectionKeyToken, useSelectionRoving } from '../_internal/useSelectionRoving'
+import { useRadioGroup } from '../_internal/useRadioGroup'
 import type { SelectionKey } from '../_internal/useSelectionRoving'
 import SFieldGroup from './SFieldGroup.vue'
 
@@ -100,35 +93,14 @@ const emit = defineEmits<{
 }>()
 const ownedAttrs = useOwnedAttrs({ component: 'SSegmentedControl', owner: 'field group root' })
 useInteractiveLeafRegistration({ owner: 'SSegmentedControl' })
-
-function selectOption(option: SegmentedControlOption<T>): void {
-  if (props.disabled || props.readonly || option.disabled) {
-    return
-  }
-  emit('update:modelValue', option.value)
-}
-
-const rovingOptions = computed(() => props.options.map((option) => ({
-  value: option.value,
-  disabled: props.disabled || option.disabled,
-})))
-const roving = useSelectionRoving({
-  options: rovingOptions,
+const radioGroup = useRadioGroup({
+  options: computed(() => props.options),
   selectedValue: computed(() => props.modelValue),
-  select: (value) => {
-    if (!props.disabled && !props.readonly) emit('update:modelValue', value)
-  },
+  disabled: computed(() => props.disabled),
+  readonly: computed(() => props.readonly),
+  update: (value) => emit('update:modelValue', value),
   component: 'SSegmentedControl',
 })
-const focusableValue = roving.focusableValue
-const optionToken = (option: SegmentedControlOption<T>): string => selectionKeyToken(
-  'SSegmentedControl',
-  option.value,
-  'option.value',
-)
-const resolveNativeElement = (element: Element | ComponentPublicInstance | null): HTMLElement | null => (
-  element instanceof HTMLElement ? element : null
-)
 </script>
 
 <style lang="postcss" src="./SSegmentedControl.css" scoped></style>