@vonage/vivid 4.31.0 → 5.0.0

package/shared/definition17.js

@@ -3,6 +3,7 @@ import { h as html, V as VividElement, a as attr, o as observable, D as DOM, O a
 import { V as VisuallyHidden, v as visuallyHiddenDefinition } from './definition66.js';
 import { b as keyEscape, j as keyFunction2, k as keyEnter, d as keyEnd, g as keyHome, h as keyArrowRight, i as keyArrowLeft, l as keyPageDown, m as keyPageUp, f as keyArrowDown, e as keyArrowUp, a as keySpace } from './key-codes.js';
 import { R as RepeatDirective } from './repeat.js';
+import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
 import { c as children } from './children.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { L as Localized } from './localized.js';
@@ -70,7 +71,7 @@ const defaultHeaderCellContentsTemplate = html`
 		${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
 	</template>
 `;
-class DataGridCell extends Localized(VividElement) {
+class DataGridCell extends Localized(HostSemantics(VividElement)) {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @repo/repo/no-attribute-default-value
@@ -88,7 +89,21 @@ class DataGridCell extends Localized(VividElement) {
     };
     this._selectable = false;
     this.selected = false;
+    /**
+     * Indicates the selected status.
+     *
+     * @deprecated For setting selected state, please use `selected` property instead.
+     * @public
+     * HTML Attribute: aria-selected
+     */
     this.ariaSelected = null;
+    /**
+     * Indicates the sort status.
+     *
+     * @deprecated To set the sorting visual style please use `sortDirection` property.
+     * @public
+     * HTML Attribute: aria-sort
+     */
     this.ariaSort = null;
   }
   /**
@@ -278,54 +293,25 @@ class DataGridCell extends Localized(VividElement) {
       this.customCellView = null;
     }
   }
-  /**
-   *
-   * @private
-   */
-  calculateAriaSelectedValue() {
-    if (this._selectable && this.selected) return "true";
-    if (this._selectable && !this.selected) return "false";
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _selectableChanged() {
-    this.ariaSelected = this.calculateAriaSelectedValue();
-  }
-  /**
-   * @internal
-   */
-  selectedChanged() {
-    this.ariaSelected = this.calculateAriaSelectedValue();
-  }
   /**
    * @internal
    */
-  ariaSelectedChanged(_, newValue) {
+  ariaSelectedChanged(prevValue, newValue) {
+    super.ariaSelectedChanged(prevValue, newValue);
     this._selectable = newValue !== null;
     this.selected = newValue === "true";
   }
   /**
    * @internal
    */
-  ariaSortChanged(_oldValue, newValue) {
+  ariaSortChanged(oldValue, newValue) {
+    super.ariaSortChanged(oldValue, newValue);
     if (newValue === null) {
       this.sortDirection = void 0;
       return;
     }
     this.sortDirection = newValue;
   }
-  /**
-   * @internal
-   */
-  sortDirectionChanged(_oldValue, newValue) {
-    if (newValue === void 0) {
-      this.ariaSort = null;
-      return;
-    }
-    this.ariaSort = newValue;
-  }
   #getColumnDataKey() {
     return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
   }
@@ -371,12 +357,6 @@ __decorateClass$2([
 __decorateClass$2([
   attr({ mode: "boolean" })
 ], DataGridCell.prototype, "selected");
-__decorateClass$2([
-  attr({ attribute: "aria-selected", mode: "fromView" })
-], DataGridCell.prototype, "ariaSelected");
-__decorateClass$2([
-  attr({ attribute: "aria-sort" })
-], DataGridCell.prototype, "ariaSort");
 __decorateClass$2([
   attr({ attribute: "sort-direction" })
 ], DataGridCell.prototype, "sortDirection");
@@ -390,7 +370,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   if (result) __defProp$1(target, key, result);
   return result;
 };
-class DataGridRow extends VividElement {
+class DataGridRow extends HostSemantics(VividElement) {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @repo/repo/no-attribute-default-value
@@ -406,6 +386,13 @@ class DataGridRow extends VividElement {
     this.updateRowStyle = () => {
       this.style.gridTemplateColumns = this.gridTemplateColumns;
     };
+    /**
+     * Indicates the selected status.
+     *
+     * @deprecated
+     * @public
+     * HTML Attribute: aria-selected
+     */
     this.ariaSelected = null;
     this._selectable = false;
     this.selected = false;
@@ -519,30 +506,11 @@ class DataGridRow extends VividElement {
   /**
    * @internal
    */
-  ariaSelectedChanged(_oldValue, newValue) {
+  ariaSelectedChanged(oldValue, newValue) {
+    super.ariaSelectedChanged(oldValue, newValue);
     this._selectable = newValue !== null;
     this.selected = newValue === "true";
   }
-  /**
-   * @internal
-   */
-  _calculateAriaSelectedValue() {
-    if (this._selectable && this.selected) return "true";
-    if (this._selectable && !this.selected) return "false";
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _selectableChanged() {
-    this.ariaSelected = this._calculateAriaSelectedValue();
-  }
-  /**
-   * @internal
-   */
-  selectedChanged() {
-    this.ariaSelected = this._calculateAriaSelectedValue();
-  }
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass$1([
@@ -578,9 +546,6 @@ __decorateClass$1([
 __decorateClass$1([
   observable
 ], DataGridRow.prototype, "cellElements");
-__decorateClass$1([
-  attr({ attribute: "aria-selected" })
-], DataGridRow.prototype, "ariaSelected");
 __decorateClass$1([
   observable
 ], DataGridRow.prototype, "_selectable");
@@ -638,7 +603,7 @@ const _DataGrid = class _DataGrid extends VividElement {
       );
       const focusRow = this.rowElements[focusRowIndex];
       const cells = focusRow.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [cell-type]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'
       );
       const focusColumnIndex = Math.max(
         0,
@@ -654,7 +619,7 @@ const _DataGrid = class _DataGrid extends VividElement {
       if (mutations && mutations.length) {
         mutations.forEach((mutation) => {
           mutation.addedNodes.forEach((newNode) => {
-            if (newNode.nodeType === 1 && newNode.getAttribute("role") === "row") {
+            if (newNode.nodeType === 1 && (newNode.getAttribute("role") === "row" || newNode.getAttribute("row-type") === "default")) {
               newNode.columnDefinitions = this.columnDefinitions;
             }
           });
@@ -696,7 +661,8 @@ const _DataGrid = class _DataGrid extends VividElement {
       }
     };
     this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
-      if (target.getAttribute("role") !== "gridcell") return;
+      if (target.getAttribute("role") !== "gridcell" || target.getAttribute("cell-type") !== "default")
+        return;
       if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
         this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
         return;
@@ -749,10 +715,10 @@ const _DataGrid = class _DataGrid extends VividElement {
      */
     this._resetSelection = (clear = false) => {
       const cells = Array.from(
-        this.querySelectorAll('[role="gridcell"], [cell-type]')
+        this.querySelectorAll('[role="gridcell"], [cell-type="default"]')
       );
       const rows = Array.from(
-        this.querySelectorAll('[role="row"], [row-type]')
+        this.querySelectorAll('[role="row"], [row-type="default"]')
       );
       if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
         for (const cell of cells) {
@@ -1156,7 +1122,7 @@ const _DataGrid = class _DataGrid extends VividElement {
   applyFixedColumnStyling() {
     this.rowElements.forEach((row) => {
       const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((position, index) => {
         if (index < cells.length) {
@@ -1176,7 +1142,7 @@ const _DataGrid = class _DataGrid extends VividElement {
     this.fixedColumnsPositions = [];
     if (this.rowElements.length === 0) return;
     const cells = this.rowElements[0].querySelectorAll(
-      '[role="cell"], [role="gridcell"], [role="columnheader"]'
+      '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
     );
     let accumulator = 0;
     for (let i = 0; i < Math.min(this.fixedColumns, cells.length); i++) {
@@ -1195,7 +1161,7 @@ const _DataGrid = class _DataGrid extends VividElement {
     }
     this.rowElements.forEach((row) => {
       const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((_, index) => {
         if (index < cells.length) {
@@ -1303,7 +1269,7 @@ const DataGridTemplate = (context) => {
 			:defaultRowItemTemplate="${rowItemTemplate}"
 			${children({
     property: "rowElements",
-    filter: elements("[role=row]")
+    filter: elements("[role=row],[data-vvd-component=data-grid-row]")
   })}
 		>
 			<div class="base">
@@ -1314,6 +1280,11 @@ const DataGridTemplate = (context) => {
 	`;
 };
 
+function calculateAriaSelectedValue$1(x) {
+  if (x._selectable && x.selected) return "true";
+  if (x._selectable && !x.selected) return "false";
+  return null;
+}
 function createCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
   return html`
@@ -1342,14 +1313,17 @@ const DataGridRowTemplate = (context) => {
   const getBaseClasses = (x) => classNames("base", ["selected", !!x.selected]);
   return html`
 		<template
-			role="row"
+			${applyHostSemantics({
+    role: "row",
+    ariaSelected: calculateAriaSelectedValue$1
+  })}
 			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
 			:defaultCellItemTemplate="${cellItemTemplate}"
 			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
 			${children({
     property: "cellElements",
     filter: elements(
-      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[cell-type]'
+      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
     )
   })}
 		>
@@ -1375,6 +1349,11 @@ function getSortIcon(x) {
   }
   return "sort-solid";
 }
+function calculateAriaSelectedValue(x) {
+  if (x._selectable && x.selected) return "true";
+  if (x._selectable && !x.selected) return "false";
+  return null;
+}
 function renderSortIcons(c) {
   const iconTag = c.tagFor(Icon);
   return html`
@@ -1398,7 +1377,11 @@ const DataGridCellTemplate = (context) => {
   return html`
 		<template
 			tabindex="-1"
-			role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
+			${applyHostSemantics({
+    role: (x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default,
+    ariaSelected: calculateAriaSelectedValue,
+    ariaSort: (x) => x.sortDirection ?? null
+  })}
 			@click="${(x) => x._handleInteraction()}"
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
@@ -1406,7 +1389,7 @@ const DataGridCellTemplate = (context) => {
 				class="${getBaseClasses}"
 				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
 			>
-				${(x) => x.ariaSelected === "true" ? html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
+				${(x) => x.selected ? html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
 				<slot></slot>
 				${when(
     shouldShowSortIcons,

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

@@ -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

@@ -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([