Примитивы

SegmentedControl

Ряд взаимоисключающих вариантов — то есть radiogroup, и сделан именно как radiogroup. Радиокнопки скрыты только отрисовкой, но не display: none: это выкинуло бы их из таб-ордера и из группы, по которой ходят стрелки. Браузер по-прежнему даёт исключающий выбор и навигацию, а подпись только рисует.

Код

index.html

<fieldset role="radiogroup" aria-label="Theme" class="aura-segmented">
  <label class="aura-segmented__option">
    <input type="radio" class="aura-segmented__input" name="theme" value="light" checked />Light
  </label>
  <label class="aura-segmented__option">
    <input type="radio" class="aura-segmented__input" name="theme" value="dark" />Dark
  </label>
  <label class="aura-segmented__option">
    <input type="radio" class="aura-segmented__input" name="theme" value="system" disabled />System
  </label>
</fieldset>

Demo.tsx

import { SegmentedControl } from '@ilomee/aura-react';

const OPTIONS = [
  { value: 'light', label: 'Light' },
  { value: 'dark', label: 'Dark' },
  { value: 'system', label: 'System', disabled: true },
];

export default function Demo() {
  return <SegmentedControl label="Theme" name="theme" options={OPTIONS} defaultValue="light" />;
}

Demo.vue

<script setup lang="ts">
import { ref } from 'vue';
import { SegmentedControl } from '@ilomee/aura-vue';

const theme = ref('light');
</script>

<template>
  <SegmentedControl
    v-model="theme"
    label="Theme"
    :options="[
      { value: 'light', label: 'Light' },
      { value: 'dark', label: 'Dark' },
    ]"
  />
</template>

Demo.svelte

<script lang="ts">
  import { SegmentedControl } from '@ilomee/aura-svelte';

  let theme = $state('light');
</script>

<SegmentedControl
  bind:value={theme}
  label="Theme"
  options={[
    { value: 'light', label: 'Light' },
    { value: 'dark', label: 'Dark' },
  ]}
/>

Используется как aura-segmented-control.

demo.component.ts

import { AuraSegmentedControl } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraSegmentedControl],
  template: `<aura-segmented-control label="Theme" [options]="options" [(value)]="theme" />`,
})
export class DemoComponent {
  theme = 'light';
  options = [
    { value: 'light', label: 'Light' },
    { value: 'dark', label: 'Dark' },
  ];
}

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
label	`string`	—
options	`AuraOption[] \| null`	—
value	`string`	—
defaultValue	`string`	`''`
onValueChange	`(value: string) => void`	—
name	`string`	—	Сгенерированный id берётся у самого фреймворка, поэтому он совпадает при SSR и гидратации.
disabled	`boolean`	—

Имя	Тип	По умолчанию	Примечания
label	`string`	—
options	`AuraOption[] \| null`	—
modelValueдвусторонний	`string`	—
defaultValue	`string`	`''`
name	`string`	—	Сгенерированный id берётся у самого фреймворка, поэтому он совпадает при SSR и гидратации.
disabled	`boolean`	`false`
update:modelValueсобытие	`(value: string) => void`	—

Имя	Тип	По умолчанию	Примечания
label	`string`	—
options	`AuraOption[] \| null`	—
valueдвусторонний	`string`	`''`
name	`string`	—	Сгенерированный id берётся у самого фреймворка, поэтому он совпадает при SSR и гидратации.
disabled	`boolean`	`false`
onchange	`(value: string) => void`	—

Имя	Тип	По умолчанию
label	`string`	—
options	`AuraOption[] \| null`	`[]`
value	`string`	`''`
name	`string`	—
disabled	`boolean`	`false`
valueChangeсобытие	`EventEmitter<string>`	—

Какие классы отдаёт

Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.

Класс	Роль	Примечания
.aura-segmented	база	Обязательный. Без него модификатор не работает.
.aura-segmented__option	элемент
.aura-segmented__input	элемент

Токены и правила

components.css

дорожка: var(--surface-2) · var(--r2)
выбран: var(--surface) + var(--shadow-1), via :has(:checked)
клавиатура: native — arrows move and select