@heartlandone/vega 2.85.0 → 2.87.0-beta.1

package/dist/cjs/vega-selection-tile_2.cjs.entry.js

@@ -5,31 +5,30 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-58ea899e.js');
 const component = require('./component-1e352960.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
-const accessibility = require('./accessibility-a5ef2038.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-80e1c8ca.js');
-const vegaEventId = require('./vega-event-id-d9994eb3.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-73c42d7e.js');
+const vegaEventId = require('./vega-event-id-f95480b7.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
-const subStateObserverSlimmer = require('./sub-state-observer-slimmer-b8f6f27b.js');
-const vegaInternalEventId = require('./vega-internal-event-id-87014e4f.js');
-const ui = require('./ui-ae4ee13d.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-aa93ab4f.js');
+const vegaInternalEventId = require('./vega-internal-event-id-e138d4d6.js');
+const ui = require('./ui-3727d685.js');
 const observer = require('./observer-f49483e8.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-f3979a03.js');
-const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-2631c381.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-b33171b0.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-a07e3de0.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-b7498e5a.js');
+const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-34a606b3.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-757e3a76.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-44091874.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-vega-event-manager-7e0d966d.js');
+require('./internal-vega-event-manager-063c17cb.js');
 require('./try-get-document-c0ebd39a.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-9129ef52.js');
-require('./index-f054eb5d.js');
+require('./feature-flag-controller-5fa21654.js');
+require('./index-3ca118c4.js');
 require('./string-39438062.js');
 require('./misc-3d30df91.js');
-require('./internal-translation-controller-8360a89c.js');
+require('./internal-translation-controller-f0da24b2.js');
 require('./index-592b4052.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
 require('./breakpoints-1cc2c4c6.js');
@@ -48,23 +47,82 @@ var __decorate$8 = (undefined && undefined.__decorate) || function (decorators,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 class VegaSelectionTileRenderer extends globalSlimmerRegistry.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 (index.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: accessibility.createEnterKeyHandlerToTriggerClick() },
-      index.h("div", { class: "vega-flex-grow" }, this.renderContent()),
+      } },
+      index.h("div", { class: "vega-flex-grow", "aria-hidden": "true" }, this.renderContent()),
       this.renderSelect()));
   }
   renderContent() {
@@ -91,7 +149,7 @@ class VegaSelectionTileRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.note && index.h("div", { class: "selection-tile-note" }, this.note)));
   }
   renderSelect() {
-    return (index.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 (index.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 index.h("vega-checkbox", { size: "small", disabled: this.disabled, checked: this.checked });
@@ -130,6 +188,9 @@ __decorate$8([
 __decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaSelectionTileRenderer.prototype, "showError", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaSelectionTileRenderer.prototype, "value", void 0);
 __decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaSelectionTileRenderer.prototype, "checkedController", void 0);
@@ -322,7 +383,7 @@ __decorate$5([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaSelectionTileShowErrorController.prototype, "disconnectedCallback", null);
 
-const vegaSelectionTileCss = ":host::not(.distribute-evenly){display:block}:host(.distribute-evenly){display:flex;width:100%}:host(.distribute-evenly) .selection-tile{flex:1}:host{display:block}:host .selection-tile{padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;background-color:rgba(var(--v-bg-tile, 252, 252, 252, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));cursor:pointer;margin:1px}:host .selection-tile:not(.disabled):hover{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));margin:0px}:host .selection-tile:not(.disabled).checked:hover{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))}:host .selection-tile:not(.disabled).error:hover{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));pointer-events:none}:host .selection-tile.disabled .selection-tile-title,:host .selection-tile.disabled .selection-tile-note{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}:host .selection-tile .selection-tile-title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .selection-tile .selection-tile-title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .selection-tile .selection-tile-title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .selection-tile .selection-tile-title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .selection-tile .selection-tile-note{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .selection-tile .selection-tile-note{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .selection-tile .selection-tile-note{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .selection-tile .selection-tile-note{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .selection-tile .selection-tile-icon{margin-top:4px;margin-bottom:4px}:host .selection-tile .selection-tile-select{height:24px}:host .selection-tile .selection-tile-select vega-checkbox,:host .selection-tile .selection-tile-select vega-radio{margin-top:4px}";
+const vegaSelectionTileCss = ":host::not(.distribute-evenly){display:block}:host(.distribute-evenly){display:flex;width:100%}:host(.distribute-evenly) .selection-tile{flex:1}:host{display:block}:host .selection-tile{padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;background-color:rgba(var(--v-bg-tile, 252, 252, 252, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));cursor:pointer;margin:1px}:host .selection-tile:not(.disabled):hover{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).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));margin:0px}:host .selection-tile:not(.disabled).checked:hover{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).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))}:host .selection-tile:not(.disabled).error:hover{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.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));pointer-events:none}:host .selection-tile.disabled .selection-tile-title,:host .selection-tile.disabled .selection-tile-note{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}:host .selection-tile .selection-tile-title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .selection-tile .selection-tile-title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .selection-tile .selection-tile-title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .selection-tile .selection-tile-title{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .selection-tile .selection-tile-note{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .selection-tile .selection-tile-note{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .selection-tile .selection-tile-note{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .selection-tile .selection-tile-note{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .selection-tile .selection-tile-icon{margin-top:4px;margin-bottom:4px}:host .selection-tile .selection-tile-select{height:24px}: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}";
 
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -387,9 +448,53 @@ const VegaSelectionTile = class {
      */
     /* 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 component.sanitizeVegaComponent(index.h(index.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 component.sanitizeVegaComponent(index.h(index.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);
   }
   get host() { return index.getElement(this); }
 };
@@ -442,16 +547,37 @@ class VegaSelectionTileGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.renderHint()));
   }
   renderLabel() {
-    return (this.label && (index.h("div", { class: "vega-label" },
-      index.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.
+    index.h("div", { class: "vega-label" },
+      index.h("span", { 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabindex: 0, "aria-label": this.required ? `${this.label} (required)` : this.label },
+        index.h("span", { "aria-hidden": "true" },
+          this.label,
+          this.renderRequire())))));
   }
   renderRequire() {
-    return this.required && index.h("span", { class: "vega-require" }, "*");
+    return (this.required && (index.h("span", { class: "vega-require", "aria-hidden": "true" }, "*")));
   }
   renderContainer() {
-    return (index.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.
+    index.h("div", { class: "container", ref: (e) => (this.groupContainerRef = e) },
       index.h("vega-flex", { direction: this.layout === 'horizontal' ? 'row' : 'col', gap: "size-12" },
         index.h("slot", { 
           /* eslint-disable-next-line react/jsx-no-bind */
@@ -464,8 +590,18 @@ class VegaSelectionTileGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
           () => this.itemsController.syncTileArrayAndValue() }))));
   }
   renderHint() {
-    return (this.hint && (index.h("div", { class: "vega-hint" },
-      index.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.
+    index.h("div", { class: "vega-hint" },
+      index.h("span", { 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabindex: 0, "aria-label": this.hint },
+        index.h("span", { "aria-hidden": "true" }, this.hint)))));
   }
 }
 __decorate$3([
@@ -483,9 +619,6 @@ __decorate$3([
 __decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaSelectionTileGroupRenderer.prototype, "layout", void 0);
-__decorate$3([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaSelectionTileGroupRenderer.prototype, "selectType", void 0);
 __decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaSelectionTileGroupRenderer.prototype, "itemsController", void 0);
@@ -661,7 +794,7 @@ __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaSelectionTileGroupItemsController.prototype, "initSelectionTileArray", null);
 
-const vegaSelectionTileGroupCss = ":host{display:block;text-align:left;line-height:normal}:host .vega-error{display:block;margin-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}:host .vega-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;margin-bottom:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;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}:host .vega-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}";
+const vegaSelectionTileGroupCss = ":host{display:block;text-align:left;line-height:normal}:host .vega-error{display:block;margin-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}:host .vega-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;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{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-label .vega-require{color:rgba(var(--v-text-error, 189, 41, 71, 1));margin-left:4px}:host .vega-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/cjs/vega-sidenav_3.cjs.entry.js

@@ -7,37 +7,37 @@ const array = require('./array-249289f2.js');
 const component = require('./component-1e352960.js');
 const misc = require('./misc-3d30df91.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
-const accessibility = require('./accessibility-a5ef2038.js');
-const internalIconManager = require('./internal-icon-manager-c989189a.js');
-const iconManager = require('./icon-manager-c12c6ea9.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-b33171b0.js');
+const accessibility = require('./accessibility-88f8af84.js');
+const internalIconManager = require('./internal-icon-manager-66c48800.js');
+const iconManager = require('./icon-manager-e855446d.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-757e3a76.js');
 const effect = require('./effect-98e88068.js');
-const responsiveFormatFacade = require('./responsive-format-facade-5f6cd211.js');
+const responsiveFormatFacade = require('./responsive-format-facade-9647775d.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
-const vegaInternalEventId = require('./vega-internal-event-id-87014e4f.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-80e1c8ca.js');
-const vegaEventId = require('./vega-event-id-d9994eb3.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
+const vegaInternalEventId = require('./vega-internal-event-id-e138d4d6.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-73c42d7e.js');
+const vegaEventId = require('./vega-event-id-f95480b7.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const observer = require('./observer-f49483e8.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
-const subStateObserverSlimmer = require('./sub-state-observer-slimmer-b8f6f27b.js');
-const ui = require('./ui-ae4ee13d.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-7e0d966d.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-aa93ab4f.js');
+const ui = require('./ui-3727d685.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-063c17cb.js');
 require('./number-4816603d.js');
 require('./ui-32120990.js');
 require('./breakpoints-ebde4837.js');
-require('./create-public-api-runtime-metrics-slimmer-9cb09fb2.js');
+require('./create-public-api-runtime-metrics-slimmer-122350c3.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./type-guard-2e97fc56.js');
+require('./type-guard-c1195e50.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-8360a89c.js');
+require('./internal-translation-controller-f0da24b2.js');
 require('./pixel-98f2a10c.js');
-require('./feature-flag-controller-9129ef52.js');
-require('./index-f054eb5d.js');
+require('./feature-flag-controller-5fa21654.js');
+require('./index-3ca118c4.js');
 require('./try-get-document-c0ebd39a.js');
 
 var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/cjs/vega-signature-capture.cjs.entry.js

@@ -4,48 +4,48 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
-const internalIconManager = require('./internal-icon-manager-c989189a.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
+const internalIconManager = require('./internal-icon-manager-66c48800.js');
 const component = require('./component-1e352960.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
-const vegaEventId = require('./vega-event-id-d9994eb3.js');
-const designToken = require('./design-token-4b3509dd.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
+const vegaEventId = require('./vega-event-id-f95480b7.js');
+const designToken = require('./design-token-3bc36220.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const object = require('./object-b53e9416.js');
 const index$1 = require('./index-592b4052.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-80e1c8ca.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-a07e3de0.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-73c42d7e.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-44091874.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
-const translationSlimmer = require('./translation-slimmer-3cd7d3b2.js');
-require('./icon-manager-c12c6ea9.js');
-require('./create-public-api-runtime-metrics-slimmer-9cb09fb2.js');
+const translationSlimmer = require('./translation-slimmer-a4a7f0eb.js');
+require('./icon-manager-e855446d.js');
+require('./create-public-api-runtime-metrics-slimmer-122350c3.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./misc-3d30df91.js');
 require('./observer-f49483e8.js');
-require('./ui-ae4ee13d.js');
-require('./type-guard-2e97fc56.js');
+require('./ui-3727d685.js');
+require('./type-guard-c1195e50.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-8360a89c.js');
-require('./responsive-format-facade-5f6cd211.js');
+require('./internal-translation-controller-f0da24b2.js');
+require('./responsive-format-facade-9647775d.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
-require('./feature-flag-controller-9129ef52.js');
-require('./index-f054eb5d.js');
-require('./state-border-formatter-d1c80c1d.js');
+require('./feature-flag-controller-5fa21654.js');
+require('./index-3ca118c4.js');
+require('./state-border-formatter-1a483a9b.js');
 require('./try-get-document-c0ebd39a.js');
-require('./internal-vega-event-manager-7e0d966d.js');
+require('./internal-vega-event-manager-063c17cb.js');
 require('./string-39438062.js');
-require('./vega-internal-event-id-87014e4f.js');
+require('./vega-internal-event-id-e138d4d6.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
-require('./sub-state-observer-slimmer-b8f6f27b.js');
+require('./sub-state-observer-slimmer-aa93ab4f.js');
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/cjs/vega-skeleton.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const component = require('./component-1e352960.js');
 const pixel = require('./pixel-98f2a10c.js');
 

package/dist/cjs/vega-slot-container.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 
 const vegaSlotContainerCss = ":host{display:contents}";
 

package/dist/cjs/vega-stepper.cjs.entry.js

@@ -7,22 +7,22 @@ const minNumberRule = require('./min-number-rule-dc555309.js');
 const component = require('./component-1e352960.js');
 const number = require('./number-4816603d.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-a07e3de0.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-f3979a03.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
-const vegaEventId = require('./vega-event-id-d9994eb3.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-44091874.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-b7498e5a.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
+const vegaEventId = require('./vega-event-id-f95480b7.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-80e1c8ca.js');
-const ui = require('./ui-ae4ee13d.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-73c42d7e.js');
+const ui = require('./ui-3727d685.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./string-39438062.js');
 require('./observer-f49483e8.js');
 require('./misc-3d30df91.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./vega-internal-event-id-87014e4f.js');
-require('./internal-translation-controller-8360a89c.js');
+require('./vega-internal-event-id-e138d4d6.js');
+require('./internal-translation-controller-f0da24b2.js');
 require('./index-592b4052.js');
 require('./try-get-document-c0ebd39a.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
@@ -32,11 +32,11 @@ require('./breakpoints-ebde4837.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
-require('./sub-state-observer-slimmer-b8f6f27b.js');
-require('./internal-vega-event-manager-7e0d966d.js');
+require('./sub-state-observer-slimmer-aa93ab4f.js');
+require('./internal-vega-event-manager-063c17cb.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-9129ef52.js');
-require('./index-f054eb5d.js');
+require('./feature-flag-controller-5fa21654.js');
+require('./index-3ca118c4.js');
 
 const VegaStepperRuntimeMetricsPayloadDefinition = [
   {