@vectoriox/iox-ui 5.6.0 → 5.8.0

package/forms-core/index.d.ts

@@ -11,6 +11,10 @@ declare enum ControlType {
     Textarea = "textarea",
     Select = "select",
     Checkbox = "checkbox",
+    /** A checkbox in switch clothing (role="switch") — consent toggles, settings-style forms. */
+    Switch = "switch",
+    /** A slider over a numeric range — min/max/step ride the field. */
+    Range = "range",
     Radio = "radio",
     Date = "date",
     Time = "time",

package/index.d.ts

@@ -809,6 +809,10 @@ declare enum ControlType {
     Textarea = "textarea",
     Select = "select",
     Checkbox = "checkbox",
+    /** A checkbox in switch clothing (role="switch") — consent toggles, settings-style forms. */
+    Switch = "switch",
+    /** A slider over a numeric range — min/max/step ride the field. */
+    Range = "range",
     Radio = "radio",
     Date = "date",
     Time = "time",
@@ -1148,6 +1152,9 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
     labelHidden: boolean;
     requiredMark: string;
     rows: number;
+    rangeMin: number | string;
+    rangeMax: number | string;
+    rangeStep: number | string;
     accept: string;
     options: FieldOption[];
     value: any;
@@ -1192,7 +1199,7 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
     emit(value: any): void;
     touch(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IoxFieldComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IoxFieldComponent, "div[iox-field]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "control": { "alias": "control"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "help": { "alias": "help"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "requiredMark": { "alias": "requiredMark"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "rules": { "alias": "rules"; "required": false; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; }; "designErrorText": { "alias": "designErrorText"; "required": false; }; "showValid": { "alias": "showValid"; "required": false; }; }, { "valueChange": "valueChange"; "touched": "touched"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxFieldComponent, "div[iox-field]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "control": { "alias": "control"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "help": { "alias": "help"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "requiredMark": { "alias": "requiredMark"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "rangeMin": { "alias": "rangeMin"; "required": false; }; "rangeMax": { "alias": "rangeMax"; "required": false; }; "rangeStep": { "alias": "rangeStep"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "rules": { "alias": "rules"; "required": false; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; }; "designErrorText": { "alias": "designErrorText"; "required": false; }; "showValid": { "alias": "showValid"; "required": false; }; }, { "valueChange": "valueChange"; "touched": "touched"; }, never, never, false, never>;
 }
 
 /**
@@ -1490,6 +1497,115 @@ declare const PART_CLASS_NAMES: Record<string, Record<string, string>>;
  *  Undefined when the type declares no such part (or no parts at all). */
 declare function partClassName(type: string, partKey: string): string | undefined;
 
+/**
+ * Flavors (flavors-and-theming-plan.md, F1): the design language a studio launches with,
+ * expressed as data. THE invariant — a flavor never writes a literal into a node; it writes
+ * tokens, and element defaults that REFERENCE tokens. To that end a pack's `defaults` map
+ * holds TOKEN NAMES, not CSS values: the resolver builds `var(--iox-<name>, <packValue>)`,
+ * so smuggling a literal in is impossible by construction, and the validator only has to
+ * check that every referenced token exists.
+ *
+ * The fallback is the bootstrap: until F2 seeds the org's `designtokens` rows, no `--iox-*`
+ * var is defined anywhere, and `var(--iox-radius-control, 4px)` must still paint identically
+ * in the builder canvas and the SSR page. Once tokens ARE seeded (or re-themed), the var wins
+ * over the fallback everywhere — which is exactly the §3 propagation story.
+ */
+interface FlavorTokenDef {
+    name: string;
+    value: string;
+    /** Dark-scheme override, seeded into DesignToken.values.dark at F2. */
+    values?: {
+        dark?: string;
+    };
+    type?: 'color' | 'spacing' | 'size' | 'font' | 'other';
+    /** Tokens-panel grouping (flavors plan §10 C5). */
+    group?: 'colour' | 'type' | 'space' | 'radius' | 'shadow' | 'motion';
+}
+interface FlavorPack {
+    id: string;
+    /** Bumped when the pack's values change; seeding stamps `flavor:<id>@<version>` as DesignToken.source. */
+    version: number;
+    label: string;
+    blurb: string;
+    tokens: FlavorTokenDef[];
+    /** type → styleTrait → TOKEN NAME (never a CSS value — see the module header). */
+    defaults: Record<string, Record<string, string>>;
+    /** F2: the accent's hue rotation (degrees in OKLab) from the brand seed — a pack opinion. */
+    accentHueDeg?: number;
+}
+/** trait → `var(--iox-<token>, <packValue>)` for one node type. Unknown type → {}. */
+declare function resolveFlavorDefaults(type: string, pack: FlavorPack | null | undefined): Record<string, string>;
+/**
+ * The ENGINE's half of the cascade: kebab `prop: var(…)` declarations for every pack default
+ * the node's persisted styleProps does NOT set. Appended beside renderDefaultDeclarations —
+ * same guard-on-undefined discipline, so a node saved post-F1 (var already serialised via the
+ * builder's trait defaults) is untouched, and a legacy node picks the pack default up at
+ * render time. Node styleProps always wins.
+ */
+declare function flavorDefaultDeclarations(type: string, styleProps: Record<string, any> | null | undefined, pack: FlavorPack | null | undefined): string[];
+/**
+ * The CI gate (flavors plan §10 C4): a pack may only name types and traits that exist in the
+ * live component registry, and tokens it defines itself. Returns human-readable errors; a
+ * consumer spec feeds it the REAL registry and asserts [].
+ */
+declare function validateFlavorPack(pack: FlavorPack, knownTraitsByType: Record<string, ReadonlySet<string> | string[]>): string[];
+/**
+ * Swiss — the default pack (flavors plan §8: "the flavor that can never embarrass anyone").
+ * Deliberately SMALL at F1: radius + control padding on the clickables, surface radius on Card.
+ * Colour, type and motion arrive with the brand step (F2) — a colour default here would repaint
+ * legacy pages before anyone chose anything.
+ */
+declare const SWISS_FLAVOR: FlavorPack;
+/** What both renderers use until F2 lets an org choose. */
+declare const DEFAULT_FLAVOR: FlavorPack;
+
+/**
+ * BRAND DERIVATION (flavors plan §6, F2): one colour in, an asserted accessible ramp out.
+ *
+ * Competitors ask for a palette of five and hope; we ask for ONE seed and compute the rest so
+ * that contrast is a TEST, not a promise. WCAG 2 ratios are the gate (every guarantee below is
+ * unit-asserted across seeds); APCA is exposed as the picker's quality read-out only.
+ *
+ * Colour math is OKLab (perceptually even lightness — the ramp steps LOOK even), hand-rolled
+ * from the published matrices because this module must stay dependency-free: it runs in the
+ * builder, the engine and (later) the generator's Node service.
+ */
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+interface OkLab {
+    L: number;
+    a: number;
+    b: number;
+}
+declare function parseHexColor(hex: string): Rgb | null;
+declare function toHexColor(c: Rgb): string;
+declare function rgbToOklab(c: Rgb): OkLab;
+declare function oklabToRgb(c: OkLab): Rgb;
+declare function relativeLuminance(c: Rgb): number;
+/** WCAG 2 contrast ratio between two colours (order-independent), 1..21. */
+declare function wcagContrastRatio(a: string | Rgb, b: string | Rgb): number;
+/**
+ * APCA-W3 lightness contrast Lc (0.0.98G-4g constants), text-on-background and signed:
+ * positive for dark-on-light, negative for light-on-dark; |Lc| ≈ 106–108 at the extremes.
+ * Shown in the picker as the perceptual read-out; never used as the pass/fail gate here.
+ */
+declare function apcaLc(text: string | Rgb, bg: string | Rgb): number;
+/**
+ * The derived brand tokens (plan §6's table, every row asserted in brand.spec.ts):
+ * `brand-50…900` (monotonic OKLab lightness, gamut-safe) · `brandInk` (black or white, ≥4.5 on
+ * brand-500 — brand-500's lightness is nudged when neither side clears it) · `surface`/`ink`/
+ * `inkMuted` (seed-tinted neutrals, ≥7:1 / ≥4.5:1 on surface) · `line` (the LIGHTEST neutral that
+ * still clears 3:1 on surface) · `accent` (pack-rotated hue, ≥4.5:1 on surface) — with dark-scheme
+ * values for the neutral family riding `values.dark`.
+ *
+ * Throws on an unparseable seed: callers (the picker) validate; a silent fallback here would
+ * launch a studio into a palette nobody chose.
+ */
+declare function deriveBrandTokens(seed: string, pack: FlavorPack): FlavorTokenDef[];
+
 /** Trait names whose value Swiper reads per breakpoint. Anything else is config-wide. */
 declare const SWIPER_RESPONSIVE_TRAITS: readonly string[];
 /** `{ [minWidth]: { slidesPerView, … } }` — Swiper's own `breakpoints` shape. */
@@ -1553,66 +1669,6 @@ declare function compileTokenCss(tokens: ReadonlyArray<DesignTokenLike> | null |
     dark: string;
 };
 
-/**
- * Flavors (flavors-and-theming-plan.md, F1): the design language a studio launches with,
- * expressed as data. THE invariant — a flavor never writes a literal into a node; it writes
- * tokens, and element defaults that REFERENCE tokens. To that end a pack's `defaults` map
- * holds TOKEN NAMES, not CSS values: the resolver builds `var(--iox-<name>, <packValue>)`,
- * so smuggling a literal in is impossible by construction, and the validator only has to
- * check that every referenced token exists.
- *
- * The fallback is the bootstrap: until F2 seeds the org's `designtokens` rows, no `--iox-*`
- * var is defined anywhere, and `var(--iox-radius-control, 4px)` must still paint identically
- * in the builder canvas and the SSR page. Once tokens ARE seeded (or re-themed), the var wins
- * over the fallback everywhere — which is exactly the §3 propagation story.
- */
-interface FlavorTokenDef {
-    name: string;
-    value: string;
-    /** Dark-scheme override, seeded into DesignToken.values.dark at F2. */
-    values?: {
-        dark?: string;
-    };
-    type?: 'color' | 'spacing' | 'size' | 'font' | 'other';
-    /** Tokens-panel grouping (flavors plan §10 C5). */
-    group?: 'colour' | 'type' | 'space' | 'radius' | 'shadow' | 'motion';
-}
-interface FlavorPack {
-    id: string;
-    /** Bumped when the pack's values change; seeding stamps `flavor:<id>@<version>` as DesignToken.source. */
-    version: number;
-    label: string;
-    blurb: string;
-    tokens: FlavorTokenDef[];
-    /** type → styleTrait → TOKEN NAME (never a CSS value — see the module header). */
-    defaults: Record<string, Record<string, string>>;
-}
-/** trait → `var(--iox-<token>, <packValue>)` for one node type. Unknown type → {}. */
-declare function resolveFlavorDefaults(type: string, pack: FlavorPack | null | undefined): Record<string, string>;
-/**
- * The ENGINE's half of the cascade: kebab `prop: var(…)` declarations for every pack default
- * the node's persisted styleProps does NOT set. Appended beside renderDefaultDeclarations —
- * same guard-on-undefined discipline, so a node saved post-F1 (var already serialised via the
- * builder's trait defaults) is untouched, and a legacy node picks the pack default up at
- * render time. Node styleProps always wins.
- */
-declare function flavorDefaultDeclarations(type: string, styleProps: Record<string, any> | null | undefined, pack: FlavorPack | null | undefined): string[];
-/**
- * The CI gate (flavors plan §10 C4): a pack may only name types and traits that exist in the
- * live component registry, and tokens it defines itself. Returns human-readable errors; a
- * consumer spec feeds it the REAL registry and asserts [].
- */
-declare function validateFlavorPack(pack: FlavorPack, knownTraitsByType: Record<string, ReadonlySet<string> | string[]>): string[];
-/**
- * Swiss — the default pack (flavors plan §8: "the flavor that can never embarrass anyone").
- * Deliberately SMALL at F1: radius + control padding on the clickables, surface radius on Card.
- * Colour, type and motion arrive with the brand step (F2) — a colour default here would repaint
- * legacy pages before anyone chose anything.
- */
-declare const SWISS_FLAVOR: FlavorPack;
-/** What both renderers use until F2 lets an org choose. */
-declare const DEFAULT_FLAVOR: FlavorPack;
-
 /**
  * page-style — the ONE compiler that turns a page's style settings into CSS.
  *
@@ -2782,5 +2838,5 @@ declare class GalleryLoop {
     private emit;
 }
 
-export { AOSService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_FLAVOR, 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, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SWISS_FLAVOR, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, compileTokenCss, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, flavorDefaultDeclarations, getByPath, getSeoValue, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveFlavorDefaults, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, stripSuppressedProps, styleKeyToKebab, tokensToDarkVarMap, tokensToVarMap, validateFlavorPack, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
-export type { BoundValueSpec, BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSpec, DesignTokenLike, FlavorPack, FlavorTokenDef, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, IoxContextSlot, IoxPipe, OverrideBreakpoint, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, RelativeInputs, RelativeSourceKind, RelativeSourceSpec, ResolveSiblingsOptions, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SiblingsResult, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };
+export { AOSService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_FLAVOR, 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, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SWISS_FLAVOR, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, apcaLc, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, compileTokenCss, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, deriveBrandTokens, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, flavorDefaultDeclarations, getByPath, getSeoValue, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, oklabToRgb, parentBreakpoint, parseHexColor, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, relativeLuminance, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveFlavorDefaults, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, rgbToOklab, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, stripSuppressedProps, styleKeyToKebab, toHexColor, tokensToDarkVarMap, tokensToVarMap, validateFlavorPack, variableAliases, variableItemsFrom, wcagContrastRatio, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
+export type { BoundValueSpec, BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSpec, DesignTokenLike, FlavorPack, FlavorTokenDef, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, IoxContextSlot, IoxPipe, OkLab, OverrideBreakpoint, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, RelativeInputs, RelativeSourceKind, RelativeSourceSpec, ResolveSiblingsOptions, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, Rgb, RouteContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SiblingsResult, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };

package/package.json

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

package/src/forms-core/form.model.ts

@@ -16,6 +16,10 @@ export enum ControlType {
     Textarea = 'textarea',
     Select = 'select',
     Checkbox = 'checkbox',
+    /** A checkbox in switch clothing (role="switch") — consent toggles, settings-style forms. */
+    Switch = 'switch',
+    /** A slider over a numeric range — min/max/step ride the field. */
+    Range = 'range',
     Radio = 'radio',
     Date = 'date',
     Time = 'time',

package/src/forms-core/rule-catalog.ts

@@ -40,7 +40,7 @@ const TEXTUAL: readonly ControlType[] = [
 ];
 
 /** Controls with a comparable magnitude. */
-const NUMERIC: readonly ControlType[] = [ControlType.Number, ControlType.Date, ControlType.Time];
+const NUMERIC: readonly ControlType[] = [ControlType.Number, ControlType.Date, ControlType.Time, ControlType.Range];
 
 export const RULE_DESCRIPTORS: readonly RuleDescriptor[] = Object.freeze([
     {
@@ -73,7 +73,7 @@ export const RULE_DESCRIPTORS: readonly RuleDescriptor[] = Object.freeze([
         // A checkbox's `required` already becomes `accepted`, so offering it again would be a
         // duplicate — it is here for a checkbox the author wants ticked WITHOUT marking it required.
         name: RuleName.Accepted, labelKey: 'forms.rules.accepted',
-        param: RuleParamKind.None, controls: [ControlType.Checkbox],
+        param: RuleParamKind.None, controls: [ControlType.Checkbox, ControlType.Switch],
     },
 ]);
 

package/styles/iox-forms.css

@@ -54,3 +54,43 @@
     position: absolute; width: 1px; height: 1px; margin: -1px;
     padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
 }
+
+/* ── switch (control='switch') — a checkbox in switch clothing; brand-aware via tokens ── */
+.iox-field__control--switch {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 38px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--iox-line, #d8d4d1);
+  position: relative;
+  cursor: pointer;
+  transition: background 150ms ease-out;
+  flex-shrink: 0;
+}
+.iox-field__control--switch::before {
+  content: '';
+  position: absolute;
+  top: 3px;
+  inset-inline-start: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: #ffffff;
+  transition: transform 150ms ease-out;
+}
+.iox-field__control--switch:checked {
+  background: var(--iox-brand-500, #1f1d1b);
+}
+.iox-field__control--switch:checked::before {
+  transform: translateX(16px);
+}
+[dir='rtl'] .iox-field__control--switch:checked::before {
+  transform: translateX(-16px);
+}
+
+/* ── range (control='range') ── */
+.iox-field__control--range {
+  width: 100%;
+  accent-color: var(--iox-brand-500, #1f1d1b);
+}