@umbraco-cms/backoffice 15.3.0 → 15.4.0-rc

package/dist-cms/packages/core/icon-registry/icons.js

@@ -356,6 +356,30 @@ export default [{
     }, {
         name: "icon-columns",
         path: () => import("./icons/icon-columns.js"),
+    }, {
+        name: "icon-columns-2",
+        path: () => import("./icons/icon-columns-2.js"),
+    }, {
+        name: "icon-columns-3",
+        path: () => import("./icons/icon-columns-3.js"),
+    }, {
+        name: "icon-columns-4",
+        path: () => import("./icons/icon-columns-4.js"),
+    }, {
+        name: "icon-rows-2",
+        path: () => import("./icons/icon-rows-2.js"),
+    }, {
+        name: "icon-rows-3",
+        path: () => import("./icons/icon-rows-3.js"),
+    }, {
+        name: "icon-rows-4",
+        path: () => import("./icons/icon-rows-4.js"),
+    }, {
+        name: "icon-grid-2",
+        path: () => import("./icons/icon-grid-2.js"),
+    }, {
+        name: "icon-grid-3",
+        path: () => import("./icons/icon-grid-3.js"),
     }, {
         name: "icon-combination-lock-open",
         path: () => import("./icons/icon-combination-lock-open.js"),
@@ -697,6 +721,10 @@ export default [{
     }, {
         name: "icon-grid",
         path: () => import("./icons/icon-grid.js"),
+    }, {
+        name: "icon-grip",
+        hidden: true,
+        path: () => import("./icons/icon-grip.js"),
     }, {
         name: "icon-hammer",
         path: () => import("./icons/icon-hammer.js"),
@@ -746,6 +774,9 @@ export default [{
     }, {
         name: "icon-heading-3",
         path: () => import("./icons/icon-heading-3.js"),
+    }, {
+        name: "icon-heading-4",
+        path: () => import("./icons/icon-heading-4.js"),
     }, {
         name: "icon-headphones",
         path: () => import("./icons/icon-headphones.js"),
@@ -1122,6 +1153,9 @@ export default [{
         legacy: true,
         hidden: true,
         path: () => import("./icons/icon-old-phone.js"),
+    }, {
+        name: "icon-omega",
+        path: () => import("./icons/icon-omega.js"),
     }, {
         name: "icon-operator",
         path: () => import("./icons/icon-operator.js"),
@@ -1185,6 +1219,9 @@ export default [{
     }, {
         name: "icon-partly-cloudy",
         path: () => import("./icons/icon-partly-cloudy.js"),
+    }, {
+        name: "icon-paragraph",
+        path: () => import("./icons/icon-paragraph.js"),
     }, {
         name: "icon-paste-in",
         legacy: true,
@@ -1990,6 +2027,63 @@ export default [{
     }, {
         name: "icon-document-play",
         path: () => import("./icons/icon-document-play.js"),
+    }, {
+        name: "icon-shared-value",
+        path: () => import("./icons/icon-shared-value.js"),
+    }, {
+        name: "icon-layout-masonry",
+        path: () => import("./icons/icon-layout-masonry.js"),
+    }, {
+        name: "icon-layout-grid",
+        path: () => import("./icons/icon-layout-grid.js"),
+    }, {
+        name: "icon-layout-list",
+        path: () => import("./icons/icon-layout-list.js"),
+    }, {
+        name: "icon-layout-panel-left",
+        path: () => import("./icons/icon-layout-panel-left.js"),
+    }, {
+        name: "icon-spray-can",
+        path: () => import("./icons/icon-spray-can.js"),
+    }, {
+        name: "icon-swatch-book",
+        path: () => import("./icons/icon-swatch-book.js"),
+    }, {
+        name: "icon-shape-cylinder",
+        path: () => import("./icons/icon-shape-cylinder.js"),
+    }, {
+        name: "icon-shape-triangle-right",
+        path: () => import("./icons/icon-shape-triangle-right.js"),
+    }, {
+        name: "icon-shape-triangle",
+        path: () => import("./icons/icon-shape-triangle.js"),
+    }, {
+        name: "icon-shape-circle",
+        path: () => import("./icons/icon-shape-circle.js"),
+    }, {
+        name: "icon-shape-square",
+        path: () => import("./icons/icon-shape-square.js"),
+    }, {
+        name: "icon-shape-hexagon",
+        path: () => import("./icons/icon-shape-hexagon.js"),
+    }, {
+        name: "icon-shape-rectangle-horizontal",
+        path: () => import("./icons/icon-shape-rectangle-horizontal.js"),
+    }, {
+        name: "icon-shape-rectangle-vertical",
+        path: () => import("./icons/icon-shape-rectangle-vertical.js"),
+    }, {
+        name: "icon-shapes",
+        path: () => import("./icons/icon-shapes.js"),
+    }, {
+        name: "icon-layout-dislocated",
+        path: () => import("./icons/icon-layout-dislocated.js"),
+    }, {
+        name: "icon-blend",
+        path: () => import("./icons/icon-blend.js"),
+    }, {
+        name: "icon-land-plot",
+        path: () => import("./icons/icon-land-plot.js"),
     }, {
         name: "icon-facebook",
         path: () => import("./icons/icon-facebook.js"),
@@ -2014,218 +2108,272 @@ export default [{
     }, {
         name: "icon-art-easel",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-art-easel.js"),
     }, {
         name: "icon-article",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-article.js"),
     }, {
         name: "icon-auction-hammer",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-auction-hammer.js"),
     }, {
         name: "icon-badge-count",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-badge-count.js"),
     }, {
         name: "icon-band-aid",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-band-aid.js"),
     }, {
         name: "icon-baby-stroller",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-baby-stroller.js"),
     }, {
         name: "icon-bill-dollar",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bill-dollar.js"),
     }, {
         name: "icon-bill-euro",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bill-euro.js"),
     }, {
         name: "icon-bill-pound",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bill-pound.js"),
     }, {
         name: "icon-bill-yen",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bill-yen.js"),
     }, {
         name: "icon-bill",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bill.js"),
     }, {
         name: "icon-billboard",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-billboard.js"),
     }, {
         name: "icon-bills-dollar",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bills-dollar.js"),
     }, {
         name: "icon-bills-euro",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bills-euro.js"),
     }, {
         name: "icon-bills-pound",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bills-pound.js"),
     }, {
         name: "icon-bills-yen",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bills-yen.js"),
     }, {
         name: "icon-bills",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bills.js"),
     }, {
         name: "icon-blueprint",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-blueprint.js"),
     }, {
         name: "icon-bomb",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-bomb.js"),
     }, {
         name: "icon-cash-register",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-cash-register.js"),
     }, {
         name: "icon-checkbox-dotted-active",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-checkbox-dotted-active.js"),
     }, {
         name: "icon-chess",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-chess.js"),
     }, {
         name: "icon-circus",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-circus.js"),
     }, {
         name: "icon-clothes-hanger",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-clothes-hanger.js"),
     }, {
         name: "icon-coin",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-coin.js"),
     }, {
         name: "icon-coins-dollar-alt",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-coins-dollar-alt.js"),
     }, {
         name: "icon-coins-dollar",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-coins-dollar.js"),
     }, {
         name: "icon-coins-euro-alt",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-coins-euro-alt.js"),
     }, {
         name: "icon-coins-euro",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-coins-euro.js"),
     }, {
         name: "icon-coins-pound-alt",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-coins-pound-alt.js"),
     }, {
         name: "icon-coins-pound",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-coins-pound.js"),
     }, {
         name: "icon-coins-yen-alt",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-coins-yen-alt.js"),
     }, {
         name: "icon-coins-yen",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-coins-yen.js"),
     }, {
         name: "icon-comb",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-comb.js"),
     }, {
         name: "icon-desk",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-desk.js"),
     }, {
         name: "icon-dollar-bag",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-dollar-bag.js"),
     }, {
         name: "icon-eject",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-eject.js"),
     }, {
         name: "icon-euro-bag",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-euro-bag.js"),
     }, {
         name: "icon-female-symbol",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-female-symbol.js"),
     }, {
         name: "icon-firewall",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-firewall.js"),
     }, {
         name: "icon-folder-open",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-folder-open.js"),
     }, {
         name: "icon-folder-outline",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-folder-outline.js"),
     }, {
         name: "icon-handprint",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-handprint.js"),
     }, {
         name: "icon-hat",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-hat.js"),
     }, {
         name: "icon-hd",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-hd.js"),
     }, {
         name: "icon-inactive-line",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-inactive-line.js"),
     }, {
         name: "icon-keychain",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-keychain.js"),
     }, {
         name: "icon-keyhole",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-keyhole.js"),
     }, {
         name: "icon-linkedin",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-linkedin.js"),
     }, {
         name: "icon-linux-tux",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-linux-tux.js"),
     }, {
         name: "icon-male-and-female",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-male-and-female.js"),
     }, {
         name: "icon-male-symbol",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-male-symbol.js"),
     }, {
         name: "icon-molecular-network",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-molecular-network.js"),
     }, {
         name: "icon-molecular",
         legacy: true,
+        hidden: true,
         path: () => import("./icons/icon-molecular.js"),
     }, {
         name: "icon-umbraco",

package/dist-cms/packages/core/localization/components/ui-culture-input/ui-culture-input.element.d.ts

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '../../../lit-element/index.js';
-declare const UmbUiCultureInputElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
+declare const UmbUiCultureInputElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbUiCultureInputElement extends UmbUiCultureInputElement_base {
     #private;
     private _options;

package/dist-cms/packages/core/localization/localize.element.d.ts

@@ -24,7 +24,7 @@ export declare class UmbLocalizeElement extends UmbLitElement {
      */
     debug: boolean;
     protected get text(): string;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>;
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/dist-cms/packages/core/localization/localize.element.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, customElement, html, property, state, unsafeHTML } from '../../../external/lit/index.js';
+import { escapeHTML } from '../utils/index.js';
 import { UmbLitElement } from '../lit-element/index.js';
 /**
  * This element allows you to localize a string with optional interpolation values.
@@ -21,18 +22,22 @@ let UmbLocalizeElement = class UmbLocalizeElement extends UmbLitElement {
         this.debug = false;
     }
     get text() {
-        const localizedValue = this.localize.term(this.key, ...(this.args ?? []));
+        // As translated texts can contain HTML, we will need to render with unsafeHTML.
+        // But arguments can come from user input, so they should be escaped.
+        const escapedArgs = (this.args ?? []).map((a) => escapeHTML(a));
+        const localizedValue = this.localize.term(this.key, ...escapedArgs);
         // If the value is the same as the key, it means the key was not found.
         if (localizedValue === this.key) {
             this.getHostElement().setAttribute('data-localize-missing', this.key);
             return '';
         }
         this.getHostElement().removeAttribute('data-localize-missing');
-        return localizedValue;
+        return localizedValue.trim();
     }
     render() {
-        return this.text.trim()
-            ? html `${unsafeHTML(this.text)}`
+        const text = this.text;
+        return text
+            ? unsafeHTML(text)
             : this.debug
                 ? html `<span style="color:red">${this.key}</span>`
                 : html `<slot></slot>`;

package/dist-cms/packages/core/localization/registry/localization.registry.js

@@ -69,7 +69,7 @@ export class UmbLocalizationRegistry {
             if (!translations.length)
                 return;
             if (diff.length) {
-                const filteredTranslations = translations.filter((t) => diff.some((ext) => ext.meta.culture === t.$code));
+                const filteredTranslations = translations.filter((t) => diff.some((ext) => ext.meta.culture.toLowerCase() === t.$code));
                 umbLocalizationManager.registerManyLocalizations(filteredTranslations);
             }
             // Set the document language

package/dist-cms/packages/core/menu/components/menu/index.d.ts

@@ -1,2 +1 @@
 export * from './menu.element.js';
-export * from './menu.context.js';

package/dist-cms/packages/core/menu/components/menu/index.js

@@ -1,2 +1 @@
 export * from './menu.element.js';
-export * from './menu.context.js';

package/dist-cms/packages/core/menu/components/menu/menu.element.d.ts

@@ -3,7 +3,6 @@ import { UmbLitElement } from '../../../lit-element/index.js';
 import '../menu-item/menu-item-default.element.js';
 export declare class UmbMenuElement extends UmbLitElement {
     manifest?: ManifestMenu;
-    constructor();
     render(): import("lit-html").TemplateResult<1>;
 }
 export default UmbMenuElement;

package/dist-cms/packages/core/menu/components/menu/menu.element.js

@@ -8,10 +8,6 @@ import { html, customElement, property } from '../../../../../external/lit/index
 import { UmbLitElement } from '../../../lit-element/index.js';
 import '../menu-item/menu-item-default.element.js';
 let UmbMenuElement = class UmbMenuElement extends UmbLitElement {
-    constructor() {
-        super();
-        //this.provideContext(UMB_MENU_CONTEXT, new UmbMenuContext());
-    }
     render() {
         return html `
 			<umb-extension-slot

package/dist-cms/packages/core/menu/conditions/menu-alias.condition.js

@@ -1,13 +1,19 @@
-import { UMB_MENU_CONTEXT } from '../components/menu/menu.context.js';
 import { UmbConditionBase } from '../../extension-registry/conditions/condition-base.controller.js';
 export class UmbMenuAliasCondition extends UmbConditionBase {
     constructor(host, args) {
         super(host, args);
+        console.error('Condition of alias `Umb.Condition.MenuAlias` is not implemented. Please report this issue if you where expecting this condition to work.');
+        /*
         this.consumeContext(UMB_MENU_CONTEXT, (context) => {
-            this.observe(context.alias, (MenuAlias) => {
-                this.permitted = MenuAlias === this.config.match;
-            }, 'observeAlias');
+            this.observe(
+                context.alias,
+                (MenuAlias) => {
+                    this.permitted = MenuAlias === this.config.match;
+                },
+                'observeAlias',
+            );
         });
+        */
     }
 }
 export const manifest = {

package/dist-cms/packages/core/menu/menu-variant-tree-structure-workspace-context-base.js

@@ -2,12 +2,14 @@ import { createExtensionApiByAlias } from '../extension-registry/index.js';
 import { UmbContextBase } from '../../../libs/class-api/index.js';
 import { UMB_VARIANT_WORKSPACE_CONTEXT } from '../workspace/index.js';
 import { UmbArrayState, UmbObjectState } from '../../../libs/observable-api/index.js';
+import { UmbAncestorsEntityContext } from '../entity/index.js';
 export class UmbMenuVariantTreeStructureWorkspaceContextBase extends UmbContextBase {
     // TODO: add correct interface
     #workspaceContext;
     #args;
     #structure;
     #parent;
+    #ancestorContext;
     constructor(host, args) {
         // TODO: set up context token
         super(host, 'UmbMenuStructureWorkspaceContext');
@@ -15,6 +17,7 @@ export class UmbMenuVariantTreeStructureWorkspaceContextBase extends UmbContextB
         this.structure = this.#structure.asObservable();
         this.#parent = new UmbObjectState(undefined);
         this.parent = this.#parent.asObservable();
+        this.#ancestorContext = new UmbAncestorsEntityContext(this);
         this.#args = args;
         this.consumeContext(UMB_VARIANT_WORKSPACE_CONTEXT, (instance) => {
             this.#workspaceContext = instance;
@@ -65,6 +68,13 @@ export class UmbMenuVariantTreeStructureWorkspaceContextBase extends UmbContextB
                     }),
                 };
             });
+            const ancestorEntities = data.map((treeItem) => {
+                return {
+                    unique: treeItem.unique,
+                    entityType: treeItem.entityType,
+                };
+            });
+            this.#ancestorContext.setAncestors(ancestorEntities);
             structureItems.push(...ancestorItems);
             const parent = structureItems[structureItems.length - 2];
             this.#parent.setValue(parent);

package/dist-cms/packages/core/menu/section-sidebar-menu/section-sidebar-menu.element.js

@@ -43,7 +43,7 @@ let UmbSectionSidebarMenuElement = class UmbSectionSidebarMenuElement extends Um
 			h3 {
 				margin: var(--uui-size-5) 0;
 				padding: var(--uui-size-4) var(--uui-size-8);
-				font-size: 15px;
+				font-size: 14px;
 			}
 		`,
     ]; }

package/dist-cms/packages/core/modal/common/error-viewer/error-viewer-modal.token.d.ts

@@ -1,5 +1,5 @@
 import type { UmbPeekErrorArgs } from '../../../notification/types.js';
-import { UmbModalToken } from '../../index.js';
+import { UmbModalToken } from '../../token/index.js';
 export interface UmbErrorViewerModalData extends UmbPeekErrorArgs {
 }
 export type UmbErrorViewerModalValue = undefined;

package/dist-cms/packages/core/modal/common/error-viewer/error-viewer-modal.token.js

@@ -1,4 +1,4 @@
-import { UmbModalToken } from '../../index.js';
+import { UmbModalToken } from '../../token/index.js';
 export const UMB_ERROR_VIEWER_MODAL = new UmbModalToken('Umb.Modal.ErrorViewer', {
     modal: {
         type: 'sidebar',

package/dist-cms/packages/core/modal/component/modal.element.js

@@ -71,6 +71,7 @@ let UmbModalElement = class UmbModalElement extends UmbLitElement {
             this.#modalRouterElement = document.createElement('umb-router-slot');
             this.#modalRouterElement.routes = [
                 {
+                    unique: '_umbEmptyRoute_',
                     path: '',
                     component: document.createElement('slot'),
                 },

package/dist-cms/packages/core/notification/controllers/peek-error/peek-error.controller.d.ts

@@ -1,6 +1,6 @@
+import type { UmbPeekErrorArgs } from '../../types.js';
 import { UmbControllerBase } from '../../../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
-import type { UmbPeekErrorArgs } from '../../types.js';
 import './peek-error-notification.element.js';
 export declare class UmbPeekErrorController extends UmbControllerBase {
     open(args: UmbPeekErrorArgs): Promise<void>;

package/dist-cms/packages/core/notification/extractUmbNotificationColor.function.d.ts

@@ -1,5 +1,5 @@
-import { EventMessageTypeModel } from '../../../external/backend-api/index.js';
 import type { UmbNotificationColor } from './types.js';
+import { EventMessageTypeModel } from '../../../external/backend-api/index.js';
 /**
  *
  * @param type

package/dist-cms/packages/core/object-type/input-object-type.element.d.ts

@@ -1,6 +1,6 @@
 import type { UUISelectElement } from '../../../external/uui/index.js';
 import { UmbLitElement } from '../lit-element/index.js';
-declare const UmbInputObjectTypeElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
+declare const UmbInputObjectTypeElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbInputObjectTypeElement extends UmbInputObjectTypeElement_base {
     #private;
     private select;

package/dist-cms/packages/core/picker/search/picker-search-field.element.d.ts

@@ -1,6 +1,5 @@
 import { nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
-declare const elementName = "umb-picker-search-field";
 export declare class UmbPickerSearchFieldElement extends UmbLitElement {
     #private;
     _query: string;
@@ -12,7 +11,6 @@ export declare class UmbPickerSearchFieldElement extends UmbLitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbPickerSearchFieldElement;
+        'umb-picker-search-field': UmbPickerSearchFieldElement;
     }
 }
-export {};

package/dist-cms/packages/core/picker/search/picker-search-field.element.js

@@ -8,7 +8,6 @@ import { UMB_PICKER_CONTEXT } from '../picker.context.token.js';
 import { html, customElement, state, nothing, css } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 import { UmbTextStyles } from '../../style/index.js';
-const elementName = 'umb-picker-search-field';
 let UmbPickerSearchFieldElement = class UmbPickerSearchFieldElement extends UmbLitElement {
     #pickerContext;
     constructor() {
@@ -57,6 +56,11 @@ let UmbPickerSearchFieldElement = class UmbPickerSearchFieldElement extends UmbL
 				width: 100%;
 			}
 
+			uui-input [slot='prepend'] {
+				display: flex;
+				align-items: center;
+			}
+
 			#divider {
 				width: 100%;
 				height: 1px;
@@ -82,6 +86,6 @@ __decorate([
     state()
 ], UmbPickerSearchFieldElement.prototype, "_isSearchable", void 0);
 UmbPickerSearchFieldElement = __decorate([
-    customElement(elementName)
+    customElement('umb-picker-search-field')
 ], UmbPickerSearchFieldElement);
 export { UmbPickerSearchFieldElement };