vira 33.1.0 → 33.2.0

package/dist/elements/vira-dropdown.element.js

@@ -50,6 +50,24 @@ export const ViraDropdown = defineViraElement()({
             white-space: nowrap;
         }
 
+        .option-label {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            max-width: 100%;
+            vertical-align: bottom;
+        }
+
+        .option-icon {
+            flex-shrink: 0;
+        }
+
+        .option-label-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
         .search-input {
             ${noNativeFormStyles};
             flex-grow: 1;
@@ -224,6 +242,29 @@ export const ViraDropdown = defineViraElement()({
             : inputs.isMultiSelect && selectedOptions.length > 1
                 ? `${selectedOptions.length} Selected`
                 : selectedOptions[0]?.label || '';
+        function renderOptionLabel(option) {
+            return option.icon || option.labelTemplate
+                ? html `
+                      <span class="option-label">
+                          ${option.icon
+                    ? html `
+                                    <${ViraIcon.assign({
+                        icon: option.icon,
+                    })}
+                                        class="option-icon"
+                                    ></${ViraIcon}>
+                                `
+                    : nothing}
+                          <span class="option-label-text">
+                              ${option.labelTemplate ?? option.label}
+                          </span>
+                      </span>
+                  `
+                : option.label;
+        }
+        const selectionTemplate = check.isLengthExactly(selectedOptions, 1)
+            ? renderOptionLabel(selectedOptions[0])
+            : selectionDisplay;
         function selectOption(option) {
             const newSelectedValues = inputs.isMultiSelect
                 ? selectedOptions.includes(option)
@@ -330,7 +371,7 @@ export const ViraDropdown = defineViraElement()({
         function renderOptionEntries(options) {
             return renderMenuItemEntries(options.map((option) => {
                 return {
-                    content: option.label,
+                    content: renderOptionLabel(option),
                     onClick() {
                         selectOption(option);
                     },
@@ -540,7 +581,7 @@ export const ViraDropdown = defineViraElement()({
             })}"
                                   title=${ifDefined(shouldUsePlaceholder ? undefined : selectionDisplay)}
                               >
-                                  ${prefixTemplate} ${selectionDisplay}
+                                  ${prefixTemplate} ${selectionTemplate}
                               </span>
                           `}
 
@@ -557,7 +598,7 @@ export const ViraDropdown = defineViraElement()({
         `;
         const contentTemplate = inputs.isReadonly
             ? html `
-                  <span class="readonly-value">${selectionDisplay}</span>
+                  <span class="readonly-value">${selectionTemplate}</span>
               `
             : triggerTemplate;
         if (inputs.label) {

package/dist/util/vira-dropdown-option.d.ts

@@ -1,4 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
+import { type HtmlInterpolation } from 'element-vir';
+import { type ViraIconSvg } from '../icons/icon-svg.js';
 /**
  * Options for `ViraDropdown`.
  *
@@ -8,9 +10,17 @@ import { type PartialWithUndefined } from '@augment-vir/common';
 export type ViraDropdownOption = {
     /** A value or id, used to keep track of which option is selected. */
     value: string;
+    /**
+     * Plain text for the option. Still used for search filtering, tooltips, and the search input's
+     * text when `labelTemplate` is set.
+     */
     label: string;
 } & PartialWithUndefined<{
     disabled: boolean;
+    /** Drawn before the label. Not drawn inside a searchable dropdown's text input. */
+    icon: ViraIconSvg;
+    /** Rendered instead of `label`. Not rendered inside a searchable dropdown's text input. */
+    labelTemplate: HtmlInterpolation;
 }>;
 /**
  * A group of options for `ViraDropdown`, rendered under a group label.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "33.1.0",
+    "version": "33.2.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",