@vectoriox/iox-ui 5.82.1 → 5.83.0

package/index.d.ts

@@ -996,6 +996,11 @@ declare enum ControlType {
     /** A slider over a numeric range — min/max/step ride the field. */
     Range = "range",
     Radio = "radio",
+    /** One or several of a few visible choices — chips (the default) or a list of radios / checkboxes (premium N1).
+     *  Its `multiple` trait picks the value's shape: a string, or a list of strings. */
+    Choices = "choices",
+    /** A date the visitor picks from the look's calendar (premium N8) — a button that reads the date in words and a
+     *  hidden input carrying the ISO `YYYY-MM-DD` value. Never the browser's own date box. */
     Date = "date",
     Time = "time",
     File = "file",
@@ -1015,7 +1020,19 @@ declare enum RuleName {
     /** A checkbox that must be ticked — terms, consent. */
     Accepted = "accepted",
     FileType = "fileType",
-    FileSize = "fileSize"
+    FileSize = "fileSize",
+    /** IMPLIED, never authored: an answer of a Choices / Radio / Dropdown must be one of the field's own options
+     *  (premium N1) — a hand-crafted POST cannot file a value the form never offered. */
+    OneOf = "oneOf",
+    /** IMPLIED, never authored: a Date's answer is a real `YYYY-MM-DD` day (premium N8). */
+    ValidDate = "validDate"
+}
+/** How a Choices field draws its options (premium N1). */
+declare enum ChoiceAppearance {
+    /** Each option a chip — the label is the chip; the native input inside it is visually hidden. */
+    Chips = "chips",
+    /** The options as rows of the look's own radio / checkbox (DS9.1). */
+    List = "list"
 }
 interface ValidationRule {
     name: RuleName;
@@ -1046,6 +1063,8 @@ interface FieldSpec {
     options?: FieldOption[];
     optionsSource?: FieldOptionSource;
     defaultValue?: any;
+    /** A Choices field that takes several answers: its value is a list (premium N1). */
+    multiple?: boolean;
 }
 /** When a field is validated, once the author has stopped deciding it per field. */
 declare enum FeedbackTiming {
@@ -1163,6 +1182,41 @@ interface ClientFormSpec {
     fields: FieldSpec[];
 }
 
+/**
+ * DATES — the date picker's pure half (premium components N8) and the date rules' one reading.
+ *
+ * A Date field's value is an ISO day, `YYYY-MM-DD`, compared as a string (the format sorts as the calendar does).
+ * Its `min` / `max` rules take an ISO day OR an offset in days from today (`{ offsetDays: 0 }` = today), so "from
+ * today on" stays true tomorrow without a re-save. ONE reading for the validator (client AND iox-cms), the calendar
+ * (which days it refuses) and the builder's Earliest / Latest controls.
+ *
+ * The calendar model (six rows of seven, roving focus, the APG keys) lives here too, so the DOM runtime only draws
+ * what this decides — the canvas, the engine's component path and its string path draw the SAME month.
+ *
+ * ⚠️ Framework-free, like the rest of forms-core. Local-time `Date` objects are used only to walk the calendar; a
+ * day leaves this file as an ISO string.
+ */
+
+/** The calendar's own words, by the site's language — the media-core `videoWords` precedent (a string-rendered
+ *  site has no translation service; the document's `lang` picks). */
+interface DatePickerWords {
+    choose: string;
+    previousMonth: string;
+    nextMonth: string;
+    close: string;
+}
+
+/**
+ * A Field as its form's runtime knows it. Functions, not values: a trait edited on the canvas takes effect without
+ * re-registering. `baseName` is the field's own key (its override, else its label's); the FORM makes it unique against
+ * the fields before it — forms-core `uniqueFieldNames`, the rule the saved spec and the string renderer use (iox-ui#43).
+ * `spec` is handed that unique name. A registration without `baseName` is named by its spec.
+ */
+interface RegisteredField {
+    baseName?: () => string;
+    spec: (name: string) => FieldSpec;
+    getValue: () => any;
+}
 /**
  * How a message KEY becomes text a visitor reads.
  *
@@ -1185,7 +1239,7 @@ declare const defaultMessageResolver: FormMessageResolver;
  * the registered fields and the Angular-shaped API. Nothing here decides *when* an error shows.
  */
 declare class FormRuntimeService {
-    /** Registered fields, in DOM order — the order the spec and focus-first-invalid depend on. */
+    /** Registered fields, in DOM order — the order the spec, the unique names and focus-first-invalid depend on. */
     private readonly fields;
     private _state;
     private _spec;
@@ -1199,10 +1253,11 @@ declare class FormRuntimeService {
      * always reads the field's current spec and value — a trait edited on the canvas takes effect
      * without re-registering anything.
      */
-    register(field: {
-        spec: () => FieldSpec;
-        getValue: () => any;
-    }): () => void;
+    register(field: RegisteredField): () => void;
+    /** Every registered field's submitted name, in order — unique within the form (iox-ui#43). */
+    private names;
+    /** The name the form gives one registered field, or null when it is not this form's. */
+    nameOf(field: RegisteredField): string | null;
     /** The live spec, derived from what is registered right now. */
     specNow(): FormSpec;
     /** Current values, keyed by submitted field name. */
@@ -1326,6 +1381,7 @@ declare class IoxFormComponent implements OnChanges, OnInit {
      * is exactly when a visitor most needs telling.
      */
     private announce;
+    /** Focus the first field that failed and shake it once (premium N2 — Emil 134; none under reduced motion). */
     private focusFirstInvalid;
     static ɵfac: i0.ɵɵFactoryDeclaration<IoxFormComponent, [null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IoxFormComponent, "form[iox-form]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "formId": { "alias": "formId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "renderState": { "alias": "renderState"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "focusFirstProblem": { "alias": "focusFirstProblem"; "required": false; }; "announceFailure": { "alias": "announceFailure"; "required": false; }; }, { "formSubmit": "formSubmit"; "validationFailed": "validationFailed"; }, never, never, false, never>;
@@ -1345,15 +1401,24 @@ declare class IoxFormComponent implements OnChanges, OnInit {
  *
  * ⚠️ Control type is a TRAIT, not a component per type (decision D4) — one component, one config,
  * and choosing `email` also chooses email validation.
+ *
+ * The markup is forms-core `fieldHtml`'s, element for element (the engine's string path writes it): Choices is a
+ * fieldset of chips or rows (premium N1), Date is a button + a hidden ISO input that opens the look's calendar (N8).
+ * The submitted name is the FORM's unique name for this field (forms-core `uniqueFieldNames`, vectoriox/iox-ui#43).
  */
-declare class IoxFieldComponent implements OnInit, OnDestroy {
+declare class IoxFieldComponent implements OnInit, AfterViewInit, OnDestroy {
     private readonly runtime;
     private readonly resolveMessage;
+    private readonly host?;
+    private readonly isPreview?;
+    private readonly pageScroll?;
     nodeId: string;
     /** The submitted key. Blank means "derive it from the label" — authors never invent keys. */
     name: string;
     label: string;
-    control: ControlType | string;
+    set control(value: ControlType | string);
+    get control(): ControlType | string;
+    private _control;
     placeholder: string;
     help: string;
     required: boolean;
@@ -1365,6 +1430,15 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
     rangeMax: number | string;
     rangeStep: number | string;
     accept: string;
+    /** Choices (N1): several answers (checkboxes) or one (radios). */
+    multiple: boolean;
+    /** Choices (N1): `chips` (the default) or `list` — the look's radio / checkbox rows. */
+    set appearance(value: ChoiceAppearance | string | null | undefined);
+    get appearance(): ChoiceAppearance;
+    private _appearance;
+    /** Date (N8): the first and last day it takes — '' any · N days from today · an ISO day (forms-core `dates.ts`). */
+    earliest: string;
+    latest: string;
     /** Explicit choices (bound data, a hand-built node). Wins over `optionsText`. */
     set options(value: FieldOption[] | null | undefined);
     get options(): FieldOption[];
@@ -1382,44 +1456,72 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
     /**
      * Forces the error appearance without a real failure — how the builder lets an author DESIGN
      * the error state (decision D5). At runtime the state comes from the runtime service instead.
+     * Turning it on shakes the field once, so the author sees the motion they are designing (N2).
      */
-    forceInvalid: boolean;
+    set forceInvalid(value: boolean);
+    get forceInvalid(): boolean;
+    private _forceInvalid;
     /** Placeholder shown while designing the error state, so the block has something to style. */
     designErrorText: string;
     /** Only after a successful check — never on an untouched field. */
     showValid: boolean;
+    /** The builder canvas's design-time Open state for a Date (N8): the calendar drawn under the field, inert. */
+    set designOpen(value: boolean);
+    get designOpen(): boolean;
+    private _designOpen;
     valueChange: EventEmitter<any>;
     touched: EventEmitter<void>;
     /** Stable per instance so `for`/`id` and `aria-describedby` always pair up. */
     readonly controlId: string;
     private unregister?;
+    private registration;
+    private picker;
+    private viewReady;
     /**
      * Classic constructor injection, not `inject()`: this library's specs construct components
      * directly (its vitest setup cannot run `TestBed.createComponent`), and a field initializer
      * calling `inject()` throws NG0203 outside an injection context.
      *
      * `runtime` is optional because a Field dropped OUTSIDE any Form must still render — it simply
-     * has nothing to submit to. That is the same ancestry rule from the other side.
+     * has nothing to submit to. That is the same ancestry rule from the other side. `isPreview` says the field is
+     * LIVE (the engine, the admin's Preview): only then does its date button open a calendar — on the editing canvas
+     * a click selects the field, and the calendar is the design-time Open state.
      */
-    constructor(runtime: FormRuntimeService | null, resolveMessage: FormMessageResolver);
+    constructor(runtime: FormRuntimeService | null, resolveMessage: FormMessageResolver, host?: (ElementRef<HTMLElement> | null) | undefined, isPreview?: boolean | null | undefined, pageScroll?: (PageScrollProvider | null) | undefined);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    /** The submitted key: the author's override, else derived from the label. */
+    /** The submitted key: the form's unique name for this field (iox-ui#43), else the field's own base name. */
     get fieldName(): string;
     /** Failing AND allowed to say so — or forced, while an author designs the state. */
     get invalid(): boolean;
     /** The message a visitor reads. Translation is the consumer's, via IOX_FORM_MESSAGES. */
     get errorText(): string;
+    /** The field's spec under the name its form gave it — forms-core `fieldSpecOf`, the reading the saved spec uses. */
     private toSpec;
     private refreshChoices;
-    /** `file`, `date`, `number`… map straight through; everything else is a text input. */
+    /** `file`, `number`… map straight through; everything else is a text input (forms-core `inputTypeOf`). */
     get inputType(): string;
+    /** A Date's chosen day (the hidden input's value) — '' while none is. */
+    get dateIso(): string;
+    /** A Date's chosen day in words, in the field's language — '' while none is. */
+    get dateWords(): string;
+    /** What an unpicked Date says: the author's hint, else "Choose a date" in the field's language. */
+    get datePlaceholder(): string;
+    /** Whether a Choices option is chosen — one answer, or one of several. */
+    isChosen(optionValue: string): boolean;
+    /** A Choices option ticked or unticked: the answer becomes the list of ticked ones, or the one picked. */
+    toggle(optionValue: string, checked: boolean): void;
     /** Help and error are BOTH announced, in that order, when both are present. */
     get describedBy(): string | null;
     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; }; "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; }; "optionsText": { "alias": "optionsText"; "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>;
+    touch(event?: Event): void;
+    /** A live Date runs the ONE date picker; any other control (or the canvas) runs none. */
+    private syncDate;
+    /** The canvas's Open state: the calendar drawn under the field (never on a live page). */
+    private syncDesignCalendar;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IoxFieldComponent, [{ optional: true; }, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    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; }; "multiple": { "alias": "multiple"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "earliest": { "alias": "earliest"; "required": false; }; "latest": { "alias": "latest"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionsText": { "alias": "optionsText"; "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; }; "designOpen": { "alias": "designOpen"; "required": false; }; }, { "valueChange": "valueChange"; "touched": "touched"; }, never, never, false, never>;
 }
 
 /**
@@ -1429,19 +1531,26 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
  * action list on the FORM (decision D9), so there is nothing here to wire and nothing to get out of
  * sync. The button owns only its own appearance.
  *
- * It follows its FORM's state (vectoriox/iox-ui#42): its two labels are both in the markup and the shared
- * iox-forms.css shows "While sending" while the form's `data-iox-state` is submitting — on the canvas's Sending
- * state, the component path and the string path alike; busy and disabled are written by the ONE applier
- * (`syncSubmitButtons`) the form's runtimes call. Before, the button switched only on a `submitting` input
- * nothing ever wrote. The string renderer writes the same markup (forms-core `submitButtonLabelsHtml`).
+ * It follows its FORM's state (vectoriox/iox-ui#42, premium N2): its three labels — at rest, "While sending", "Sent"
+ * with a check — are all in the markup, stacked in one cell, and the shared iox-forms.css shows the one the form's
+ * `data-iox-state` names, swapped in place behind a 2px blur (Emil 87/139); the check draws once on Sent. Busy and
+ * disabled are written by the ONE applier (`syncSubmitButtons`) the form's runtimes and the canvas call. The string
+ * renderer writes the same markup (forms-core `submitButtonLabelsHtml`).
  */
 declare class IoxSubmitButtonComponent {
+    private readonly resolveMessage;
+    private readonly host;
     nodeId: string;
     label: string;
     loadingLabel: string;
+    /** What it says once its form has sent (N2). Empty: the catalog's "Sent", in the host's language. */
+    sentLabel: string;
     disableWhileSubmitting: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<IoxSubmitButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IoxSubmitButtonComponent, "button[iox-submit]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "label": { "alias": "label"; "required": false; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; }; "disableWhileSubmitting": { "alias": "disableWhileSubmitting"; "required": false; }; }, {}, never, never, false, never>;
+    constructor(resolveMessage?: FormMessageResolver | null, host?: ElementRef<HTMLElement> | null);
+    /** The author's Sent words; else the host's translation of the catalog's; else "Sent" in the page's language. */
+    get sentWords(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IoxSubmitButtonComponent, [{ optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxSubmitButtonComponent, "button[iox-submit]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "label": { "alias": "label"; "required": false; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; }; "sentLabel": { "alias": "sentLabel"; "required": false; }; "disableWhileSubmitting": { "alias": "disableWhileSubmitting"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 /**
@@ -3541,6 +3650,7 @@ declare class StringFormRuntime {
     private render;
     private renderError;
     private announce;
+    /** Focus the first field that failed and shake it once (premium N2 — the ONE `shakeElement`). */
     private focusFirstInvalid;
     private honeypotValue;
 }
@@ -3560,5 +3670,173 @@ declare function attachStringForm(form: Element | null | undefined, options?: St
  */
 declare function syncSubmitButtons(form: Element | null | undefined, state: FormRenderState | string | null | undefined): void;
 
-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_INTERACTION_EASING, 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, DeclarationContext, EASING_KEYWORDS, EASING_TOKENS, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, EasingKeyword, EasingToken, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION_TRAITS, HOVER_MEDIA_QUERY, HOVER_STATES, INTERACTION_ANIMATION_ID, 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_TRAITS, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, OUTER_STYLE_PROPS, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, PointerKind, REDUCED_MOTION_QUERY, RELATIONAL_STATE_PSEUDO, RevealActionType, SCROLLED_ATTRIBUTE, SCROLLED_STATE_ROLE, SCROLLED_THRESHOLD_PX, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, STRUCTURAL_STATES, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SettleMode, StringFormRuntime, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TRANSITION_PROPERTY_KEY, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, animateAction, applyBindingPipes, applyFeel, attachStringForm, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, declaredInputNames, decomposeBackdropFilter, defaultHoverTransitionTraits, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, finalKeyframe, framesFromLiveValue, gateHoverRule, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCubicBezier, isCurrentLink, isEasingToken, isExternalOrFragment, isGradientPaint, isHoverPointer, isHoverState, isInputOverriddenAt, isInteractionEasing, isLastEmittedStateKey, isOverriddenAt, isPressFeedback, isScrolled, isStructuralState, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, planPartRule, planResponsiveRules, planScroll, planStateRule, planSwiperOptions, playDualLayerTransition, playInteraction, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolveInteractionEasing, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, settleInteraction, settleModeFor, sliderControlElements, sliderInputsFromProps, sliderInputsOf, splitOuterProps, splitPressFeedback, stateNamesIn, statePseudoClass, stateSelectorSuffix, stateTransitionProperties, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, transitionPropertyList, viewportTransitionContext, watchScrolled, withContextSlots, withStateTransitions, wrapInBreakpointQuery, wrapInMediaQuery };
-export type { A11yNodeSource, AnimateActionOptions, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, PressAction, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, ScrollSource, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SettleOptions, SliderBootOptions, SliderControlElements, SliderInputs, StateRulePlan, StateScope, StateStyleMap, StringFormOptions, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionPreviewLayers, TransitionTimelineInput, TransitionViewport, ValueSource, VirtualTraitGroup };
+/**
+ * THE DATE PICKER (premium components N8) — the APG date picker dialog, wearing the look. ONE DOM runtime for the
+ * engine's component path and its string path; the builder canvas draws the same panel for its design-time Open state
+ * (`showCalendarDesign`). The month, the keys and the bounds are forms-core's (`dates.ts`); this file only draws them,
+ * places them and moves focus.
+ *
+ * - A modal `<dialog>` INSIDE the field, so it inherits the look's tokens and the section's scheme, and the field's
+ *   part styles reach it; on a laptop it is a popover under the field (above when there is no room) growing from it, on
+ *   a phone a bottom sheet (the shared CSS — `iox-forms.css` / `iox-design.css` — owns both looks and their motion).
+ * - The grid always has six rows; a month change is instant (Emil 2/65 — rapid, keyboard-driven UI never animates).
+ * - Roving focus: one day is the Tab stop. Arrows move a day (mirrored in RTL), Home/End the week, PageUp/PageDown a
+ *   month (Shift: a year), Enter/Space pick, Esc closes and gives focus back to the button. Refused days are
+ *   `aria-disabled` and never picked, by click or by key.
+ */
+interface DatePickerOptions {
+    /** The site's language (words, week start, the date in words); else the nearest `[lang]`, else the document's. */
+    lang?: string | null;
+    /** Right-to-left; else the field's computed direction. */
+    rtl?: boolean | null;
+    /** Today, for a test; else the visitor's local day. */
+    today?: () => string;
+    /** The component path's hook: a day was picked (the hidden input is written either way). */
+    onPick?: (iso: string) => void;
+    /** Page scroll is held while the calendar is open (Lenis would scroll the page under a fixed panel). */
+    lockScroll?: () => void;
+    unlockScroll?: () => void;
+    /** Overrides the built-in words (a host with its own translations). */
+    words?: Partial<DatePickerWords>;
+}
+declare enum CalendarClass {
+    Panel = "iox-cal",
+    Grab = "iox-cal__grab",
+    Head = "iox-cal__head",
+    Title = "iox-cal__title",
+    Nav = "iox-cal__nav",
+    Prev = "iox-cal__prev",
+    Next = "iox-cal__next",
+    Grid = "iox-cal__grid",
+    Weekday = "iox-cal__weekday",
+    Cell = "iox-cal__cell",
+    Day = "iox-cal__day"
+}
+/** On the panel while it leaves (the shared CSS plays the exit on it). */
+declare const CALENDAR_CLOSING_ATTRIBUTE = "data-iox-closing";
+/** On the panel the builder canvas draws for its design-time Open state (in the flow, inert). */
+declare const CALENDAR_DESIGN_ATTRIBUTE = "data-iox-cal-design";
+/** A phone gets the sheet (the drawer curve, the scrim) — the same width the shared CSS keys on. */
+declare const CALENDAR_SHEET_QUERY = "(max-width: 767px)";
+/** The language the field speaks: the host's, the nearest `[lang]`, the document's. */
+declare function fieldLanguage(field: Element, lang?: string | null): string;
+/** Write a day (or nothing) into a date field: the hidden input carries it, the button says it in words. */
+declare function setDateFieldValue(field: Element, iso: string, options?: {
+    lang?: string | null;
+    today?: string;
+    placeholder?: string;
+}): void;
+/** One live date field. Built by `attachDatePicker`; idempotent per field. */
+declare class DatePickerRuntime {
+    private readonly field;
+    private readonly options;
+    private panel;
+    private focusIso;
+    private closing;
+    private readonly listeners;
+    constructor(field: HTMLElement, options?: DatePickerOptions);
+    get isOpen(): boolean;
+    value(): string;
+    destroy(): void;
+    open(): void;
+    /** Close with the exit the shared CSS plays (faster than the entrance — Emil 30), then give focus back. */
+    close(): void;
+    private pick;
+    private dismiss;
+    private focusDay;
+    /** Under the field, aligned to its reading start; above when there is no room — the ONE `placeFloating`. */
+    private place;
+    private lang;
+    private rtl;
+    private today;
+    private words;
+    private listen;
+}
+/** The runtime already running a field, if any. */
+declare function datePickerOf(field: Element | null | undefined): DatePickerRuntime | null;
+/** Run a date field — once: a field already running is returned as is. Null when `field` holds no date button. */
+declare function attachDatePicker(field: Element | null | undefined, options?: DatePickerOptions): DatePickerRuntime | null;
+/** Run every date field under `root` (the string path: a page's or a global's markup). */
+declare function attachDatePickers(root: ParentNode | null | undefined, options?: DatePickerOptions): DatePickerRuntime[];
+/**
+ * The builder canvas's design-time Open state: the SAME panel, drawn in the flow under the date button (a modal in the
+ * top layer would escape the canvas's zoom and cover the builder), inert — the author selects the Field and styles
+ * its Calendar parts; nothing in it takes focus or a click. `false` removes it.
+ */
+declare function showCalendarDesign(field: Element | null | undefined, show: boolean, options?: {
+    lang?: string | null;
+    rtl?: boolean | null;
+    today?: string;
+}): void;
+
+/**
+ * The shake a failing field gives after a refused submit (premium components N2) — Emil 134: the named effect for
+ * rejected input. ONE function for the component path, the string path and the canvas (a field put in its error state
+ * on the canvas shakes once, so the author sees the motion they are designing).
+ *
+ * WAAPI, `composite: 'add'`, so it moves the field from wherever its own transform puts it. A second refused submit
+ * CANCELS the running shake and starts clean — never two stacked (Emil 52/62). Under reduced motion there is no shake:
+ * focus and the message still happen (Emil 192 — the meaning survives without the movement).
+ */
+/** ±6 → ±4 → rest: a decaying side-to-side (the prototype's, Doron-approved). */
+declare const SHAKE_KEYFRAMES: ReadonlyArray<Keyframe>;
+/** Under Emil's UI budget (28) and long enough to read as "no" (134). */
+declare const SHAKE_DURATION_MS = 320;
+/** Emil 18 — the strong ease-out. */
+declare const SHAKE_EASING = "cubic-bezier(0.23, 1, 0.32, 1)";
+/** Shake `el` once; returns the animation, or null when nothing plays (no element, no WAAPI, reduced motion). */
+declare function shakeElement(el: Element | null | undefined, reducedMotion?: boolean): Animation | null;
+
+/**
+ * placeFloating — where a panel anchored to a control goes (premium components N8, reused by M5's tooltip and popover).
+ *
+ * ONE pure decision for every floating panel: under its anchor, aligned to the anchor's reading start (the left edge in
+ * LTR, the right in RTL); above it when there is no room below and more above; held inside the viewport with a margin;
+ * and the transform-origin AT the anchor, so the panel grows from the control that opened it (Emil 47) — even when the
+ * clamp moved it sideways.
+ *
+ * Lives in the main entry: nothing server-side places a panel, and the date picker (now) and the floating family (M5)
+ * are DOM runtimes of the main entry. Pure — no DOM read here: the caller measures, this decides, the caller writes.
+ */
+interface FloatingRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+interface FloatingSize {
+    width: number;
+    height: number;
+}
+interface FloatingViewport {
+    width: number;
+    height: number;
+}
+declare enum FloatingSide {
+    Below = "below",
+    Above = "above"
+}
+interface FloatingOptions {
+    /** Space between the anchor and the panel. */
+    gap?: number;
+    /** Space the panel always keeps from the viewport's edges. */
+    margin?: number;
+    /** Right-to-left: the panel lines up with the anchor's right edge. */
+    rtl?: boolean;
+}
+interface FloatingPlacement {
+    top: number;
+    left: number;
+    side: FloatingSide;
+    /** A CSS transform-origin in the panel's own box, pointing at the anchor's reading-start corner. */
+    origin: string;
+}
+/** Emil's popover spacing: close enough to read as the control's, clear of its focus ring. */
+declare const FLOATING_GAP = 8;
+/** The viewport margin — a panel never touches the screen's edge. */
+declare const FLOATING_MARGIN = 12;
+/** Where `panel` goes beside `anchor` inside `viewport`. */
+declare function placeFloating(anchor: FloatingRect, panel: FloatingSize, viewport: FloatingViewport, options?: FloatingOptions): FloatingPlacement;
+
+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, CALENDAR_CLOSING_ATTRIBUTE, CALENDAR_DESIGN_ATTRIBUTE, CALENDAR_SHEET_QUERY, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CalendarClass, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_INTERACTION_EASING, 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, DatePickerRuntime, DeclarationContext, EASING_KEYWORDS, EASING_TOKENS, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, EasingKeyword, EasingToken, FLOATING_GAP, FLOATING_MARGIN, FloatingSide, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION_TRAITS, HOVER_MEDIA_QUERY, HOVER_STATES, INTERACTION_ANIMATION_ID, 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_TRAITS, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, OUTER_STYLE_PROPS, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, PointerKind, REDUCED_MOTION_QUERY, RELATIONAL_STATE_PSEUDO, RevealActionType, SCROLLED_ATTRIBUTE, SCROLLED_STATE_ROLE, SCROLLED_THRESHOLD_PX, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SHAKE_DURATION_MS, SHAKE_EASING, SHAKE_KEYFRAMES, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, STRUCTURAL_STATES, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SettleMode, StringFormRuntime, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TRANSITION_PROPERTY_KEY, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, animateAction, applyBindingPipes, applyFeel, attachDatePicker, attachDatePickers, attachStringForm, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, datePickerOf, declaredInputNames, decomposeBackdropFilter, defaultHoverTransitionTraits, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, fieldLanguage, finalKeyframe, framesFromLiveValue, gateHoverRule, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCubicBezier, isCurrentLink, isEasingToken, isExternalOrFragment, isGradientPaint, isHoverPointer, isHoverState, isInputOverriddenAt, isInteractionEasing, isLastEmittedStateKey, isOverriddenAt, isPressFeedback, isScrolled, isStructuralState, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, placeFloating, planPartRule, planResponsiveRules, planScroll, planStateRule, planSwiperOptions, playDualLayerTransition, playInteraction, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolveInteractionEasing, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setDateFieldValue, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, settleInteraction, settleModeFor, shakeElement, showCalendarDesign, sliderControlElements, sliderInputsFromProps, sliderInputsOf, splitOuterProps, splitPressFeedback, stateNamesIn, statePseudoClass, stateSelectorSuffix, stateTransitionProperties, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, transitionPropertyList, viewportTransitionContext, watchScrolled, withContextSlots, withStateTransitions, wrapInBreakpointQuery, wrapInMediaQuery };
+export type { A11yNodeSource, AnimateActionOptions, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, DatePickerOptions, FloatingOptions, FloatingPlacement, FloatingRect, FloatingSize, FloatingViewport, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, PressAction, RegisteredField, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, ScrollSource, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SettleOptions, SliderBootOptions, SliderControlElements, SliderInputs, StateRulePlan, StateScope, StateStyleMap, StringFormOptions, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionPreviewLayers, TransitionTimelineInput, TransitionViewport, ValueSource, VirtualTraitGroup };

package/package.json

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

package/src/design-core/contrast-audit.ts

@@ -152,6 +152,8 @@ export function auditDesignContrast(rows: ReadonlyArray<DesignTokenLike>, mode:
                     ...(e.current ? [['current', { ...ownStyle(e), ...e.current }] as [string, StyleMap]] : []),
                     // `on` (CC4a): the active tab, on every ground it can sit on.
                     ...(e.on ? [['on', { ...ownStyle(e), ...e.on }] as [string, StyleMap]] : []),
+                    // `selected` (premium N1): a chosen chip — its ink on its fill, its fill as its mark.
+                    ...(e.selected ? [['selected', { ...ownStyle(e), ...e.selected }] as [string, StyleMap]] : []),
                 ];
                 const glyph = e.group === GLYPH_GROUP;
                 for (const [state, s] of states) {
@@ -165,6 +167,8 @@ export function auditDesignContrast(rows: ReadonlyArray<DesignTokenLike>, mode:
                     if (mark) check(e.id, 'on mark', parseCssColour(resolveIn(values, mark), ink), bgs, WCAG_AA_UI);
                     // CC4b: a Segmented option's mark IS its on fill (no border) — the fill against the ground it sits on.
                     else if (on?.['backgroundColor']) for (const f of fill) check(e.id, 'on mark', f, bgs, WCAG_AA_UI);
+                    // A chosen chip's mark is its fill (its border is the same colour) — the contract's audit, 1:1.
+                    if (state === 'selected' && (e.selected as StyleMap | undefined)?.['backgroundColor']) for (const f of fill) check(e.id, 'selected mark', f, bgs, WCAG_AA_UI);
                     // What a filled element HOLDS (inkScopes): a button's or a badge's icon reads its ink.
                     if (state === 'base' && INK_SCOPES.some(sc => sc.styles.includes(e.id))) {
                         check(e.id, 'icon', parseCssColour(resolveIn(inkScoped(values, e.id), iconColour), ink), under, WCAG_AA_UI);