``` - Rendered variants: `{DOMAIN}/molecule/ellipsis-loader/ellipsis-loader.render.html` ### field Form field wrapper adding a label and an error state (`ion--field-error`) around any input or input group. - Base class: `araxxe-field` - Elements: `araxxe-field--group`, `araxxe-field--label`, `araxxe-field--message` - States: `ion--field-error` - Pug mixin (library-internal): `+araxxe-field(options)` - props: error, label; accepts block content. - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/molecule/field/field.render.html`) - Rendered variants: `{DOMAIN}/molecule/field/field.render.html` ### from-to Compact origin → destination pair with an arrow icon between two slots (flags or labels). - Base class: `araxxe-from-to` - Elements: `araxxe-from-to--from`, `araxxe-from-to--icon`, `araxxe-from-to--to` (mods: `-a2psms-gt`, `-a2psms-o`, `-a2psms-oio`, `-a2psms-olo`, `-a2psms-wl`) - Quark modifier families: fill - values in quarks.md - Pug mixin (library-internal): `+araxxe-from-to(options)`; accepts block content. (+4 more in `from-to.mixin.pug`) - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/molecule/from-to/from-to.render.html`) - Rendered variants: `{DOMAIN}/molecule/from-to/from-to.render.html` ### from-to-illustration Illustrated origin → destination scene with flagged device icons, used in case detail headers. - Base class: `araxxe-from-to-illustration` - Elements: `araxxe-from-to-illustration--connection`, `araxxe-from-to-illustration--connector`, `araxxe-from-to-illustration--from`, `araxxe-from-to-illustration--icon-connector`, `araxxe-from-to-illustration--message`, `araxxe-from-to-illustration--to` - Pug mixin (library-internal): `+araxxe-from-to-illustration`. - Example: ```html