@fusion.dev/helix-headless 0.142.1 → 0.144.0

package/dist/icon/registry.d.ts

@@ -0,0 +1,37 @@
+import type { HelixIcon } from '@fusion.dev/helix-icons';
+/** What a library gives for a name: a glyph, a glyph later, or nothing. */
+export type IconResolver = (name: string) => HelixIcon | Promise<HelixIcon | undefined> | undefined;
+/**
+ * Makes glyphs resolvable by name: a record of names to glyphs, such as the
+ * whole set, or a list of glyphs, each under its own `name`.
+ *
+ * A name registered again takes the newer glyph.
+ */
+export declare const registerIcons: (glyphs: Record<string, HelixIcon> | readonly HelixIcon[]) => void;
+/**
+ * Resolves names written `prefix:name` through a library of your own, such as
+ * another icon set or glyphs fetched from a server.
+ *
+ * The resolver may answer at once or with a promise; an element waiting on a
+ * promise draws the glyph when it arrives and fires `load`. Each written name
+ * is asked once, and a prefix registered again is asked afresh.
+ */
+export declare const registerIconLibrary: (prefix: string, resolve: IconResolver) => void;
+/**
+ * Calls `watcher` whenever a glyph or a library is registered, so an element
+ * drawn before its glyph was registered can look again. Returns the function
+ * that stops it.
+ */
+export declare const watchIcons: (watcher: () => void) => (() => void);
+/** The registered glyph of this name, or `undefined`. */
+export declare const registeredIcon: (name: string) => HelixIcon | undefined;
+/**
+ * The glyph for a name: a registered one at once, or what the library its
+ * prefix names gives, which may be a promise. `undefined` where nothing
+ * answers.
+ *
+ * A registered name wins over a library, so a page can override one glyph of
+ * a library by registering it under the same written name. A library that
+ * fails answers nothing.
+ */
+export declare const resolveIcon: (name: string) => HelixIcon | Promise<HelixIcon | undefined> | undefined;

package/dist/icon/registry.js

@@ -0,0 +1,83 @@
+const KEY = Symbol.for('helix.icon-registry');
+const changed = (held) => {
+    for (const watcher of held.watchers) {
+        watcher();
+    }
+};
+const registry = () => {
+    const held = globalThis;
+    let found = held[KEY];
+    if (!found) {
+        found = { answers: new Map(), glyphs: new Map(), libraries: new Map(), watchers: new Set() };
+        held[KEY] = found;
+    }
+    return found;
+};
+export const registerIcons = (glyphs) => {
+    const held = registry();
+    const into = held.glyphs;
+    const entries = Array.isArray(glyphs)
+        ? glyphs.map((glyph) => [glyph.name, glyph])
+        : Object.entries(glyphs);
+    for (const [name, glyph] of entries) {
+        into.set(name, glyph);
+    }
+    changed(held);
+};
+export const registerIconLibrary = (prefix, resolve) => {
+    const held = registry();
+    held.libraries.set(prefix, resolve);
+    for (const name of held.answers.keys()) {
+        if (name.startsWith(`${prefix}:`)) {
+            held.answers.delete(name);
+        }
+    }
+    changed(held);
+};
+export const watchIcons = (watcher) => {
+    const held = registry();
+    held.watchers.add(watcher);
+    return () => {
+        held.watchers.delete(watcher);
+    };
+};
+export const registeredIcon = (name) => registry().glyphs.get(name);
+export const resolveIcon = (name) => {
+    const registered = registeredIcon(name);
+    if (registered || name === '') {
+        return registered;
+    }
+    const split = name.indexOf(':');
+    if (split <= 0) {
+        return undefined;
+    }
+    const held = registry();
+    if (held.answers.has(name)) {
+        return held.answers.get(name);
+    }
+    const library = held.libraries.get(name.slice(0, split));
+    if (!library) {
+        return undefined;
+    }
+    const answer = asked(library, name.slice(split + 1));
+    if (answer instanceof Promise) {
+        const settled = answer.then((glyph) => glyph, () => undefined);
+        held.answers.set(name, settled);
+        void settled.then((glyph) => {
+            if (held.answers.get(name) === settled) {
+                held.answers.set(name, glyph);
+            }
+        });
+        return settled;
+    }
+    held.answers.set(name, answer);
+    return answer;
+};
+const asked = (library, name) => {
+    try {
+        return library(name);
+    }
+    catch {
+        return undefined;
+    }
+};

package/dist/icon/root/icon-root.d.ts

@@ -1,6 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type HelixIcon } from '@fusion.dev/helix-icons';
-import { nothing, type TemplateResult } from 'lit';
+import type { HelixIcon } from '@fusion.dev/helix-icons';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A named icon from the Helix set.
  *
@@ -18,11 +18,22 @@ import { nothing, type TemplateResult } from 'lit';
  * a dark background. Shapes that set their own `fill` or `stroke` are
  * unaffected.
  *
- * A name with no match renders nothing.
+ * **A name is looked up in a registry.** The family's entry registers the
+ * whole set, so any name in it draws. The element's own entry,
+ * `@fusion.dev/helix-headless/icon/root`, registers none: a page that imports
+ * it and calls `registerIcons` with the glyphs it names ships those and no
+ * others. `registerIconLibrary` resolves names under a prefix of your own,
+ * such as `lucide:camera`, at once or later, and the element fires `load` when
+ * a glyph that came later is drawn. A glyph registered after the element
+ * rendered is drawn then.
+ *
+ * A name with no match renders nothing, and the element fires `error`, so a
+ * typo in a name can be heard.
  *
  * An icon is decorative by default and hidden from assistive technology. Set
  * `label` only when the icon is the only carrier of meaning, such as in a
- * button with no text.
+ * button with no text. An `aria-label` on the element works too: the element
+ * is then an image with that name.
  *
  * @since 0.1.0
  * @status stable
@@ -30,6 +41,9 @@ import { nothing, type TemplateResult } from 'lit';
  * @aliases Glyph, Symbol
  * @documentation https://fusion.dev/helix/components/icon
  *
+ * @event {Event} error - `name` matches no registered icon and no library answers it, so nothing is drawn.
+ * @event {Event} load - A glyph a library gave later for `name` is drawn.
+ *
  * @csspart svg - The rendered SVG.
  */
 export declare class HelixHeadlessIcon extends HelixElement {
@@ -69,10 +83,43 @@ export declare class HelixHeadlessIcon extends HelixElement {
      * so it is what markup can carry, and resolving one means an index of the
      * whole set that no bundler can shake: 15 kB for a consumer who renders one
      * mark. An attribute is the only thing an HTML author can write, and that is
-     * worth the index; a consumer who would rather not pay it hands over the
-     * value instead.
+     * worth the index; a consumer who would rather not pay it imports the
+     * element from `icon/root` and registers the glyphs it names, or hands over
+     * the value instead.
+     *
+     * A name written `prefix:name` asks the library registered under that
+     * prefix.
      */
     name: string;
+    /**
+     * Hears an `aria-label` written on the element, which no property mirrors.
+     *
+     * Lit observes the attributes of its own properties only, and `ariaLabel`
+     * belongs to the platform.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called by the browser when an observed attribute changes. A new
+     * `aria-label` asks for an update, because the element takes the image role
+     * while one names it.
+     */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /** The name the last `error` was fired for, so it fires once per name. */
+    private missed;
+    /** The glyph this render draws, from `icon` or the registry. */
+    private drawn;
+    /** A library is still answering for `name`, so it is not missing yet. */
+    private waiting;
+    /** The name whose late glyph arrived and has not been announced with `load`. */
+    private arrived;
+    /** Stops listening to the registry. */
+    private unwatch;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** What the registry gives for `name` now, starting the wait for a late glyph. */
+    private lookup;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {

package/dist/icon/root/icon-root.js

@@ -4,21 +4,89 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
-import { icons } from '@fusion.dev/helix-icons';
+import { customElement, HelixElement, hostAria, reportRuntime } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { resolveIcon, watchIcons } from '../registry.js';
 let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
         this.mirror = false;
         this.name = '';
+        this.missed = '';
+        this.waiting = false;
+        this.arrived = '';
+    }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label') {
+            this.requestUpdate();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.unwatch = watchIcons(() => {
+            if (this.icon === undefined && this.name !== '') {
+                this.requestUpdate();
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unwatch?.();
+        this.unwatch = undefined;
+    }
+    lookup() {
+        const found = this.name === '' ? undefined : resolveIcon(this.name);
+        this.waiting = found instanceof Promise;
+        if (!(found instanceof Promise)) {
+            return found;
+        }
+        const name = this.name;
+        void found.then(() => {
+            if (this.name === name && this.isConnected) {
+                this.arrived = name;
+                this.requestUpdate();
+            }
+        });
+        return undefined;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        const named = this.label === '' && (this.getAttribute?.('aria-label') ?? '') !== '';
+        hostAria(this.internals, { role: named ? 'img' : '' });
+        this.drawn = this.icon ?? this.lookup();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.arrived === this.name && this.drawn !== undefined) {
+            this.dispatchEvent(new Event('load', { bubbles: false, cancelable: false, composed: false }));
+        }
+        this.arrived = '';
+        if (this.drawn === undefined && this.name !== '' && !this.waiting) {
+            if (this.missed !== this.name) {
+                this.missed = this.name;
+                this.dispatchEvent(new Event('error', { bubbles: false, cancelable: false, composed: false }));
+                reportRuntime({
+                    kind: 'unknown-icon',
+                    message: `<${this.localName} name="${this.name}"> names no registered icon, so it draws ` +
+                        'nothing. Check the name, register the glyph with `registerIcons`, or import it ' +
+                        'and pass it as `icon`.',
+                    tag: this.localName,
+                });
+            }
+        }
+        else {
+            this.missed = '';
+        }
     }
     render() {
-        const named = Object.hasOwn(icons, this.name) ? icons[this.name] : undefined;
-        const icon = this.icon ?? named;
+        const icon = this.drawn;
         if (!icon) {
             return nothing;
         }

package/dist/icon/root/index.d.ts

@@ -0,0 +1,2 @@
+export { type IconResolver, registerIconLibrary, registerIcons, resolveIcon } from '../registry.js';
+export * from './icon-root.js';

package/dist/icon/root/index.js

@@ -0,0 +1,2 @@
+export { registerIconLibrary, registerIcons, resolveIcon } from '../registry.js';
+export * from './icon-root.js';

package/dist/icon/set.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/icon/set.js

@@ -0,0 +1,3 @@
+import { icons } from '@fusion.dev/helix-icons';
+import { registerIcons } from './registry.js';
+registerIcons(icons);

package/dist/icon-button/root/icon-button-root.d.ts

@@ -25,7 +25,7 @@ import { HelixHeadlessButton } from '../../button/root/button-root.js';
  *
  * @slot - The icon.
  *
- * @csspart button - The inner button or anchor.
+ * @csspart button - The inner button.
  */
 export declare class HelixHeadlessIconButton extends HelixHeadlessButton {
 }

package/dist/image/root/image-root.d.ts

@@ -27,15 +27,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart fallback - The fallback, shown when the image fails to load.
  * @csspart image - The image itself.
  * @csspart placeholder - The placeholder, shown until the image loads.
+ *
+ * @cssstate error - The image failed to load, and the fallback shows.
+ * @cssstate loaded - The image loaded.
  */
 export declare class HelixHeadlessImage extends HelixElement {
     /**
      * A text description of the image, read by screen readers.
      *
      * Empty is a real answer and means decoration. Omitting the attribute is not
-     * the same thing: a reader with nothing to read announces the file name.
+     * the same thing: the inner image is then written with no `alt` either, as a
+     * native one would be, so a screen reader announces the file name and an
+     * accessibility checker reports the missing description.
      */
-    alt: string;
+    alt?: string;
     /**
      * How the image is fetched across origins. It decides whether a canvas can
      * read the image.
@@ -69,6 +74,14 @@ export declare class HelixHeadlessImage extends HelixElement {
      * that is not is the exception worth writing down.
      */
     loading?: 'eager' | 'lazy';
+    /**
+     * How long, in milliseconds, the placeholder waits before it shows.
+     *
+     * Absent or `0` shows it at once. A picture that arrives inside
+     * the wait never shows a placeholder at all, so a cached or fast image does
+     * not flash one. Radix's `delayMs` on its avatar fallback is the same idea.
+     */
+    placeholderDelay: number;
     /**
      * How much of the referring URL to send with the request.
      */
@@ -110,6 +123,8 @@ export declare class HelixHeadlessImage extends HelixElement {
      * Which `src` the current status belongs to, so a new one starts over.
      */
     private answered;
+    /** The placeholder's wait for this `src`, and whether it is over. */
+    private readonly wait;
     /**
      * Whether this picture's answer has been given, or is on its way.
      *
@@ -117,6 +132,11 @@ export declare class HelixHeadlessImage extends HelixElement {
      * for the event it reports, and `settle` runs twice in the first update.
      */
     private reported;
+    /**
+     * The event `settle` sent for a picture that finished before anything
+     * listened, so the platform's own, still on its way, is not sent again.
+     */
+    private synthesized;
     /**
      * Says so under the platform's own name, because the platform's cannot escape.
      *
@@ -170,6 +190,7 @@ export declare class HelixHeadlessImage extends HelixElement {
     private settle;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    private startWait;
     protected firstUpdated(changed: PropertyValues): void;
     /**
      * The picture's own state, under the platform's own names.

package/dist/image/root/image-root.js

@@ -4,23 +4,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, DelayController, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
     constructor() {
         super(...arguments);
-        this.alt = '';
         this.crossOrigin = null;
         this.decoding = 'async';
         this.fetchPriority = 'auto';
+        this.placeholderDelay = 0;
         this.referrerPolicy = '';
         this.sizes = '';
         this.src = '';
         this.srcset = '';
         this.status = 'loading';
         this.answered = '';
+        this.wait = new DelayController(this);
         this.reported = false;
+        this.synthesized = undefined;
         this.handleLoad = (event) => {
             this.announce('loaded', event);
         };
@@ -32,10 +34,15 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         this.reported = true;
         const name = status === 'loaded' ? 'load' : 'error';
         if (event) {
+            if (this.synthesized === name) {
+                this.synthesized = undefined;
+                return;
+            }
             this.status = status;
             this.relayNativeEvent(event);
             return;
         }
+        this.synthesized = name;
         const send = () => {
             this.status = status;
             this.dispatchEvent(new Event(name, { bubbles: false, cancelable: false, composed: false }));
@@ -64,6 +71,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         if (changed.has('src') && this.answered !== this.src) {
             this.answered = this.src;
             this.reported = false;
+            this.synthesized = undefined;
             this.status = 'loading';
         }
     }
@@ -72,6 +80,9 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         if (changed.has('src')) {
             this.settle();
         }
+        if (changed.has('src') || changed.has('placeholderDelay')) {
+            this.startWait();
+        }
         if (changed.has('status')) {
             if (this.status === 'loading') {
                 this.removeAttribute('data-status');
@@ -79,8 +90,13 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
             else {
                 this.setAttribute('data-status', this.status);
             }
+            this.toggleState('loaded', this.status === 'loaded');
+            this.toggleState('error', this.status === 'error');
         }
     }
+    startWait() {
+        this.wait.start(this.placeholderDelay > 0 ? this.placeholderDelay : undefined);
+    }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
         this.settle();
@@ -103,7 +119,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
     render() {
         return html `<img
         part="image"
-        alt=${this.alt}
+        alt=${this.alt ?? nothing}
         loading=${this.loading ?? 'lazy'}
         decoding=${this.decoding}
         crossorigin=${this.crossOrigin ?? nothing}
@@ -118,7 +134,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
       <span
         part="placeholder"
         aria-hidden="true"
-        ?hidden=${this.status !== 'loading'}
+        ?hidden=${this.status !== 'loading' || (this.placeholderDelay > 0 && !this.wait.elapsed)}
         ><slot name="placeholder"></slot
       ></span>
       <span
@@ -144,6 +160,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessImage.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: 'placeholder-delay', type: Number })
+], HelixHeadlessImage.prototype, "placeholderDelay", void 0);
 __decorate([
     property({ attribute: 'referrerpolicy' })
 ], HelixHeadlessImage.prototype, "referrerPolicy", void 0);

package/dist/input/root/input-root.d.ts

@@ -29,10 +29,14 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * @documentation https://fusion.dev/helix/components/input
  *
  * @slot end - After the text, for an icon or a unit.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot start - Before the text, for an icon or a prefix.
  *
  * @event {Event} change - Sent when the user finishes changing the value. Relayed from the native input.
  * @event {HelixBeforeChangeEvent} helix-before-change - The text is about to change. Cancelable: cancel it to keep the current text.
+ * @event {Event} helix-clear - Fired after the clear button has emptied the field, after `input` and `change`.
  * @event {Event} input - Fired as the value changes.
  *
  * @csspart clear - The button that empties the field.
@@ -50,6 +54,11 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
+    /**
+     * Whether a phone capitalizes as the reader types: `off`, `sentences`,
+     * `words` or `characters`, as the platform's `autocapitalize`.
+     */
+    autocapitalize: string;
     /**
      * What the browser may autofill in the field, as an HTML `autocomplete`
      * token.
@@ -71,10 +80,30 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * The accessible name of the clear button, which shows only an icon.
      */
     clearLabel: string;
+    /**
+     * The key the on-screen keyboard shows for Enter, as the platform's
+     * `enterkeyhint`: `search`, `send`, `go`, `next`, `previous`, `done` or
+     * `enter`.
+     */
+    enterKeyHint: string;
+    /**
+     * The keyboard a phone offers, as the platform's `inputmode`, such as
+     * `numeric` for a code typed as text.
+     */
+    inputMode: string;
+    /**
+     * The greatest value, for `type="number"`. Number Input adds steppers and
+     * keys to the same bounds.
+     */
+    max: string;
     /**
      * Most characters the value may have.
      */
     maxLength?: number;
+    /**
+     * The least value, for `type="number"`.
+     */
+    min: string;
     /**
      * Fewest characters the value may have.
      */
@@ -106,6 +135,15 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * form, `readOnly` came back `false`.
      */
     readOnly: boolean;
+    /**
+     * Whether a password field offers a toggle that shows what was typed.
+     *
+     * Ignored on every other type. A reveal on an email field would be a button
+     * that does nothing visible, and guarding it here rather than asking the
+     * consumer not to means the property can be set once on a component that
+     * changes type.
+     */
+    reveal: boolean;
     /**
      * Whether the password is currently showing.
      *
@@ -181,6 +219,15 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
      * where it was.
      */
     private readonly handleClear;
+    /**
+     * Enter submits the form, as it does in a native text field.
+     *
+     * On `keypress`, where the platform runs its own implicit submission, so a
+     * consumer who prevents the `keydown` for Enter stops this too.
+     */
+    private readonly handleKeypress;
+    /** @internal A single line of text counts against implicit submission. */
+    protected get blocksImplicitSubmission(): boolean;
     /** Relayed, because `change` does not cross a shadow boundary on its own. */
     private readonly handleChange;
     /** Reports the value and the validity the host stands behind. */
@@ -189,6 +236,16 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     focus(options?: FocusOptions): void;
     /** Selects everything in the field. */
     select(): void;
+    /**
+     * Moves a number, a date or a time up by `step`, `count` times, as the native
+     * method does. It sends no event, as the native method sends none, and it
+     * throws `InvalidStateError` on a type with no step, such as `text`.
+     */
+    stepUp(count?: number): void;
+    /** Moves a number, a date or a time down by `step`, `count` times. See `stepUp`. */
+    stepDown(count?: number): void;
+    /** Takes the native control's answer, which knows `min`, `max` and `step`. */
+    private takeStep;
     /**
      * The caret, held across a value the consumer wrote rather than the reader.
      *
@@ -198,21 +255,17 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     private releaseCaret;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * Whether a password field offers a toggle that shows what was typed.
-     *
-     * Ignored on every other type. A reveal on an email field would be a button
-     * that does nothing visible, and guarding it here rather than asking the
-     * consumer not to means the property can be set once on a component that
-     * changes type.
-     */
-    reveal: boolean;
     /**
      * The accessible name of the reveal toggle.
      *
      * The state is `aria-pressed`, not this.
      */
     revealLabel: string;
+    /**
+     * The step a valid value is a multiple of, counted from `min`, for
+     * `type="number"`.
+     */
+    step: string;
     /**
      * The kind of text the field accepts. It sets the on-screen keyboard and the
      * validation.