@globalpayments/vega 2.95.0 → 2.97.0

package/dist/collection/components/vega-selection-chip/vega-selection-chip-group/vega-selection-chip-group.js

@@ -14,7 +14,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimme
 import { createSubStateNotifySlimmer } from '../../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
-import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form/form-field-controller-slimmer';
 import { RequiredFieldRule } from '../../../helpers/validator/rules/required-field-rule';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
 /**
@@ -77,6 +77,14 @@ export class VegaSelectionChipGroup {
      * @vegaVersion 2.90.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Defines custom validation rules for the selection chip group field.
      *
@@ -247,6 +255,30 @@ export class VegaSelectionChipGroup {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/vega-selection-tile-group.js

@@ -14,7 +14,7 @@ import { ChildNodesNotifyObserverSlimmer, } from '../../../helpers/event-manager
 import { SELECTION_TILE_VALUE_CHANGE } from '../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { VegaSelectionTileGroupValueController } from './slimmers/controllers/vega-selection-tile-group-value-controller';
 import { createSubStateNotifySlimmer } from '../../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
-import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form/form-field-controller-slimmer';
 import { RequiredFieldRule } from '../../../helpers/validator/rules/required-field-rule';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaSelectionTileGroupItemsController } from './slimmers/controllers/vega-selection-tile-group-items-controller';
@@ -99,6 +99,14 @@ export class VegaSelectionTileGroup {
      * @vegaVersion 2.89.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Defines custom validation rules for the selection tile group field.
      *
@@ -309,6 +317,30 @@ export class VegaSelectionTileGroup {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-signature-capture/vega-signature-capture.js

@@ -14,7 +14,7 @@ import { WrittenModeRenderer } from './slimmers/written-mode/renderers/written-m
 import { WrittenModeSvgController } from './slimmers/written-mode/controllers/written-mode-svg-controller';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-rule';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { getCurrentBreakpoint } from '../../utils/breakpoints';
@@ -81,6 +81,14 @@ export class VegaSignatureCapture {
      * @vegaVersion 2.89.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Determines whether the clear button is displayed.
      *
@@ -264,6 +272,30 @@ export class VegaSignatureCapture {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "showClearBtn": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-stepper/vega-stepper.js

@@ -10,7 +10,7 @@ import { MinNumberRule } from '../../helpers/validator/rules/min-number-rule';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { convertToNumber, normalizeNumberByRanger } from '../../utils/number';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaBlur, VegaChange, VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
@@ -101,6 +101,14 @@ export class VegaStepper {
      * @vegaVersion 1.18.0
      */
     this.autoValidation = true;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Specifies the style variant for the stepper buttons.
      *
@@ -184,7 +192,7 @@ export class VegaStepper {
         h("vega-button-circle", { label: "Decrease", showTooltip: false, icon: "minus-sign", ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => this.onDecrease());
           }, disabled: this.value <= this.min || this.disabled, size: "small", variant: this.buttonVariant == 'secondary' ? 'secondary' : 'primary' }),
-        h("vega-input", { size: "small", type: "number", max: this.max, min: this.min, value: `${this.value}`, disabled: this.inputDisabled || this.disabled, showClearIcon: false, ref: (el) => {
+        h("vega-input", { size: "small", type: "number", max: this.max, min: this.min, value: `${this.value}`, disabled: this.inputDisabled || this.disabled, name: this.name, showClearIcon: false, ref: (el) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaBlur, (input) => this.handleInputBlur(input));
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaChange, (input) => this.onChildInputChange(input));
             return (this.inputRef = el);
@@ -394,6 +402,30 @@ export class VegaStepper {
       "reflect": true,
       "defaultValue": "true"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "buttonVariant": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/vega-textarea/vega-textarea.js

@@ -10,7 +10,7 @@ import { MinStringLengthRule } from '../../helpers/validator/rules/min-string-le
 import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-rule';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../helpers/change-manager/change-manager';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
@@ -210,6 +210,14 @@ export class VegaTextarea {
      * @vegaVersion 2.88.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Determines whether the user can vertically resize the text area by
      * dragging its bottom-right corner. When `false`, the resize handle is
@@ -243,7 +251,7 @@ export class VegaTextarea {
     this.validationRules = [];
     this.renderTextareaContainer = () => {
       return (h("div", { class: { 'vega-textarea-container': true, 'vega-textarea-not-resizable': !this.resizable }, ref: (e) => (this.inputContainerRef = e) },
-        h("textarea", { rows: this.rows >= 2 ? this.rows - 1 : 4, placeholder: this.placeholder, disabled: this.disabled, required: this.required, ref: this.setTextareaRef, maxLength: this.maxLength, minLength: this.minLength, value: this.value, onBlur: this.handleTextareaBlur, "aria-label": this.label || 'No label defined' }),
+        h("textarea", { rows: this.rows >= 2 ? this.rows - 1 : 4, placeholder: this.placeholder, disabled: this.disabled, required: this.required, name: this.name, ref: this.setTextareaRef, maxLength: this.maxLength, minLength: this.minLength, value: this.value, onBlur: this.handleTextareaBlur, "aria-label": this.label || 'No label defined' }),
         this.showCounter && this.renderCharacterCounter()));
     };
     this.renderHintMessage = () => {
@@ -652,6 +660,30 @@ export class VegaTextarea {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "resizable": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-time-picker/vega-time-picker.js

@@ -9,7 +9,7 @@ import { ComponentLoadRequired } from '../../decorators/method-decorators/compon
 import { TimeRequiredRule } from '../../helpers/validator/rules/time-required-rule';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { VegaTimePickerLabelRenderer } from './slimmers/renderers/vega-time-picker-label-renderer';
 import { VegaTimePickerSingleInputRenderer } from './slimmers/renderers/vega-time-picker-single-input-renderer';
 import { VegaTimePickerSingleDropdownRenderer } from './slimmers/renderers/vega-time-picker-single-dropdown-renderer';
@@ -125,6 +125,14 @@ export class VegaTimePicker {
      * @vegaVersion 2.89.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Determines the interval between each selectable minute value
      *    in the time picker.
@@ -388,6 +396,30 @@ export class VegaTimePicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/vega-toggle-switch/vega-toggle-switch.js

@@ -11,7 +11,7 @@ import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { ToggleSwitchRequiredRule } from '../../helpers/validator/rules/toggle-switch-required-rule';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../helpers/change-manager/change-manager';
@@ -73,6 +73,14 @@ export class VegaToggleSwitch {
      * @vegaVersion 2.89.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Specifies whether the toggle switch is disabled.
      *
@@ -152,7 +160,7 @@ export class VegaToggleSwitch {
     return sanitizeVegaComponent(h(Host, null,
       h("vega-flex", { gap: "size-8", ref: (node) => (this.toggleSwitchContainer = node) },
         h("div", { class: `${divContainerCss} vega-flex-shrink-0 v-min-w-min` },
-          h("input", { type: "checkbox", name: "switch", disabled: this.disabled, checked: this.checked, onChange: this.updateValue, "aria-label": this.label || 'No label defined', role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
+          h("input", { type: "checkbox", name: this.name, disabled: this.disabled, checked: this.checked, onChange: this.updateValue, "aria-label": this.label || 'No label defined', role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
           h("span", { class: this.disabled ? 'v-bg-tertiary' : 'v-bg-primary' })),
         this.renderLabelDom())), this.host);
   }
@@ -297,6 +305,30 @@ export class VegaToggleSwitch {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/helpers/a11y-tree/a11y-node-dto.js

@@ -0,0 +1,210 @@
+/**
+ * Semantic DTO layer for the A11y Tree.
+ *
+ * Authoring an A11y Tree with raw `A11yNode` literals asks the developer to
+ * think in ARIA terms (`role: 'group'`, `decorative: true`, etc.). The DTO
+ * classes here provide a higher-level vocabulary that names the *content's
+ * meaning* — "this is a container", "this is a heading", "this is a
+ * decorative icon" — and lets the strategy layer translate intent into ARIA.
+ *
+ * ## Design (Visitor / Strategy + typed semantic DTOs)
+ *
+ * - DTOs are *type-holders for semantic intent*. They do NOT contain ARIA
+ *   generation logic themselves.
+ * - Each DTO compiles to an `A11yNode` whose `kind` field carries the
+ *   semantic discriminator. Strategies can then dispatch on `kind`
+ *   (preferred) or fall back to `role` (for plain `A11yNode` authors).
+ * - This keeps strategies pure and independently testable, while letting
+ *   authors write:
+ *
+ *   ```ts
+ *   new A11yContainerNode('st-root', { label, description })
+ *     .childrenWith(
+ *       new A11yHeadingNode('st-heading', { level: 2, label }),
+ *       new A11yIconNode('st-icon'),
+ *     );
+ *   ```
+ *
+ *   instead of hand-shaping `{ role: 'group', label, description, … }`.
+ *
+ * ## Migration path
+ *
+ * Phase 1 (this file): DTOs are an additive layer on top of `A11yNode`.
+ * Existing strategies continue to work unchanged because each DTO emits
+ * a fully-populated `A11yNode` with `role` set correctly.
+ *
+ * Phase 2 (follow-up): strategies grow `compileNode(node)` methods that
+ * dispatch on `node.kind` for cases where semantic intent is richer than
+ * `role` alone can express.
+ */
+/**
+ * Base class for all semantic DTO nodes. Provides the `childrenWith()`
+ * composition helper and the abstract `toA11yNode()` contract.
+ */
+export class A11yNodeDto {
+  constructor() {
+    this.childDtos = [];
+  }
+  /**
+   * Declare the semantic children of this node in reading order.
+   *
+   * @param {...A11yNodeDto} children - Semantic child DTOs in reading order.
+   * @returns {this} `this`, for fluent chaining.
+   */
+  childrenWith(...children) {
+    this.childDtos = children;
+    return this;
+  }
+  /**
+   * Compile the declared child DTOs into their `A11yNode` representations.
+   *
+   * @returns {A11yNode[] | undefined} The compiled children, or `undefined` when none.
+   */
+  compileChildren() {
+    if (this.childDtos.length === 0)
+      return undefined;
+    return this.childDtos.map((c) => c.toA11yNode());
+  }
+}
+/**
+ * A generic container that groups related content. Maps to `role="group"`
+ * by default; strategies may upgrade to `role="region"` when a description
+ * is present and the platform benefits (e.g. Firefox+NVDA landmark
+ * navigation — see `firefox-nvda-strategy.ts`).
+ */
+export class A11yContainerNode extends A11yNodeDto {
+  constructor(id, opts = {}) {
+    super();
+    this.id = id;
+    this.opts = opts;
+    this.kind = 'container';
+  }
+  /**
+   * Compile this DTO into its `A11yNode` representation.
+   *
+   * @returns {A11yNode} The compiled semantic node.
+   */
+  toA11yNode() {
+    return {
+      id: this.id,
+      kind: this.kind,
+      role: 'group',
+      label: this.opts.label,
+      description: this.opts.description,
+      children: this.compileChildren(),
+    };
+  }
+}
+/**
+ * A navigable / discoverable section (landmark). Always renders as
+ * `role="region"` so it appears in AT landmark navigation.
+ */
+export class A11yLandmarkNode extends A11yNodeDto {
+  constructor(id, opts = {}) {
+    super();
+    this.id = id;
+    this.opts = opts;
+    this.kind = 'landmark';
+  }
+  /**
+   * Compile this DTO into its `A11yNode` representation.
+   *
+   * @returns {A11yNode} The compiled semantic node.
+   */
+  toA11yNode() {
+    return {
+      id: this.id,
+      kind: this.kind,
+      role: 'region',
+      label: this.opts.label,
+      description: this.opts.description,
+      children: this.compileChildren(),
+    };
+  }
+}
+/**
+ * A heading at the given level (1–6, defaults to 2).
+ *
+ * Use this instead of a raw `{ role: 'heading', level: 2 }` literal to
+ * benefit from the default-level guard and the `kind` discriminator.
+ */
+export class A11yHeadingNode extends A11yNodeDto {
+  constructor(id, opts = {}) {
+    super();
+    this.id = id;
+    this.opts = opts;
+    this.kind = 'heading';
+  }
+  /**
+   * Compile this DTO into its `A11yNode` representation.
+   *
+   * @returns {A11yNode} The compiled semantic node.
+   */
+  toA11yNode() {
+    var _a;
+    return {
+      id: this.id,
+      kind: this.kind,
+      role: 'heading',
+      level: (_a = this.opts.level) !== null && _a !== void 0 ? _a : 2,
+      label: this.opts.label,
+      children: this.compileChildren(),
+    };
+  }
+}
+/**
+ * A purely decorative icon. `decorative` is always `true` so authors never
+ * have to remember the flag — that is the whole point of this DTO class.
+ *
+ * Produces `aria-hidden="true"` via the baseline strategy; webkit-voiceover
+ * additionally sets `role="none"` as a belt-and-suspenders guard.
+ */
+export class A11yIconNode extends A11yNodeDto {
+  constructor(id) {
+    super();
+    this.id = id;
+    this.kind = 'icon';
+  }
+  /**
+   * Compile this DTO into its `A11yNode` representation.
+   *
+   * @returns {A11yNode} The compiled semantic node.
+   */
+  toA11yNode() {
+    return {
+      id: this.id,
+      kind: this.kind,
+      role: 'img',
+      decorative: true,
+      children: this.compileChildren(),
+    };
+  }
+}
+/**
+ * An informative image that requires an accessible label (alt text).
+ *
+ * Produces `role="img"` + `aria-label` via the baseline strategy.
+ * Contrast with `A11yIconNode` which is always decorative.
+ */
+export class A11yImageNode extends A11yNodeDto {
+  constructor(id, opts) {
+    super();
+    this.id = id;
+    this.opts = opts;
+    this.kind = 'image';
+  }
+  /**
+   * Compile this DTO into its `A11yNode` representation.
+   *
+   * @returns {A11yNode} The compiled semantic node.
+   */
+  toA11yNode() {
+    return {
+      id: this.id,
+      kind: this.kind,
+      role: 'img',
+      label: this.opts.label,
+      children: this.compileChildren(),
+    };
+  }
+}