@heartlandone/vega 2.85.0 → 2.86.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-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/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-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;

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

@@ -34,12 +34,6 @@
   border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
   background-color: rgba(var(--v-bg-tile-hover, 245, 247, 247, 1));
 }
-:host .selection-tile:not(.disabled):focus-visible {
-  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
-  background-color: rgba(var(--v-bg-tile, 252, 252, 252, 1));
-  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
-}
 :host .selection-tile:not(.disabled).checked {
   background-color: rgba(var(--v-bg-tile-selected, 242, 247, 255, 1));
   border: 2px solid rgba(var(--v-border-tile-selected, 19, 98, 226, 1));
@@ -49,12 +43,6 @@
   border: 2px solid rgba(var(--v-border-tile-selected-hover, 4, 112, 236, 1));
   background-color: rgba(var(--v-bg-tile-selected-hover, 229, 239, 255, 1));
 }
-:host .selection-tile:not(.disabled).checked:focus-visible {
-  border: 2px solid rgba(var(--v-border-tile-selected, 19, 98, 226, 1));
-  background-color: rgba(var(--v-bg-tile-selected, 242, 247, 255, 1));
-  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
-}
 :host .selection-tile:not(.disabled).error {
   border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
   background-color: rgba(var(--v-bg-tile, 252, 252, 252, 1));
@@ -63,12 +51,6 @@
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
   background-color: rgba(var(--v-bg-tile-hover, 245, 247, 247, 1));
 }
-:host .selection-tile:not(.disabled).error:focus-visible {
-  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
-  background-color: rgba(var(--v-bg-tile, 252, 252, 252, 1));
-  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
-  outline-offset: 2px;
-}
 :host .selection-tile.disabled {
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
@@ -158,4 +140,27 @@
 :host .selection-tile .selection-tile-select vega-checkbox,
 :host .selection-tile .selection-tile-select vega-radio {
   margin-top: 4px;
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+
+:host(:focus-visible:not([aria-disabled=true])) .selection-tile {
+  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
+  background-color: rgba(var(--v-bg-tile, 252, 252, 252, 1));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+}
+:host(:focus-visible:not([aria-disabled=true])) .selection-tile.checked {
+  border: 2px solid rgba(var(--v-border-tile-selected, 19, 98, 226, 1));
+  background-color: rgba(var(--v-bg-tile-selected, 242, 247, 255, 1));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+}
+:host(:focus-visible:not([aria-disabled=true])) .selection-tile.error {
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+  background-color: rgba(var(--v-bg-tile, 252, 252, 252, 1));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
 }

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

@@ -70,9 +70,53 @@ export class VegaSelectionTile {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.selectType = 'radio';
+    // Host-level activation listeners are attached via vDOM listeners
+    // (`onClick` / `onKeyDown` on the `<Host>` element below). Stencil's
+    // vDOM listeners use `addEventListener` under the hood, NOT the
+    // `onclick`/`onkeydown` IDL properties, so:
+    //   1. A consumer doing `tileEl.onclick = fn` cannot overwrite or
+    //      remove our listener.
+    //   2. A consumer attaching their own `addEventListener('click', ...)`
+    //      coexists with ours and fires alongside it (DOM event spec).
+    // So consumer code can observe / augment activation but cannot silently
+    // break it. Only `event.stopImmediatePropagation()` in a handler that
+    // runs before ours would suppress it -- an explicit opt-out, not a
+    // surprise override.
+    this.onHostClick = () => {
+      this.renderer.activate();
+    };
+    this.onHostKeyDown = (event) => {
+      this.renderer.handleTileKeydown(event);
+    };
   }
   render() {
-    return sanitizeVegaComponent(h(Host, { class: { 'distribute-evenly': this.distributeEvenly } }, this.renderer.render()), this.host);
+    // ARIA semantics, focus, and activation handlers ALL live on the host.
+    //
+    // Why not `role="presentation"` on the host + role on an inner shadow
+    // element? Per ARIA 1.2, `role="presentation"`/`role="none"` is dropped
+    // ("presentation conflict resolution") whenever the element has any
+    // focusable descendants in the flat tree. Putting `tabindex="0"` on an
+    // inner shadow element therefore demotes the host's presentation role,
+    // and Firefox -- which enforces this rule strictly -- exposes the host
+    // as a generic/group wrapper around the inner radio. VoiceOver then
+    // triple-announces each tile:
+    //   1. "<title>, group"               (host wrapper)
+    //   2. "<title>, <note>, radio button" (inner role=radio)
+    //   3. "end of <title>, group"        (host wrapper close)
+    // Safari/Chrome happen to flatten the host out, masking the bug.
+    // Collapsing role + tabindex + aria-* onto the host eliminates the
+    // wrapper entirely -- the host *is* the radio/checkbox.
+    //
+    // NOTE on the `title` HTML attribute: `@Prop({ attribute: 'title' })
+    // titleText` observes the `title` attribute, so we deliberately do
+    // NOT pass `title={null}` to the Host -- doing so would strip the
+    // attribute at render time, which would then trigger Stencil's
+    // attribute observer and wipe `titleText` itself. The HTML `title`
+    // attribute stays on the host as a harmless tooltip; the explicit
+    // `aria-label` we emit takes precedence as the accessible name per
+    // the W3C accessible name computation, so VoiceOver/NVDA announce
+    // `aria-label` (which folds in the note line), not the tooltip text.
+    return sanitizeVegaComponent(h(Host, { role: this.selectType === 'checkbox' ? 'checkbox' : 'radio', "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.renderer.getAccessibleName() || undefined, tabindex: this.disabled ? -1 : 0, class: { 'distribute-evenly': this.distributeEvenly }, onClick: this.onHostClick, onKeyDown: this.onHostKeyDown }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-selection-tile"; }
   static get encapsulation() { return "shadow"; }

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

@@ -173,17 +173,11 @@ export class VegaTimePicker {
      * Controls whether a clear (✕) icon button is displayed inside the time
      * picker input when the field has a non-empty value.
      *
-     * When `true`, clicking the clear icon resets the time picker value to an
-     * empty value (or `['', '']` in `range` mode) and emits a `vegaChange`
-     * event. Set to `false` to hide the clear icon (e.g., for time pickers
-     * where clearing is not desired).
-     *
-     * The clear icon is also hidden when the component is `disabled`.
-     *
-     * When the component is `readOnly`, the clear icon remains visible by
-     * design: read-only only suppresses manual keyboard text entry, while
-     * users can still update the value via the dropdown UI, so clearing the
-     * selected value is still a valid interaction.
+     * When `true`, clicking the clear icon resets the value (or `['', '']` in `range` mode) and emits a `vegaChange` event.
+     * Set to `false` to hide the icon. The clear icon is always hidden when `disabled`.
+     * When `readOnly`, the clear icon remains visible — read-only suppresses manual keyboard
+     * entry but the value can still be updated via the dropdown, so clearing
+     * remains a valid interaction.
      *
      * @default true
      * @vegaVersion 2.84.0
@@ -529,7 +523,7 @@ export class VegaTimePicker {
             "name": "vegaVersion",
             "text": "2.84.0"
           }],
-        "text": "Controls whether a clear (\u2715) icon button is displayed inside the time\npicker input when the field has a non-empty value.\n\nWhen `true`, clicking the clear icon resets the time picker value to an\nempty value (or `['', '']` in `range` mode) and emits a `vegaChange`\nevent. Set to `false` to hide the clear icon (e.g., for time pickers\nwhere clearing is not desired).\n\nThe clear icon is also hidden when the component is `disabled`.\n\nWhen the component is `readOnly`, the clear icon remains visible by\ndesign: read-only only suppresses manual keyboard text entry, while\nusers can still update the value via the dropdown UI, so clearing the\nselected value is still a valid interaction."
+        "text": "Controls whether a clear (\u2715) icon button is displayed inside the time\npicker input when the field has a non-empty value.\n\nWhen `true`, clicking the clear icon resets the value (or `['', '']` in `range` mode) and emits a `vegaChange` event.\nSet to `false` to hide the icon. The clear icon is always hidden when `disabled`.\nWhen `readOnly`, the clear icon remains visible \u2014 read-only suppresses manual keyboard\nentry but the value can still be updated via the dropdown, so clearing\nremains a valid interaction."
       },
       "attribute": "show-clear-icon",
       "reflect": false,