@vectoriox/iox-ui 5.39.0 → 5.41.0

package/index.d.ts

@@ -1726,6 +1726,16 @@ declare const ON_STATE_ROLES: ReadonlyArray<string>;
  * the same Item open state with a picked trigger.
  */
 declare function componentStatesFor(type: string | null | undefined, role?: string | null, insideItem?: boolean, itemsToPick?: boolean): ComponentState[];
+/**
+ * The states a node's rules are emitted LAST in (CC4b): `on` (`[data-iox-on]`) and `focus` (`:focus-visible`) tie on
+ * specificity, so whichever comes later wins — a focused Segmented option that is ON must keep its focus ring over the
+ * on shadow (board 10). Every renderer emits a node's state rules in `orderStatesForEmit` order.
+ */
+declare const LAST_EMITTED_STATES: ReadonlyArray<string>;
+/** `states` in the order their rules are emitted: as given, with the LAST_EMITTED_STATES moved to the end. */
+declare function orderStatesForEmit<T extends string>(states: ReadonlyArray<T>): T[];
+/** True when a rule key (`<nodeId>:<state>`) holds a state emitted last. */
+declare function isLastEmittedStateKey(key: string): boolean;
 /**
  * What follows `.iox-node-<id>` in a stored state's rule: `:hover`, `:focus-visible`, or a component
  * state's attribute selector (`[aria-current="page"]`). Shared by the builder canvas and both engine paths.
@@ -2044,6 +2054,9 @@ declare const CURRENT_LINK_TYPES: ReadonlyArray<string>;
 /** The types that are pure decoration to assistive technology (an Icon has no name of its own). */
 declare const DECORATIVE_TYPES: ReadonlyArray<string>;
 declare const DIALOG_NODE_TYPE = "Dialog";
+/** A Segmented control's root (CC4b) is a radio group that must be named (board 10: an empty name is an audit
+ *  finding). The main entry does not import composite-core, so the role is spelled here — a11y spec pins it. */
+declare const NAMED_GROUP_ROLES: ReadonlyArray<string>;
 /** Carries the min-width (px) at which an open dialog closes itself; the engine listens on it. */
 declare const DIALOG_CLOSE_ABOVE_ATTRIBUTE = "data-iox-dialog-close-above";
 declare enum A11yAttribute {
@@ -2100,6 +2113,14 @@ declare function syncNodeA11yAttributes(el: {
 declare function needsAccessibleName(node: (A11yNodeSource & {
     children?: ReadonlyArray<unknown> | null;
 }) | null | undefined): boolean;
+/**
+ * True for a GROUP that must be named and is not — a Segmented control's radio group (CC4b, board 10): a screen reader
+ * says "radio group" and nothing about what is being chosen. The responsive audit flags it; named in Bindings ▸
+ * Accessibility.
+ */
+declare function needsGroupName(node: (A11yNodeSource & {
+    role?: string | null;
+}) | null | undefined): boolean;
 
 /**
  * Reduced motion (CC1, R1 — complex-components plan §2d). The token sheet already collapses the
@@ -3404,5 +3425,5 @@ declare class GalleryLoop {
     private emit;
 }
 
-export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DataSourceSortDir, DeclarationContext, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, IoxVideoComponent, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, ON_STATE_ROLES, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, RESERVED_ALIAS_PREFIX, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, SORT_PARAM, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, SectionComponent, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, applyBindingPipes, applyFeel, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildInteractionKeyframes, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, excludeSelf, feelFor, finalKeyframe, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, planSwiperOptions, prefersReducedMotion, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, sliderControlElements, sliderInputsFromProps, sliderInputsOf, sortParamValue, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, targetedStateSelector, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
+export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DataSourceSortDir, DeclarationContext, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, ON_STATE_ROLES, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, RESERVED_ALIAS_PREFIX, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, SORT_PARAM, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, SectionComponent, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, applyBindingPipes, applyFeel, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildInteractionKeyframes, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, excludeSelf, feelFor, finalKeyframe, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isLastEmittedStateKey, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, planSwiperOptions, prefersReducedMotion, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, sliderControlElements, sliderInputsFromProps, sliderInputsOf, sortParamValue, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, targetedStateSelector, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
 export type { A11yNodeSource, BoundValueSpec, BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSort, DataSourceSpec, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, RelativeInputs, RelativeSourceKind, RelativeSourceSpec, ResolveSiblingsOptions, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SiblingsResult, SliderBootOptions, SliderControlElements, SliderInputs, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.39.0",
+  "version": "5.41.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/src/actions-core/element-actions.ts

@@ -1,11 +1,12 @@
-import { AccordionRole, CompositeItemAction, DisclosureRole, SLIDE_TO_ROW, TabsRole } from '@vectoriox/iox-ui/composite-core';
+import { AccordionRole, CompositeItemAction, DisclosureRole, SegmentedRole, SLIDE_TO_ROW, TabsRole } from '@vectoriox/iox-ui/composite-core';
 
 import { ActionDescriptor } from './action.model';
 
 /** The items an item action may target: an accordion's item, or a disclosure (its own one item). */
 const ITEM_TARGET_ROLES = [AccordionRole.Item, DisclosureRole.Disclosure];
-/** Open also takes a TAB (CC4a): it turns it on. A Tabs always shows one, so Close and Toggle never aim at one. */
-const OPEN_TARGET_ROLES = [...ITEM_TARGET_ROLES, TabsRole.Trigger];
+/** Open also takes a TAB (CC4a) and a Segmented control's OPTION (CC4b, "Turn on"): it turns it on. Both always show
+ *  one, so Close and Toggle never aim at either. */
+const OPEN_TARGET_ROLES = [...ITEM_TARGET_ROLES, TabsRole.Trigger, SegmentedRole.Option];
 
 /**
  * The ELEMENT action catalog (actions plan A1) — what a node can DO, as data. One list feeds the

package/src/composite-core/accordion.ts

@@ -481,6 +481,7 @@ const DOM_ID_PREFIX: Readonly<Record<CompositeKind, string>> = {
     [CompositeKind.Accordion]: 'iox-acc',
     [CompositeKind.Disclosure]: 'iox-dis',
     [CompositeKind.Tabs]: 'iox-tab',
+    [CompositeKind.Segmented]: 'iox-seg',
 };
 
 /** The ARIA pairing ids of an item: unique per composite (its SCOPE id — `compositeScopeId`) and per item (its key). */

package/src/composite-core/composite-kinds.ts

@@ -2,8 +2,9 @@
  * The composites' kinds and roles. Two families:
  * - OPEN/CLOSE (CC2 Accordion, CC2.1 Disclosure — composite plan T9 / T21): a Disclosure is a one-item accordion whose
  *   ROOT is its item, so both run the same state machine, attribute planners and runtime (`accordion-runtime.ts`);
- * - EXCLUSIVE (CC4 Tabs — composite T17; the Segmented control joins in CC4b): exactly one item is on, a trigger and
- *   its panel paired by `itemKey` (`tabs.ts`, `exclusive-runtime.ts`).
+ * - EXCLUSIVE (CC4 Tabs — composite T17; CC4b the Segmented control — T32): exactly one item is on; a Tabs' trigger
+ *   and its panel pair by `itemKey` (`tabs.ts`), a Segmented control's options have no panel (`segmented.ts`); both run
+ *   `exclusive-runtime.ts`.
  * Every consumer that treats "an item", "a trigger" or "a panel" alike asks these predicates, never a role literal.
  */
 
@@ -11,12 +12,13 @@ export enum CompositeKind {
     Accordion = 'accordion',
     Disclosure = 'disclosure',
     Tabs = 'tabs',
+    Segmented = 'segmented',
 }
 
 /** The kinds the open/close runtime runs (`AccordionRuntime`). */
 export type ToggleCompositeKind = CompositeKind.Accordion | CompositeKind.Disclosure;
 /** The kinds the exclusive runtime runs (`ExclusiveRuntime`): one item on at a time, always one. */
-export type ExclusiveCompositeKind = CompositeKind.Tabs;
+export type ExclusiveCompositeKind = CompositeKind.Tabs | CompositeKind.Segmented;
 
 export enum AccordionRole {
     Accordion = 'accordion',
@@ -53,6 +55,17 @@ export enum TabsRole {
     Panel = 'tabs.panel',
 }
 
+/**
+ * SEGMENTED (CC4b — composite T32; complex-components board 10). One of a few, always one on, FIXED options (R3): the
+ * root IS the radio group and holds the options directly — no list, no panels. An option may hold the optional saving
+ * badge (inside it, so its words join the option's accessible name).
+ */
+export enum SegmentedRole {
+    Segmented = 'segmented',
+    Option = 'segmented.option',
+    Badge = 'segmented.badge',
+}
+
 interface RoleLike { role?: string | null }
 
 /** The roles each open/close kind plays in the shared runtime. */
@@ -69,11 +82,12 @@ export const COMPOSITE_KIND_ROLES: Readonly<Record<ToggleCompositeKind, Composit
     [CompositeKind.Disclosure]: { root: DisclosureRole.Disclosure, item: DisclosureRole.Disclosure, trigger: DisclosureRole.Trigger, panel: DisclosureRole.Panel, icon: DisclosureRole.Icon },
 };
 
-/** The roles each EXCLUSIVE kind plays: its root, the holder of its triggers, its triggers, and — when its items show
- *  a panel (Tabs; a Segmented control has none) — the holder of its panels and the panels. */
+/** The roles each EXCLUSIVE kind plays: its root, the holder of its triggers (null when the root holds them — a
+ *  Segmented control), its triggers, and — when its items show a panel (Tabs; a Segmented control has none) — the
+ *  holder of its panels and the panels. */
 export interface ExclusiveKindRoles {
     root: string;
-    list: string;
+    list: string | null;
     trigger: string;
     panels: string | null;
     panel: string | null;
@@ -81,6 +95,7 @@ export interface ExclusiveKindRoles {
 
 export const EXCLUSIVE_KIND_ROLES: Readonly<Record<ExclusiveCompositeKind, ExclusiveKindRoles>> = {
     [CompositeKind.Tabs]: { root: TabsRole.Tabs, list: TabsRole.List, trigger: TabsRole.Trigger, panels: TabsRole.Panels, panel: TabsRole.Panel },
+    [CompositeKind.Segmented]: { root: SegmentedRole.Segmented, list: null, trigger: SegmentedRole.Option, panels: null, panel: null },
 };
 
 const KINDS = Object.values(CompositeKind);
@@ -200,6 +215,27 @@ export function isTabsPart(node: RoleLike | null | undefined): boolean {
     return compositeKindOfRole(node?.role) === CompositeKind.Tabs;
 }
 
+/** True for any part of a Segmented control (its root included). */
+export function isSegmentedPart(node: RoleLike | null | undefined): boolean {
+    return compositeKindOfRole(node?.role) === CompositeKind.Segmented;
+}
+
+/** The exclusive kind a node's role belongs to (`segmented.option` → Segmented), or null. */
+export function exclusiveKindOf(node: RoleLike | null | undefined): ExclusiveCompositeKind | null {
+    const kind = compositeKindOfRole(node?.role);
+    return isExclusiveKind(kind) ? kind : null;
+}
+
+/** True when an exclusive root holds its triggers itself (a Segmented control), not in a list part. */
+export function exclusiveRootHoldsTriggers(kind: ExclusiveCompositeKind): boolean {
+    return EXCLUSIVE_KIND_ROLES[kind].list === null;
+}
+
+/** True when an exclusive kind's items show a panel (Tabs), so a trigger and its panel are a pair. */
+export function exclusiveKindHasPanels(kind: ExclusiveCompositeKind | null | undefined): boolean {
+    return !!kind && EXCLUSIVE_KIND_ROLES[kind].panel !== null;
+}
+
 /** A root of either family — anything that runs a composite runtime. */
 export function isAnyCompositeRoot(node: RoleLike | null | undefined): boolean {
     return isCompositeRoot(node) || isExclusiveRoot(node);

package/src/composite-core/exclusive-runtime.ts

@@ -1,15 +1,16 @@
 import { roleClass } from '@vectoriox/iox-ui/design-core';
 
-import { accordionDomIds, accordionFocusIndex, COMPOSITE_ATTRIBUTE, ITEM_KEY_ATTRIBUTE, ON_ATTRIBUTE, SCOPE_ATTRIBUTE } from './accordion';
+import { accordionDomIds, accordionFocusIndex, COMPOSITE_ATTRIBUTE, DEFAULT_ON_ATTRIBUTE, ITEM_KEY_ATTRIBUTE, ON_ATTRIBUTE, SCOPE_ATTRIBUTE } from './accordion';
 import { ITEM_OFF_EVENT, ITEM_ON_EVENT } from './accordion-runtime';
-import { CompositeKind, EXCLUSIVE_KIND_ROLES, ExclusiveCompositeKind, isExclusiveKind } from './composite-kinds';
+import { CompositeKind, EXCLUSIVE_KIND_ROLES, ExclusiveCompositeKind, exclusiveRootHoldsTriggers, isExclusiveKind } from './composite-kinds';
+import { segmentedKeyAction } from './segmented';
 import {
     ACTIVATE_ON_ATTRIBUTE, ORIENTATION_ATTRIBUTE, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, TabsActivateOn, TabsBehaviour, tabsKeyAction, TabsOrientation,
 } from './tabs';
 
 /**
- * The EXCLUSIVE composites' RUNTIME (CC4a Tabs; the Segmented control runs it too in CC4b) — ONE copy, DOM only, for
- * the builder canvas and the live site (both engine paths render the same markup from `tabs.ts`'s attribute planners):
+ * The EXCLUSIVE composites' RUNTIME (CC4a Tabs; CC4b the Segmented control) — ONE copy, DOM only, for the builder canvas
+ * and the live site (both engine paths render the same markup from `tabs.ts`'s and `segmented.ts`'s attribute planners):
  *
  *   [root]   data-iox-composite="tabs"  data-iox-activate-on  data-iox-orientation  [data-iox-scope]
  *     .iox-role-tabs-list      role=tablist  [aria-orientation=vertical]
@@ -25,9 +26,20 @@ import {
  * `iox-item-off` on the trigger AND its panel (the `itemOn` / `itemOff` interaction triggers). The item shown is
  * FORCED ?? LIVE: the builder forces one (a selection inside an inactive panel); the live site forces nothing. The
  * server's first state is trusted (no flash).
+ *
+ * A SEGMENTED control (CC4b) is the same machine with no panels and the APG RADIO GROUP's markup and keys:
+ *
+ *   [root]   data-iox-composite="segmented"  role=radiogroup  aria-label  data-iox-default-on  [data-iox-scope]
+ *     .iox-role-segmented-option  role=radio  aria-checked  tabindex 0|-1  data-iox-item-key  [data-iox-on]
+ *
+ * ← → move along the row (mirrored under RTL), ↑ ↓ the DOM order, each move wrapping and turning the option on; with no
+ * server state the option on is the root's default (`data-iox-default-on`).
  */
 
 export interface ExclusiveRuntimeOptions {
+    /** The kind it runs (else the root's `data-iox-composite`, else a Tabs) — the builder canvas knows it from the node
+     *  before the attribute is on the element. */
+    kind?: ExclusiveCompositeKind;
     /** The scope id the ARIA ids are built from (else `data-iox-scope`, else the root's `iox-node-<id>`). A function is
      *  read at every stamp (the builder canvas: a preview row's index is known once it is in the page). */
     rootId?: string | (() => string);
@@ -41,6 +53,9 @@ export interface ExclusiveRuntimeOptions {
     onChange?: (key: string) => void;
     /** Re-stamp when the markup under the root changes (the builder canvas re-renders parts). */
     observe?: boolean;
+    /** The key on when there is no server state (the builder canvas: a Segmented control's On by default), else the
+     *  root's `data-iox-default-on`, else the first item. */
+    defaultKey?: () => string | null;
 }
 
 const KIND_ROOT = (kind: ExclusiveCompositeKind) => `[${COMPOSITE_ATTRIBUTE}="${kind}"]`;
@@ -104,14 +119,14 @@ export class ExclusiveRuntime {
     readonly kind: ExclusiveCompositeKind;
 
     constructor(readonly root: HTMLElement, private readonly options: ExclusiveRuntimeOptions = {}) {
-        this.kind = kindOf(root);
+        this.kind = options.kind ?? kindOf(root);
         this.behaviourValue = options.behaviour ?? behaviourOf(root);
         root.setAttribute(COMPOSITE_ATTRIBUTE, this.kind);
         EXCLUSIVE_RUNTIMES.set(root, this);
-        // The server rendered the first state (every trigger keyed, one on); with no server state the first is on.
+        // The server rendered the first state (every trigger keyed, one on); with no server state the default is on.
         const triggers = this.triggers();
         const serverOn = !options.behaviour ? triggers.find(t => t.hasAttribute(ON_ATTRIBUTE) && t.hasAttribute(ITEM_KEY_ATTRIBUTE)) : undefined;
-        this.live = serverOn ? this.keyOf(serverOn) : (triggers[0] ? this.keyOf(triggers[0]) : null);
+        this.live = serverOn ? this.keyOf(serverOn) : this.defaultKey();
         this.awaitingItems = !triggers.length;
         // Capture: on the builder canvas every part's own listener stops the click (it selects that part), and the tab
         // must still turn on — the canvas is a live runtime.
@@ -205,6 +220,18 @@ export class ExclusiveRuntime {
         return this.triggers().map(t => this.keyOf(t));
     }
 
+    /** The key on with no server state: the asked default when it names an item, else the first item. */
+    private defaultKey(): string | null {
+        const keys = this.keys();
+        const asked = this.options.defaultKey?.() ?? this.root.getAttribute(DEFAULT_ON_ATTRIBUTE);
+        return asked && keys.includes(asked) ? asked : keys[0] ?? null;
+    }
+
+    /** True for a Segmented control: the root IS its radio group and holds its options. */
+    private get holdsTriggers(): boolean {
+        return exclusiveRootHoldsTriggers(this.kind);
+    }
+
     /** The element(s) that ARE the tablist: the ones a renderer already gave the role (the engine's component-path
      *  Repeater puts it on its inner root, which holds the tabs), else the elements carrying the list's role class. */
     private lists(): HTMLElement[] {
@@ -234,12 +261,13 @@ export class ExclusiveRuntime {
         const keys = triggers.map(t => this.keyOf(t));
         if (this.awaitingItems && keys.length) {
             this.awaitingItems = false;
-            this.live = keys[0];
+            this.live = this.defaultKey();
             first = true;
         }
-        if (this.live === null || !keys.includes(this.live)) this.live = keys[0] ?? null;
+        if (this.live === null || !keys.includes(this.live)) this.live = this.defaultKey();
         const forced = this.options.forced?.() ?? null;
         const next = forced !== null && keys.includes(forced) ? forced : this.live;
+        if (this.holdsTriggers) return this.stampRadioGroup(triggers, next, first);
         const rootId = this.rootId();
         const vertical = this.behaviourValue.orientation === TabsOrientation.Vertical;
         for (const list of this.lists()) {
@@ -274,6 +302,28 @@ export class ExclusiveRuntime {
             setAttr(panel, ON_ATTRIBUTE, on ? '' : null);
             setAttr(panel, 'hidden', on ? null : '');
         }
+        this.announce(triggers, next, first, panelOf);
+    }
+
+    /** A Segmented control's markup (CC4b): the root a named radio group, each option a radio, one checked. */
+    private stampRadioGroup(options: HTMLElement[], next: string | null, first: boolean): void {
+        setAttr(this.root, 'role', 'radiogroup');
+        if (this.options.label) setAttr(this.root, 'aria-label', this.options.label() || null);
+        for (const option of options) {
+            const key = this.keyOf(option);
+            const on = key === next;
+            setAttr(option, ITEM_KEY_ATTRIBUTE, key);
+            setAttr(option, 'type', option.tagName === 'BUTTON' ? 'button' : null);
+            setAttr(option, 'role', 'radio');
+            setAttr(option, 'aria-checked', on ? 'true' : 'false');
+            setAttr(option, 'tabindex', on ? '0' : '-1');
+            setAttr(option, ON_ATTRIBUTE, on ? '' : null);
+        }
+        this.announce(options, next, first);
+    }
+
+    /** Move the shown key; dispatch iox-item-off on what was on and iox-item-on on what is on now. */
+    private announce(triggers: HTMLElement[], next: string | null, first: boolean, panelOf: (key: string) => HTMLElement | null = () => null): void {
         const was = first ? null : this.shown;
         this.shown = next;
         if (was === next && !first) return;
@@ -310,7 +360,7 @@ export class ExclusiveRuntime {
         const trigger = this.ownTrigger(e.target);
         if (!trigger) return;
         const rtl = isRtl(trigger);
-        const action = tabsKeyAction(e.key, this.behaviourValue.orientation, rtl);
+        const action = this.holdsTriggers ? segmentedKeyAction(e.key, rtl) : tabsKeyAction(e.key, this.behaviourValue.orientation, rtl);
         if (!action) return;
         const triggers = this.triggers();
         const target = triggers[accordionFocusIndex(action, triggers.indexOf(trigger), triggers.length)];

package/src/composite-core/exclusive.ts

@@ -0,0 +1,64 @@
+import { DomAttributes } from './accordion';
+import { CompositeKind, exclusiveKindOf } from './composite-kinds';
+import { CompositeNode } from './composite-node';
+import {
+    isSegmentedRoot, SEGMENTED_BEHAVIOUR, segmentedDefaultOn, segmentedLabel, segmentedOptionLabel, segmentedPartAttributes, segmentedRootAttributesOf,
+    segmentedScopeFor,
+} from './segmented';
+import { tabLabel, TabsBehaviour, tabsBehaviour, tabsLabel, tabsListOf, tabsPartAttributes, tabsRootAttributes, TabsScope, tabsScopeFor } from './tabs';
+
+/**
+ * ONE render decision for every EXCLUSIVE composite — a Tabs (CC4a) or a Segmented control (CC4b) — so both engine paths
+ * (the string renderer and the component path) and the composer ask by kind once and never by role literal: the scope
+ * a root renders its parts with, the root's own attributes, and each part's.
+ */
+
+export type ExclusiveScope = TabsScope;
+
+const REPEATER = 'Repeater';
+
+/** The scope an exclusive root renders its parts with: a Segmented control's options and default, or a Tabs' keys —
+ *  From content, the rows its list's Repeater resolved (`rowsOf`). `rowKeys` = the repeated rows around the root. */
+export function exclusiveScopeFor(root: CompositeNode, rootCssId: string, rowsOf: (list: CompositeNode) => ReadonlyArray<unknown> | null,
+    rowKeys: ReadonlyArray<string> = []): ExclusiveScope {
+    if (isSegmentedRoot(root)) return segmentedScopeFor(root, rootCssId, rowKeys);
+    const list = tabsListOf(root);
+    return tabsScopeFor(root, rootCssId, list?.type === REPEATER ? rowsOf(list) : null, rowKeys);
+}
+
+/** The attributes an exclusive ROOT writes on its own element, read off the node (its scope id when it sits in
+ *  repeated rows). */
+export function exclusiveRootAttributesOf(root: CompositeNode, scopeId?: string): DomAttributes {
+    return isSegmentedRoot(root) ? segmentedRootAttributesOf(root, scopeId) : tabsRootAttributes(tabsBehaviour(root), scopeId);
+}
+
+/** True when `node` is a part of the kind `scope` renders (a tab inside a Tabs' scope; an option inside a Segmented's). */
+export function isPartOfExclusiveScope(node: { role?: string | null } | null | undefined, scope: ExclusiveScope): boolean {
+    const kind = exclusiveKindOf(node);
+    return !!kind && kind === (scope.kind ?? CompositeKind.Tabs);
+}
+
+/** The attributes a part of an exclusive composite writes on its own element (both engine paths, SSR included). */
+export function exclusivePartAttributes(node: { role?: string | null }, scope: ExclusiveScope, key: string | null, rowScoped = false): DomAttributes {
+    return scope.kind === CompositeKind.Segmented ? segmentedPartAttributes(node, scope, key, rowScoped) : tabsPartAttributes(node, scope, key, rowScoped);
+}
+
+/** The behaviour an exclusive root runs with (a Segmented control: a click, a row — it has no Behaviour traits). */
+export function exclusiveBehaviourOf(root: CompositeNode | null | undefined): TabsBehaviour {
+    return isSegmentedRoot(root) ? { ...SEGMENTED_BEHAVIOUR } : tabsBehaviour(root);
+}
+
+/** The accessible name an exclusive root gives its group (a Tabs' list, a Segmented control's radio group). */
+export function exclusiveLabelOf(root: CompositeNode | null | undefined): string {
+    return isSegmentedRoot(root) ? segmentedLabel(root) : tabsLabel(root);
+}
+
+/** The item an exclusive root shows with no other say (a Segmented control's On by default), or null (a Tabs: its first). */
+export function exclusiveDefaultOf(root: CompositeNode | null | undefined): string | null {
+    return isSegmentedRoot(root) ? segmentedDefaultOn(root) : null;
+}
+
+/** An exclusive item's words — a tab's, an option's (never its badge's) — for the pickers, the tree and the switchers. */
+export function exclusiveItemLabel(part: CompositeNode): string {
+    return exclusiveKindOf(part) === CompositeKind.Segmented ? segmentedOptionLabel(part) : tabLabel(part);
+}

package/src/composite-core/public-api.ts

@@ -3,8 +3,9 @@
  * plan §3a). FRAMEWORK-FREE: the builder, the SSR engine and iox-cms (generation-core's composer, the site
  * build) read the same recipes, roles and structure rules. Card v2 + Badge / Chip (T23 / T25) are the
  * first; the Accordion (CC2) adds the first composite RUNTIME (accordion-runtime.ts — DOM only, no
- * framework), which the Disclosure (CC2.1) runs too — a one-item accordion whose root is its item; Tabs (CC4a) run the
- * EXCLUSIVE runtime (exclusive-runtime.ts — one item always on); composite-runtime.ts is the one door to both.
+ * framework), which the Disclosure (CC2.1) runs too — a one-item accordion whose root is its item; Tabs (CC4a) and the
+ * Segmented control (CC4b) run the EXCLUSIVE runtime (exclusive-runtime.ts — one item always on; exclusive.ts the one
+ * render decision by kind); composite-runtime.ts is the one door to both families.
  * ⚠️ Consumers wire the usual trio — ng-package raw-ts assets, jest moduleNameMapper, tsconfig paths.
  */
 export * from './composite-node';
@@ -19,5 +20,7 @@ export * from './slider';
 export * from './slider-runtime';
 export * from './lightbox';
 export * from './tabs';
+export * from './segmented';
+export * from './exclusive';
 export * from './exclusive-runtime';
 export * from './composite-runtime';