@vonage/vivid 4.30.1 → 5.0.0

package/shared/definition26.cjs

@@ -13,7 +13,7 @@ const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}.control:hover .upload-text,.control.dz-drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:hover,.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.dz-drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}.control:active .upload-icon{transform:scale(1.05)}.control.dz-drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2311,6 +2311,7 @@ class FilePicker extends mixins.WithFeedback(
     const previewList = this.shadowRoot.querySelector(
       ".preview-list"
     );
+    this.#setupDragEventHandlers(control);
     this.#dropzone = new $3ed269f2f0fb224b$export$2e2bcd8739ae039(control, {
       url: "/",
       // dummy url, we do not use dropzone's upload functionality
@@ -2338,6 +2339,34 @@ class FilePicker extends mixins.WithFeedback(
     });
     this.#syncSingleFileState();
   }
+  /**
+   * Sets up drag event handlers for enhanced visual feedback
+   * @private
+   */
+  #setupDragEventHandlers(control) {
+    control.addEventListener("dragenter", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      control.classList.add("dz-drag-hover");
+    });
+    control.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      control.classList.add("dz-drag-hover");
+    });
+    control.addEventListener("dragleave", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!control.contains(e.relatedTarget)) {
+        control.classList.remove("dz-drag-hover");
+      }
+    });
+    control.addEventListener("drop", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      control.classList.remove("dz-drag-hover");
+    });
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#dropzone.destroy();
@@ -2486,7 +2515,13 @@ const FilePickerTemplate = (context) => {
     role: "button"
   })}
 				>
-					<slot class="main"></slot>
+					<vwc-icon
+						class="upload-icon"
+						name="cloud-upload-line"
+						size="-4"
+						label="${(x) => x.locale.filePicker.uploadFilesLabel}"
+					></vwc-icon>
+					<span class="upload-text"><slot></slot></span>
 				</div>
 				${(x) => x._getFeedbackTemplate(context)}
 			</div>

package/shared/definition26.js

@@ -11,7 +11,7 @@ import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}.control:hover .upload-text,.control.dz-drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:hover,.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.dz-drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}.control:active .upload-icon{transform:scale(1.05)}.control.dz-drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2309,6 +2309,7 @@ class FilePicker extends WithFeedback(
     const previewList = this.shadowRoot.querySelector(
       ".preview-list"
     );
+    this.#setupDragEventHandlers(control);
     this.#dropzone = new $3ed269f2f0fb224b$export$2e2bcd8739ae039(control, {
       url: "/",
       // dummy url, we do not use dropzone's upload functionality
@@ -2336,6 +2337,34 @@ class FilePicker extends WithFeedback(
     });
     this.#syncSingleFileState();
   }
+  /**
+   * Sets up drag event handlers for enhanced visual feedback
+   * @private
+   */
+  #setupDragEventHandlers(control) {
+    control.addEventListener("dragenter", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      control.classList.add("dz-drag-hover");
+    });
+    control.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      control.classList.add("dz-drag-hover");
+    });
+    control.addEventListener("dragleave", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!control.contains(e.relatedTarget)) {
+        control.classList.remove("dz-drag-hover");
+      }
+    });
+    control.addEventListener("drop", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      control.classList.remove("dz-drag-hover");
+    });
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#dropzone.destroy();
@@ -2484,7 +2513,13 @@ const FilePickerTemplate = (context) => {
     role: "button"
   })}
 				>
-					<slot class="main"></slot>
+					<vwc-icon
+						class="upload-icon"
+						name="cloud-upload-line"
+						size="-4"
+						label="${(x) => x.locale.filePicker.uploadFilesLabel}"
+					></vwc-icon>
+					<span class="upload-text"><slot></slot></span>
 				</div>
 				${(x) => x._getFeedbackTemplate(context)}
 			</div>

package/shared/definition30.cjs

@@ -30,7 +30,14 @@ var __decorateClass = (decorators, target, key, kind) => {
 class MenuItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.VividElement)) {
   constructor() {
     super();
-    // eslint-disable-next-line @repo/repo/no-attribute-default-value
+    /**
+     * The role of the element.
+     *
+     * @deprecated Use `control-type` instead for checkbox and radio items. If the menu item is not a direct descendant of a menu, role will default to `presentation`.
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
     this.role = MenuItemRole.menuitem;
     this.checked = false;
     /**
@@ -223,9 +230,6 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ mode: "boolean" })
 ], MenuItem.prototype, "expanded");
-__decorateClass([
-  vividElement.attr
-], MenuItem.prototype, "role");
 __decorateClass([
   vividElement.observable
 ], MenuItem.prototype, "_isPresentational");

package/shared/definition30.js

@@ -28,7 +28,14 @@ var __decorateClass = (decorators, target, key, kind) => {
 class MenuItem extends HostSemantics(AffixIcon(VividElement)) {
   constructor() {
     super();
-    // eslint-disable-next-line @repo/repo/no-attribute-default-value
+    /**
+     * The role of the element.
+     *
+     * @deprecated Use `control-type` instead for checkbox and radio items. If the menu item is not a direct descendant of a menu, role will default to `presentation`.
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
     this.role = MenuItemRole.menuitem;
     this.checked = false;
     /**
@@ -221,9 +228,6 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], MenuItem.prototype, "expanded");
-__decorateClass([
-  attr
-], MenuItem.prototype, "role");
 __decorateClass([
   observable
 ], MenuItem.prototype, "_isPresentational");

package/shared/definition31.cjs

@@ -211,7 +211,7 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
     }
   }
   get #triggerBehaviour() {
-    return this.trigger ?? "legacy";
+    return this.trigger ?? "auto";
   }
   openChanged(_, newValue) {
     if (newValue) {
@@ -232,19 +232,19 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
   #setupAnchor(a) {
     a.addEventListener("click", this.#onAnchorClick, true);
     a.addEventListener("focusout", this._onFocusout);
-    a.setAttribute("aria-haspopup", "menu");
+    a.ariaHasPopup = "menu";
     this.#updateAnchor(a);
   }
   #updateAnchor(a) {
-    a.setAttribute("aria-expanded", this.open.toString());
-    a.setAttribute("data-expanded", this.open.toString());
+    a.ariaExpanded = this.open.toString();
+    a.dataset.expanded = this.open.toString();
   }
   #cleanupAnchor(a) {
     a.removeEventListener("click", this.#onAnchorClick, true);
     a.removeEventListener("focusout", this._onFocusout);
-    a.removeAttribute("aria-haspopup");
-    a.removeAttribute("aria-expanded");
-    a.removeAttribute("data-expanded");
+    a.ariaHasPopup = null;
+    a.ariaExpanded = null;
+    delete a.dataset.expanded;
   }
   #onAnchorClick;
   /**

package/shared/definition31.js

@@ -209,7 +209,7 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
     }
   }
   get #triggerBehaviour() {
-    return this.trigger ?? "legacy";
+    return this.trigger ?? "auto";
   }
   openChanged(_, newValue) {
     if (newValue) {
@@ -230,19 +230,19 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
   #setupAnchor(a) {
     a.addEventListener("click", this.#onAnchorClick, true);
     a.addEventListener("focusout", this._onFocusout);
-    a.setAttribute("aria-haspopup", "menu");
+    a.ariaHasPopup = "menu";
     this.#updateAnchor(a);
   }
   #updateAnchor(a) {
-    a.setAttribute("aria-expanded", this.open.toString());
-    a.setAttribute("data-expanded", this.open.toString());
+    a.ariaExpanded = this.open.toString();
+    a.dataset.expanded = this.open.toString();
   }
   #cleanupAnchor(a) {
     a.removeEventListener("click", this.#onAnchorClick, true);
     a.removeEventListener("focusout", this._onFocusout);
-    a.removeAttribute("aria-haspopup");
-    a.removeAttribute("aria-expanded");
-    a.removeAttribute("data-expanded");
+    a.ariaHasPopup = null;
+    a.ariaExpanded = null;
+    delete a.dataset.expanded;
   }
   #onAnchorClick;
   /**

package/shared/definition42.cjs

@@ -24,7 +24,6 @@ class Radio extends withErrorText.WithErrorText(
 ) {
   constructor() {
     super();
-    this.ariaLabel = null;
     /**
      * The element's value to be included in form submission when checked.
      * Default to "on" to reach parity with input[type="radio"]
@@ -177,9 +176,6 @@ class Radio extends withErrorText.WithErrorText(
     }
   }
 }
-__decorateClass([
-  vividElement.attr({ attribute: "aria-label" })
-], Radio.prototype, "ariaLabel");
 __decorateClass([
   vividElement.attr
 ], Radio.prototype, "connotation");

package/shared/definition42.js

@@ -22,7 +22,6 @@ class Radio extends WithErrorText(
 ) {
   constructor() {
     super();
-    this.ariaLabel = null;
     /**
      * The element's value to be included in form submission when checked.
      * Default to "on" to reach parity with input[type="radio"]
@@ -175,9 +174,6 @@ class Radio extends WithErrorText(
     }
   }
 }
-__decorateClass([
-  attr({ attribute: "aria-label" })
-], Radio.prototype, "ariaLabel");
 __decorateClass([
   attr
 ], Radio.prototype, "connotation");

package/shared/definition47.cjs

@@ -23,7 +23,6 @@ class SelectableBox extends delegatesAria.DelegatesAria(vividElement.VividElemen
   constructor() {
     super(...arguments);
     this.checked = false;
-    this.clickable = false;
     this.clickableBox = false;
     this.controlPlacement = "end-stacked";
     this.tight = false;
@@ -49,13 +48,6 @@ __decorateClass([
   vividElement.attr({ mode: "boolean" })
 ], SelectableBox.prototype, "checked");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], SelectableBox.prototype, "clickable");
-__decorateClass([
-  vividElement.replaces({
-    deprecatedPropertyName: "clickable",
-    fromDeprecated: (v) => v
-  }),
   vividElement.attr({ attribute: "clickable-box", mode: "boolean" })
 ], SelectableBox.prototype, "clickableBox");
 __decorateClass([

package/shared/definition47.js

@@ -1,6 +1,6 @@
 import { C as Checkbox, c as checkboxDefinition } from './definition15.js';
 import { R as Radio, r as radioDefinition } from './definition42.js';
-import { V as VividElement, a as attr, r as replaces, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { C as Connotation } from './enums.js';
 import { c as classNames } from './class-names.js';
@@ -21,7 +21,6 @@ class SelectableBox extends DelegatesAria(VividElement) {
   constructor() {
     super(...arguments);
     this.checked = false;
-    this.clickable = false;
     this.clickableBox = false;
     this.controlPlacement = "end-stacked";
     this.tight = false;
@@ -47,13 +46,6 @@ __decorateClass([
   attr({ mode: "boolean" })
 ], SelectableBox.prototype, "checked");
 __decorateClass([
-  attr({ mode: "boolean" })
-], SelectableBox.prototype, "clickable");
-__decorateClass([
-  replaces({
-    deprecatedPropertyName: "clickable",
-    fromDeprecated: (v) => v
-  }),
   attr({ attribute: "clickable-box", mode: "boolean" })
 ], SelectableBox.prototype, "clickableBox");
 __decorateClass([

package/shared/definition5.cjs

@@ -379,7 +379,7 @@ const AudioPlayerTemplate = (context) => {
 			${when.when(
     (x) => Boolean(x.playbackRates),
     vividElement.html`
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
+			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"

package/shared/definition5.js

@@ -377,7 +377,7 @@ const AudioPlayerTemplate = (context) => {
 			${when(
     (x) => Boolean(x.playbackRates),
     html`
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
+			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"

package/shared/definition54.cjs

@@ -34,7 +34,7 @@ const oppositeOrientation = (orientation) => orientation === TabsOrientation.hor
 const gridProperty = (orientation) => orientation === TabsOrientation.horizontal ? "gridColumn" : "gridRow";
 const translateProperty = (orientation) => orientation === TabsOrientation.horizontal ? "translateX" : "translateY";
 const offsetProperty = (orientation) => orientation === TabsOrientation.horizontal ? "offsetLeft" : "offsetTop";
-const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.hasAttribute("hidden");
+const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.disabled && !el.hasAttribute("hidden");
 class Tabs extends vividElement.VividElement {
   constructor() {
     super(...arguments);

package/shared/definition54.js

@@ -32,7 +32,7 @@ const oppositeOrientation = (orientation) => orientation === TabsOrientation.hor
 const gridProperty = (orientation) => orientation === TabsOrientation.horizontal ? "gridColumn" : "gridRow";
 const translateProperty = (orientation) => orientation === TabsOrientation.horizontal ? "translateX" : "translateY";
 const offsetProperty = (orientation) => orientation === TabsOrientation.horizontal ? "offsetLeft" : "offsetTop";
-const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.hasAttribute("hidden");
+const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.disabled && !el.hasAttribute("hidden");
 class Tabs extends VividElement {
   constructor() {
     super(...arguments);

package/shared/definition60.cjs

@@ -3,6 +3,7 @@
 const definition = require('./definition67.cjs');
 const vividElement = require('./vivid-element.cjs');
 const anchored = require('./anchored.cjs');
+const localized = require('./localized.cjs');
 const index = require('./index.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
@@ -18,10 +19,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Toggletip extends anchored.Anchored(vividElement.VividElement) {
+class Toggletip extends localized.Localized(anchored.Anchored(vividElement.VividElement)) {
   constructor() {
     super(...arguments);
-    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
+    this.#originalAriaLabel = null;
     this.alternate = false;
     this.placement = "right";
     this.open = false;
@@ -39,7 +40,7 @@ class Toggletip extends anchored.Anchored(vividElement.VividElement) {
       }
     };
   }
-  #ANCHOR_ARIA_LABEL_SUFFIX;
+  #originalAriaLabel;
   openChanged(oldValue, newValue) {
     if (oldValue === void 0) return;
     if (newValue) {
@@ -69,7 +70,8 @@ class Toggletip extends anchored.Anchored(vividElement.VividElement) {
   }
   #setupAnchor(a) {
     a.addEventListener("click", this.#openIfClosed, true);
-    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
+    this.#originalAriaLabel = a.ariaLabel;
+    a.ariaLabel = `${this.locale.toggletip.anchorLabel(a.ariaLabel || "")}`;
     this.#updateAnchor(a);
   }
   #updateAnchor(a) {
@@ -78,8 +80,7 @@ class Toggletip extends anchored.Anchored(vividElement.VividElement) {
   }
   #cleanupAnchor(a) {
     a.removeEventListener("click", this.#openIfClosed, true);
-    if (a.ariaLabel)
-      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
+    if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
     a.removeAttribute("aria-expanded");
     a.removeAttribute("data-expanded");
   }

package/shared/definition60.js

@@ -1,6 +1,7 @@
 import { P as Popup, p as popupDefinition } from './definition67.js';
 import { D as DOM, V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { A as Anchored, a as anchorSlotTemplateFactory } from './anchored.js';
+import { L as Localized } from './localized.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
@@ -16,10 +17,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Toggletip extends Anchored(VividElement) {
+class Toggletip extends Localized(Anchored(VividElement)) {
   constructor() {
     super(...arguments);
-    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
+    this.#originalAriaLabel = null;
     this.alternate = false;
     this.placement = "right";
     this.open = false;
@@ -37,7 +38,7 @@ class Toggletip extends Anchored(VividElement) {
       }
     };
   }
-  #ANCHOR_ARIA_LABEL_SUFFIX;
+  #originalAriaLabel;
   openChanged(oldValue, newValue) {
     if (oldValue === void 0) return;
     if (newValue) {
@@ -67,7 +68,8 @@ class Toggletip extends Anchored(VividElement) {
   }
   #setupAnchor(a) {
     a.addEventListener("click", this.#openIfClosed, true);
-    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
+    this.#originalAriaLabel = a.ariaLabel;
+    a.ariaLabel = `${this.locale.toggletip.anchorLabel(a.ariaLabel || "")}`;
     this.#updateAnchor(a);
   }
   #updateAnchor(a) {
@@ -76,8 +78,7 @@ class Toggletip extends Anchored(VividElement) {
   }
   #cleanupAnchor(a) {
     a.removeEventListener("click", this.#openIfClosed, true);
-    if (a.ariaLabel)
-      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
+    if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
     a.removeAttribute("aria-expanded");
     a.removeAttribute("data-expanded");
   }

package/shared/definition62.cjs

@@ -23,7 +23,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 function isTreeItemElement(el) {
-  return dom.isHTMLElement(el) && el.getAttribute("role") === "treeitem";
+  return dom.isHTMLElement(el) && (el.getAttribute("role") === "treeitem" || el instanceof TreeItem);
 }
 class TreeItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.VividElement)) {
   constructor() {

package/shared/definition62.js

@@ -21,7 +21,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 function isTreeItemElement(el) {
-  return isHTMLElement(el) && el.getAttribute("role") === "treeitem";
+  return isHTMLElement(el) && (el.getAttribute("role") === "treeitem" || el instanceof TreeItem);
 }
 class TreeItem extends HostSemantics(AffixIcon(VividElement)) {
   constructor() {

package/shared/definition63.cjs

@@ -27,8 +27,7 @@ function getDisplayedNodes(rootNode, selector) {
     );
     const visibleNodes = nodes.filter((node) => {
       if (node.parentElement instanceof definition.TreeItem) {
-        if (node.parentElement.getAttribute("aria-expanded") === "true")
-          return true;
+        if (node.parentElement.expanded) return true;
       } else {
         return true;
       }

package/shared/definition63.js

@@ -25,8 +25,7 @@ function getDisplayedNodes(rootNode, selector) {
     );
     const visibleNodes = nodes.filter((node) => {
       if (node.parentElement instanceof TreeItem) {
-        if (node.parentElement.getAttribute("aria-expanded") === "true")
-          return true;
+        if (node.parentElement.expanded) return true;
       } else {
         return true;
       }

package/shared/delegates-aria.cjs

@@ -9,7 +9,6 @@ class DelegateAriaBehavior {
     this.source = null;
     this.bindingBehaviours = [];
     this.onSourceAriaPropertyChanged = (source, property) => {
-      this.mitigateAccessibilityIssues(source);
       if (!this.forwardedProperties.has(property)) {
         return;
       }
@@ -17,7 +16,6 @@ class DelegateAriaBehavior {
     };
     this.boundProperties = params.boundProperties;
     this.forwardedProperties = params.forwardedProperties;
-    this.isMitigationDisabled = params.disableAccessibilityMitigation;
   }
   bind(source) {
     this.source = source;
@@ -27,7 +25,6 @@ class DelegateAriaBehavior {
       this.forwardedProperties,
       this.target
     );
-    this.mitigateAccessibilityIssues(source);
   }
   unbind() {
     if (this.source === null) {
@@ -70,38 +67,20 @@ class DelegateAriaBehavior {
   forwardPropertyToTarget(target, property, value) {
     vividElement.DOM.setAttribute(target, vividElement.ariaAttributeName(property), value);
   }
-  /**
-   * Sets role to presentation unless there are properties present that prohibit it.
-   * Using role="presentation" will cause non-global states or properties to be ignored.
-   * See: https://www.w3.org/TR/wai-aria-1.3/#conflict_resolution_presentation_none
-   */
-  mitigateAccessibilityIssues(source) {
-    if (this.isMitigationDisabled) {
-      return;
-    }
-    const hasProhibitedProperties = Boolean(
-      source.ariaLabel || source.ariaBrailleLabel || source.ariaChecked
-    );
-    if (hasProhibitedProperties) {
-      source.removeAttribute("role");
-    } else {
-      source.setAttribute("role", "presentation");
-    }
-  }
 }
 
 function delegateAria(boundProperties = {}, options = {}) {
   const forwardedProperties = new Set(
-    (options.onlySpecified ? [] : vividElement.ariaMixinProperties).filter((p) => p !== "role").filter((p) => !(p in boundProperties))
+    (options.onlySpecified ? [] : vividElement.ariaMixinProperties).filter(
+      (p) => !(p in boundProperties)
+    )
   );
-  const disableAccessibilityMitigation = boundProperties.role instanceof Function;
   return new vividElement.AttachedBehaviorHTMLDirective(
     "vvd-delegate-aria",
     DelegateAriaBehavior,
     {
       boundProperties,
-      forwardedProperties,
-      disableAccessibilityMitigation
+      forwardedProperties
     }
   );
 }