@heartlandone/vega 2.85.0 → 2.87.0-beta.1

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

@@ -19,6 +19,7 @@ import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaCheckboxShowErrorController } from './slimmers/controllers/vega-checkbox-show-error-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
+import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
  * @vegaVersion 1.0.7
  */
@@ -26,6 +27,14 @@ export class VegaCheckbox {
   constructor() {
     this.globalSlimmers = {};
     this.vegaCheckboxShowErrorController = new VegaCheckboxShowErrorController();
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => {
+      return this.host.shadowRoot.querySelector('input');
+    }, {
+      'aria-label': {
+        dependency: ['data-aria-label', 'identifier'],
+        defaultValue: 'No label defined',
+      },
+    });
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -203,8 +212,8 @@ export class VegaCheckbox {
           this.showError && 'error',
           this.size && `size-${this.size}`,
         ]), ref: (e) => (this.inputContainerRef = e) },
-        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
-        h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1 }, this.renderIconDom()),
+        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
+        h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1, "aria-hidden": "true" }, this.renderIconDom()),
         h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) },
           this.renderLabelDom(),
           this.renderRequireDom()))), this.host);
@@ -540,6 +549,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "vegaCheckboxShowErrorController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckbox.prototype, "ariaAttributesValueMapper", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "formFieldController", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-month-item-renderer.js

@@ -124,6 +124,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "fillContainer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.css

@@ -1084,6 +1084,22 @@
   max-height: 600px;
 }
 
+:host(.fill-container) .calendar .container__main,
+:host(.fill-container.dual-months) .calendar .container__main {
+  max-width: 100%;
+  max-height: 100%;
+}
+:host(.fill-container) .calendar .container__main .container__days,
+:host(.fill-container.dual-months) .calendar .container__main .container__days {
+  width: 100%;
+  min-height: 0px;
+  flex: 1 1 auto;
+}
+:host(.fill-container) .calendar.static-height .container__main,
+:host(.fill-container.dual-months) .calendar.static-height .container__main {
+  aspect-ratio: auto;
+}
+
 .calendar .container__main {
   display: flex;
   flex-direction: column;
@@ -1155,7 +1171,7 @@
   align-content: flex-start;
 }
 
-.calendar:not(.static-height) .container__days {
+:host(:not(.fill-container)) .calendar:not(.static-height) .container__days {
   flex: none;
 }
 

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.js

@@ -51,6 +51,13 @@ export class VegaDatePickerCalendar {
      * @vegaVersion 2.72.0
      */
     this.size = 'regular';
+    /**
+     * Specifies whether to allow the calendar picker to fill the width and height of its parent container.
+     *    As default, the calendar picker has a max width and height limit based on the size and mode variant.
+     *
+     * @vegaVersion 2.86.0
+     */
+    this.fillContainer = false;
     /**
      * Specifies the selection mode of the date picker calendar.
      *
@@ -81,6 +88,7 @@ export class VegaDatePickerCalendar {
     this.clearButton = false;
     /**
      * Specifies the calendar is static height.
+     *    It means the height of calendar will not change according to the number of weeks in the month.
      *
      * @vegaVersion 2.72.0
      */
@@ -170,6 +178,7 @@ export class VegaDatePickerCalendar {
     return sanitizeVegaComponent(h(Host, { class: {
         [this.size]: true,
         [this.mode]: true,
+        'fill-container': this.fillContainer,
         'mobile': this.isMobileDevice,
         'dual-months': this.isDualMonths,
       } }, this.renderer.render()), this.host);
@@ -209,6 +218,27 @@ export class VegaDatePickerCalendar {
       "reflect": false,
       "defaultValue": "'regular'"
     },
+    "fillContainer": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.86.0"
+          }],
+        "text": "Specifies whether to allow the calendar picker to fill the width and height of its parent container.\n   As default, the calendar picker has a max width and height limit based on the size and mode variant."
+      },
+      "attribute": "fill-container",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "mode": {
       "type": "string",
       "mutable": false,
@@ -362,7 +392,7 @@ export class VegaDatePickerCalendar {
             "name": "vegaVersion",
             "text": "2.72.0"
           }],
-        "text": "Specifies the calendar is static height."
+        "text": "Specifies the calendar is static height.\n   It means the height of calendar will not change according to the number of weeks in the month."
       },
       "attribute": "static-height",
       "reflect": false,

package/dist/collection/components/vega-dropdown/vega-dropdown-item/slimmers/renderers/vega-dropdown-item-renderer.js

@@ -25,7 +25,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
         'danger': this.danger && this.selectType === 'none',
       }, tabIndex: this.disabled ? -1 : 0, 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onClick: this.disabled ? undefined : (e) => this.onSelect(e), onKeyDown: createEnterKeyHandlerToTriggerClick(), style: this.height > 0 && {
+      onClick: this.disabled ? undefined : (e) => this.onSelect(e), onKeyDown: createEnterKeyHandlerToTriggerClick({ preventDefault: true }), style: this.height > 0 && {
         height: `${this.height}px`,
         boxSizing: 'border-box',
         overflow: 'hidden',

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -13,6 +13,7 @@ import { PhoneNumberInputRenderer } from './slimmers/renderers/phone-number-inpu
 import { getCountryCallingCode } from '../../polyfill/libphonenumber';
 import { VegaInputPhoneNumberValueController } from './slimmers/controllers/vega-input-phone-number-value-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { ValidPhoneNumberRule } from '../../helpers/validator/rules/valid-phone-number-rule';
 import { CountrySelectController } from './slimmers/controllers/country-select-controller';
@@ -34,6 +35,12 @@ export class VegaInputPhoneNumber {
     this.countrySelectController = new CountrySelectController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaInputPhoneNumber, VegaChange);
     this.countryChangeEventEmitter = createEventEmitSlimmer(VegaInputPhoneNumber, VegaCountryChange);
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => this.host.shadowRoot.querySelector('vega-input'), {
+      'data-aria-label': {
+        dependency: ['data-aria-label', 'label'],
+        defaultValue: 'No label defined',
+      },
+    });
     this.inputPhoneNumberEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, true);
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
@@ -699,6 +706,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputPhoneNumber.prototype, "countryChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "ariaAttributesValueMapper", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputPhoneNumber.prototype, "inputPhoneNumberEventPrevent", void 0);

package/dist/collection/components/vega-modal/slimmers/renderers/vega-modal-renderer.js

@@ -55,7 +55,7 @@ export class VegaModalRenderer extends VegaSlimmer {
     return (h("vega-box", { class: {
         'vega-modal-content': true,
         'vega-modal-content-with-scroll': this.isContentScrollable(),
-      }, padding: this.sectionPaddingState.getContentPadding(), maxHeight: this.contentMaxHeight, ref: (e) => (this.modalContent = e) },
+      }, padding: this.sectionPaddingState.getContentPadding(), maxHeight: this.contentMaxHeight, ref: (e) => (this.modalContent = e), role: this.isContentScrollable() ? 'document' : undefined, tabindex: this.isContentScrollable() ? '-1' : undefined },
       h(Fragment, null,
         h("slot", null),
         h("slot", { name: "content" }),

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-backdrop-controller.js

@@ -19,13 +19,17 @@ export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
         this.updateBackdropUI(this.openState);
       },
     });
+    this.backdrop = null;
     /* eslint-enable jsdoc/require-jsdoc*/
   }
   connectedCallback() {
-    this.backdrop = this.createBackdrop();
+    if (!this.backdrop || !this.backdrop.isConnected) {
+      this.backdrop = this.createBackdrop();
+    }
   }
   disconnectedCallback() {
     this.backdrop && this.backdrop.remove();
+    this.backdrop = null;
   }
   watchOpenState(newState) {
     this.updateBackdropUI(newState);
@@ -59,16 +63,14 @@ export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
   updateBackdropUI(state) {
     // eslint-disable-next-line no-restricted-globals
     const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
+    const backdrop = this.backdrop;
+    if (!backdrop)
+      return;
     if (state === 'open') {
-      if (mainContent && !this.shouldShowBackdrop()) {
-        this.backdrop.visible = false;
-      }
-      else {
-        this.backdrop.visible = true;
-      }
+      backdrop.visible = !mainContent || this.shouldShowBackdrop();
     }
     else {
-      this.backdrop.visible = false;
+      backdrop.visible = false;
     }
   }
   isLargeScreen() {

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-zindex-controller.js

@@ -19,12 +19,12 @@ export class VegaLeftNavZIndexController extends VegaSlimmer {
   updateZIndex() {
     const backDrop = this.backdropController.getBackdrop();
     if (this.openState == 'open') {
-      InternalVegaZIndexManager.setZIndex(backDrop, 'base');
+      backDrop && InternalVegaZIndexManager.setZIndex(backDrop, 'base');
       InternalVegaZIndexManager.setZIndex(this.host, 'base');
     }
     else {
       executeAfterTransition(() => {
-        InternalVegaZIndexManager.removeZIndex(backDrop, 'base');
+        backDrop && InternalVegaZIndexManager.removeZIndex(backDrop, 'base');
         InternalVegaZIndexManager.removeZIndex(this.host, 'base');
       }, this.host, 300);
     }

package/dist/collection/components/vega-rich-text-editor/constants/constant.js

@@ -32,6 +32,14 @@ export const RTE_TEXT_COLORS = [
   },
 ];
 export const ZERO_WIDTH_SPACE = '\u200b';
+export const VegaRTEDefaultTextStyleItems = [
+  { key: 'title' },
+  { key: 'subtitle' },
+  { key: 'heading-1' },
+  { key: 'heading-2' },
+  { key: 'heading-3' },
+  { key: 'paragraph' },
+];
 export const VegaRTEPresetToolbarItems = [
   ['textStyles'],
   ['bold', 'italic', 'underline', 'strikethrough', 'code'],

package/dist/collection/components/vega-rich-text-editor/dto/nodes/text-node.js

@@ -245,6 +245,12 @@ export class RTETextNode extends RTENode {
    * @returns {string} HTML string from that depth onward.
    */
   renderHtmlFromDepth(depth, options) {
+    // At depth 0 this is, by contract, equivalent to `toHtml`. Delegate
+    // so derived classes that override `toHtml` (token, and future RTE
+    // extensions) emit their own markup instead of falling back to the
+    // base text rendering. See VD-9042.
+    if (depth === 0)
+      return this.toHtml(options);
     const annotation = this.getInlineHtmlAnnotationAtDepth(depth);
     if (!annotation)
       return this.renderTextStr(options);

package/dist/collection/components/vega-rich-text-editor/extensions/base-toolbar-button-renderer.js

@@ -110,6 +110,8 @@ export class VegaRTEToolbarButtonRenderer {
   }
   /**
    * Renders a common toolbar button with optional icon, label, and arrow icon.
+   * When a tooltip is provided via `buttonProps.tooltip`, the button is wrapped
+   * in a `vega-tooltip` element, matching the behavior of default toolbar buttons.
    *
    * @param {VegaRTECreateElementFunction} h - Create element function.
    * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
@@ -117,9 +119,9 @@ export class VegaRTEToolbarButtonRenderer {
    * @returns {VegaRTERenderResult} - The render result for the button.
    */
   renderButton(h, editorContext, buttonProps) {
-    const { icon, label, showArrowIcon } = buttonProps;
+    const { icon, label, showArrowIcon, tooltip } = buttonProps;
     const isDisabled = this.isDisabled(editorContext);
-    return h('vega-rich-text-editor-toolbar-button', {
+    const button = h('vega-rich-text-editor-toolbar-button', {
       disabled: isDisabled,
       icon: icon,
       hidden: this.isHidden(editorContext),
@@ -140,6 +142,10 @@ export class VegaRTEToolbarButtonRenderer {
         })
         : null,
     ].filter(isNonNullable));
+    if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.text) {
+      return h('vega-tooltip', { text: tooltip.text, placement: ['bottom', 'top'] }, [button]);
+    }
+    return button;
   }
   /**
    * Renders the button label.

package/dist/collection/components/vega-rich-text-editor/extensions/functions/renderers/function-toolbar-button-renderer.js

@@ -14,6 +14,7 @@ export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
       this.renderButton(h, editorContext, {
         label: 'Functions',
         showArrowIcon: true,
+        tooltip: { text: 'Insert function' },
       }),
       this.renderDropdownListTemplate(h, FunctionToolbarButtonRenderer.FUNCTION_LIST),
     ]);

package/dist/collection/components/vega-rich-text-editor/extensions/languages/language-toolbar-button-renderer.js

@@ -62,6 +62,7 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
       this.renderButton(createElement, editorContext, {
         label: this.getLanguageLabelByKey(this.selectedLanguage),
         showArrowIcon: true,
+        tooltip: { text: 'Select language' },
       }),
     ]);
   }

package/dist/collection/components/vega-rich-text-editor/extensions/table/table-toolbar-button-renderer.js

@@ -18,6 +18,7 @@ export class RTETableToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
     return createTablePopoverRenderer.render(h, super.renderButton(h, editorContext, {
       showArrowIcon: true,
       icon: 'rte-table',
+      tooltip: { text: 'Insert table' },
     }));
   }
   /**

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-toolbar-button-renderer.js

@@ -20,7 +20,11 @@ export class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
    */
   render(createElement, editorContext) {
     return this.renderDropdown(createElement, editorContext, {}, [
-      this.renderButton(createElement, editorContext, { label: 'Tokens', showArrowIcon: true }),
+      this.renderButton(createElement, editorContext, {
+        label: 'Tokens',
+        showArrowIcon: true,
+        tooltip: { text: 'Insert token' },
+      }),
       this.renderDropdownListTemplate(createElement, this.tokenList),
     ]);
   }

package/dist/collection/components/vega-rich-text-editor/public-api.js

@@ -43,6 +43,6 @@ export { ElementToDTOStrategy } from './slimmers/controllers/helper/element-to-d
 export { BlockToRTEBlockStrategyAbstract } from './slimmers/controllers/helper/element-to-dto-strategy/block-to-rte-block-strategy.abstract';
 export { htmlElementToAnnotationGenerator };
 // preset toolbar buttons
-export { VegaRTEPresetToolbarItems } from './constants/constant';
+export { VegaRTEDefaultTextStyleItems, VegaRTEPresetToolbarItems } from './constants/constant';
 // filter styles strategy
 export { RTEFilterStylesStrategy } from './dto/filter-styles-strategies/filter-styles-strategy.abstract';

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.js

@@ -47,7 +47,7 @@ import { CodeBlockToolbarButtonSlimmer } from './slimmers/renderers/tools/code-b
 import { InternalCodeBlockSelectionController } from './slimmers/controllers/internal-code-block-selection-controller';
 import { SourceEditToolbarButtonSlimmer } from './slimmers/renderers/tools/source-edit-toolbar-button-slimmer';
 import { RTEExtensionController } from './slimmers/controllers/extension-controller';
-import { VegaRTEPresetToolbarItems } from './constants/constant';
+import { VegaRTEDefaultTextStyleItems, VegaRTEPresetToolbarItems } from './constants/constant';
 import { VegaRichTextEditorSourceViewRenderer } from './slimmers/renderers/vega-rich-text-editor-source-view-renderer';
 /**
  * @vegaVersion 2.34.0
@@ -216,14 +216,7 @@ export class VegaRichTextEditor {
      * @vegaVersion 2.83.0
      * @defaultValue [{ key: 'title' }, { key: 'subtitle' }, { key: 'heading-1' }, { key: 'heading-2' }, { key: 'heading-3' }, { key: 'paragraph' }]
      */
-    this.textStyleItems = [
-      { key: 'title' },
-      { key: 'subtitle' },
-      { key: 'heading-1' },
-      { key: 'heading-2' },
-      { key: 'heading-3' },
-      { key: 'paragraph' },
-    ];
+    this.textStyleItems = VegaRTEDefaultTextStyleItems;
     /**
      * Specifies the configuration for the rich text editor extensions.
      *
@@ -577,7 +570,7 @@ export class VegaRichTextEditor {
           }],
         "text": "Specifies which text style items appear in the Text Styles toolbar dropdown.\n\nUse this to control which heading levels and text styles are available to users.\nFor example, omit `{ key: 'heading-1' }` to prevent users from applying H1\n(which is typically reserved for the page title).\n\nItems are displayed in a fixed internal order regardless of the order in this array."
       },
-      "defaultValue": "[\n\t\t{ key: 'title' },\n\t\t{ key: 'subtitle' },\n\t\t{ key: 'heading-1' },\n\t\t{ key: 'heading-2' },\n\t\t{ key: 'heading-3' },\n\t\t{ key: 'paragraph' },\n\t]"
+      "defaultValue": "VegaRTEDefaultTextStyleItems"
     },
     "extensions": {
       "type": "unknown",

package/dist/collection/components/vega-selection-tile/slimmers/renderers/vega-selection-tile-renderer.js

@@ -6,25 +6,83 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 export class VegaSelectionTileRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Activation handler invoked from the host's `@Listen('click')` listener
+     * (registered on the host element itself). The host carries
+     * `role="radio"`/`"checkbox"`, `tabindex`, and the activation listeners,
+     * so this is the only interactive node per tile. VoiceOver's VO+Space
+     * dispatches a synthetic click on the focused host, which reaches this
+     * function through `VegaSelectionTile.onHostClick()`.
+     */
+    this.activate = () => {
+      if (this.disabled) {
+        return;
+      }
+      if (!(this.selectType === 'radio' && this.checked)) {
+        this.checkedController.onCheck(!this.checked);
+      }
+    };
+    this.handleTileKeydown = (event) => {
+      if (this.disabled) {
+        return;
+      }
+      // eslint-disable-next-line spellcheck/spell-checker
+      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+        event.preventDefault();
+        this.activate();
+      }
+    };
+  }
   getSelectorContainerRef() {
     return this.selectorContainerRef;
   }
+  // Accessible name for the host's `aria-label`. Public because the
+  // component renders the host and needs to call this to compute the
+  // host's `aria-label` value (see `VegaSelectionTile.render`).
+  //
+  // Fallback chain: titleText (+ note) → trimmed host light-DOM text
+  // (covers `content`/`prefix` slots) → `value`. `note` is appended so
+  // VoiceOver announces both the title and the supporting line
+  // (e.g. "Basic Plan, $9 / month") when traversing tiles with VO+→/VO+←;
+  // the visual subtree is `aria-hidden`, so without this the note would
+  // never reach the accessibility tree.
+  //
+  // The parent group's label is intentionally NOT prepended here: the
+  // group renderer exposes its label as an independently focusable AT
+  // stop, so duplicating it on every tile would make AT users hear the
+  // group label N+1 times.
+  getAccessibleName() {
+    if (this.titleText) {
+      return this.note ? `${this.titleText}, ${this.note}` : this.titleText;
+    }
+    // Prefer `innerText` so adjacent inline/block elements are separated
+    // by whitespace (e.g. `<div>Pro Plan<span>Popular</span></div>` reads
+    // as "Pro Plan Popular" instead of "Pro PlanPopular" from raw
+    // `textContent` concatenation). Fall back to `textContent` for
+    // environments (e.g. jsdom) that do not implement `innerText`, and
+    // to `''` to satisfy the `string | null` type of `textContent`.
+    const raw = this.host.innerText || this.host.textContent || '';
+    const slotText = raw.replace(/\s+/g, ' ').trim();
+    return slotText || this.value || '';
+  }
   render() {
+    // ARIA semantics (role/aria-*), focus (tabindex), and activation
+    // handlers live on the COMPONENT HOST (see `VegaSelectionTile.render`
+    // and the `@Listen('click')`/`@Listen('keydown')` methods on the
+    // component class), not on this inner element. Keeping role + tabindex
+    // off this element is what prevents Firefox/VoiceOver from triple-
+    // announcing each tile (host group wrapper + inner role=radio + host
+    // close). This element is now purely a layout/styling wrapper.
     return (h("vega-flex", { "align-items": "start", "justify-content": "start", gap: "size-16", class: {
         'selection-tile': true,
         'disabled': this.disabled,
         'checked': this.checked,
         'error': this.showError,
-      }, "aria-label": this.titleText || 'No label defined', tabIndex: this.disabled ? -1 : 0, 
-      /* eslint-disable-next-line react/jsx-no-bind */
-      onClick: () => {
-        if (!(this.selectType === 'radio' && this.checked)) {
-          this.checkedController.onCheck(!this.checked);
-        }
-      }, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("div", { class: "vega-flex-grow" }, this.renderContent()),
+      } },
+      h("div", { class: "vega-flex-grow", "aria-hidden": "true" }, this.renderContent()),
       this.renderSelect()));
   }
   renderContent() {
@@ -51,7 +109,7 @@ export class VegaSelectionTileRenderer extends VegaSlimmer {
       this.note && h("div", { class: "selection-tile-note" }, this.note)));
   }
   renderSelect() {
-    return (h("vega-flex", { "align-items": "start", class: "vega-flex-shrink-0 selection-tile-select", ref: (ref) => (this.selectorContainerRef = ref) }, this.selectType === 'checkbox' ? this.renderCheckbox() : this.renderRadio()));
+    return (h("vega-flex", Object.assign({ "align-items": "start", class: "vega-flex-shrink-0 selection-tile-select", "aria-hidden": "true" }, { inert: true }, { ref: (ref) => (this.selectorContainerRef = ref) }), this.selectType === 'checkbox' ? this.renderCheckbox() : this.renderRadio()));
   }
   renderCheckbox() {
     return h("vega-checkbox", { size: "small", disabled: this.disabled, checked: this.checked });
@@ -90,6 +148,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileRenderer.prototype, "showError", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSelectionTileRenderer.prototype, "value", void 0);
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileRenderer.prototype, "checkedController", void 0);

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

@@ -17,16 +17,37 @@ export class VegaSelectionTileGroupRenderer extends VegaSlimmer {
       this.renderHint()));
   }
   renderLabel() {
-    return (this.label && (h("div", { class: "vega-label" },
-      h("label", { "aria-label": this.label },
-        this.label,
-        this.renderRequire()))));
+    return (this.label && (
+    // The label is exposed as its own focusable VoiceOver stop:
+    // `tabindex="0"` puts it in the tab / VO swipe order, and
+    // `aria-label` provides a clean accessible name that includes
+    // "required" as a spoken word.
+    //
+    // The visible text + asterisk are wrapped in an
+    // `aria-hidden="true"` span so VoiceOver does not descend into
+    // the children and create extra swipe stops on the raw text
+    // or the decorative "*" — the `aria-label` above is the
+    // single thing AT users hear for this stop.
+    h("div", { class: "vega-label" },
+      h("span", { 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabindex: 0, "aria-label": this.required ? `${this.label} (required)` : this.label },
+        h("span", { "aria-hidden": "true" },
+          this.label,
+          this.renderRequire())))));
   }
   renderRequire() {
-    return this.required && h("span", { class: "vega-require" }, "*");
+    return (this.required && (h("span", { class: "vega-require", "aria-hidden": "true" }, "*")));
   }
   renderContainer() {
-    return (h("div", { class: "container", ref: (e) => (this.groupContainerRef = e) },
+    return (
+    // The container intentionally drops `role="radiogroup"`/`role="group"`
+    // (and the group-level `aria-*` attributes those roles would imply)
+    // so VoiceOver does not treat the container as a separate stop ahead
+    // of the first tile. The group label above is now the single AT
+    // stop that announces the group's purpose; child tiles are reached
+    // directly after it without a wrapper announcement.
+    h("div", { class: "container", ref: (e) => (this.groupContainerRef = e) },
       h("vega-flex", { direction: this.layout === 'horizontal' ? 'row' : 'col', gap: "size-12" },
         h("slot", { 
           /* eslint-disable-next-line react/jsx-no-bind */
@@ -39,8 +60,18 @@ export class VegaSelectionTileGroupRenderer extends VegaSlimmer {
           () => this.itemsController.syncTileArrayAndValue() }))));
   }
   renderHint() {
-    return (this.hint && (h("div", { class: "vega-hint" },
-      h("label", null, this.hint))));
+    return (this.hint && (
+    // Mirrors `renderLabel`: the hint is exposed as its own
+    // focusable VoiceOver stop after the tile list, so AT users
+    // can swipe to it and hear the supporting copy. The visible
+    // text is wrapped in an `aria-hidden` span so VO only speaks
+    // the `aria-label` once instead of also descending into the
+    // child text node.
+    h("div", { class: "vega-hint" },
+      h("span", { 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabindex: 0, "aria-label": this.hint },
+        h("span", { "aria-hidden": "true" }, this.hint)))));
   }
 }
 __decorate([
@@ -58,9 +89,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileGroupRenderer.prototype, "layout", void 0);
-__decorate([
-  MapToComponentField()
-], VegaSelectionTileGroupRenderer.prototype, "selectType", void 0);
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileGroupRenderer.prototype, "itemsController", void 0);

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

@@ -55,6 +55,7 @@
   line-height: 22px;
   letter-spacing: 0px;
   margin-bottom: 16px;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   :host .vega-label {
@@ -83,9 +84,6 @@
     letter-spacing: 0px;
   }
 }
-:host .vega-label label {
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-}
 :host .vega-label .vega-require {
   color: rgba(var(--v-text-error, 189, 41, 71, 1));
   margin-left: 4px;