@umbraco-cms/backoffice 16.3.4 → 17.0.0-rc1

package/dist-cms/packages/core/variant/types.d.ts

@@ -2,6 +2,7 @@ import type { UmbVariantId } from './variant-id.class.js';
 import type { UmbLanguageDetailModel } from '../../language/index.js';
 import type { ScheduleRequestModel } from '../backend-api/index.js';
 import type { UmbPropertyValueData } from '../property/index.js';
+import type { UmbEntityFlag } from '../entity-flag/index.js';
 export type UmbObjectWithVariantProperties = {
     culture: string | null;
     segment: string | null;
@@ -19,6 +20,7 @@ export interface UmbEntityVariantModel {
     createDate: string | null;
     updateDate: string | null;
     state?: string | null;
+    flags: Array<UmbEntityFlag>;
 }
 /** @deprecated use `UmbEntityVariantModel` instead */
 export interface UmbVariantModel extends UmbEntityVariantModel {
@@ -28,9 +30,8 @@ export interface UmbEntityVariantOptionModel<VariantType extends UmbEntityVarian
     language: UmbLanguageDetailModel;
     segmentInfo?: {
         alias: string;
-        entityType: string;
         name: string;
-        unique: string;
+        cultures?: string[] | null;
     };
     /**
      * The unique identifier is a VariantId string.

package/dist-cms/packages/core/variant/variant-id.class.d.ts

@@ -1,11 +1,4 @@
 import type { UmbObjectWithVariantProperties } from './types.js';
-/**
- *
- * @param {UmbObjectWithVariantProperties} variant - An object with variant specifying properties to convert to a string.
- * @returns {string} A string representation of the variant properties.
- * @deprecated Use UmbVariantId to make this conversion. Will ve removed in v.17
- */
-export declare function variantPropertiesObjectToString(variant: UmbObjectWithVariantProperties): string;
 export declare const UMB_INVARIANT_CULTURE = "invariant";
 /**
  * An identifier representing a Variant. This is at current state a culture and a segment.

package/dist-cms/packages/core/variant/variant-id.class.js

@@ -1,19 +1,3 @@
-import { UmbDeprecation } from '../utils/index.js';
-/**
- *
- * @param {UmbObjectWithVariantProperties} variant - An object with variant specifying properties to convert to a string.
- * @returns {string} A string representation of the variant properties.
- * @deprecated Use UmbVariantId to make this conversion. Will ve removed in v.17
- */
-export function variantPropertiesObjectToString(variant) {
-    new UmbDeprecation({
-        deprecated: 'Method `variantPropertiesObjectToString` is deprecated',
-        removeInVersion: '17',
-        solution: 'Use UmbVariantId to make this conversion',
-    }).warn();
-    // Currently a direct copy of the toString method of variantId.
-    return (variant.culture || UMB_INVARIANT_CULTURE) + (variant.segment ? `_${variant.segment}` : '');
-}
 export const UMB_INVARIANT_CULTURE = 'invariant';
 /**
  * An identifier representing a Variant. This is at current state a culture and a segment.

package/dist-cms/packages/core/vite.config.js

@@ -23,7 +23,9 @@ export default defineConfig({
             'entity-action/index': './entity-action/index.ts',
             'entity-bulk-action/index': './entity-bulk-action/index.ts',
             'entity-create-option-action/index': './entity-create-option-action/index.ts',
+            'entity-flag/index': './entity-flag/index.ts',
             'entity-item/index': './entity-item/index.ts',
+            'entity-sign/index': './entity-sign/index.ts',
             'entity/index': './entity/index.ts',
             'entry-point': 'entry-point.ts',
             'event/index': './event/index.ts',
@@ -41,8 +43,10 @@ export default defineConfig({
             'notification/index': './notification/index.ts',
             'object-type/index': './object-type/index.ts',
             'picker-input/index': './picker-input/index.ts',
+            'picker-data-source/index': './picker-data-source/index.ts',
             'picker/index': './picker/index.ts',
             'property-action/index': './property-action/index.ts',
+            'property-editor-data-source/index': './property-editor-data-source/index.ts',
             'property-editor/index': './property-editor/index.ts',
             'property/index': './property/index.ts',
             'recycle-bin/index': './recycle-bin/index.ts',
@@ -52,6 +56,7 @@ export default defineConfig({
             'section/index': './section/index.ts',
             'server-file-system/index': './server-file-system/index.ts',
             'server/index': './server/index.ts',
+            'search/index': './search/index.ts',
             'shortcut/index': './shortcut/index.ts',
             'sorter/index': './sorter/index.ts',
             'store/index': './store/index.ts',

package/dist-cms/packages/core/workspace/components/workspace-action/default/index.d.ts

@@ -0,0 +1 @@
+export * from './workspace-action.element.js';

package/dist-cms/packages/core/workspace/components/workspace-action/default/index.js

@@ -0,0 +1 @@
+export * from './workspace-action.element.js';

package/dist-cms/packages/core/workspace/components/workspace-action/default/manifests.js

@@ -7,7 +7,7 @@ export const manifest = {
         type: 'workspaceAction',
         kind: 'default',
         weight: 1000,
-        element: () => import('./workspace-action-default-kind.element.js'),
+        element: () => import('./workspace-action.element.js'),
         meta: {
             label: '(Missing label in manifest)',
         },

package/dist-cms/packages/core/workspace/components/workspace-action/default/workspace-action.element.d.ts

@@ -0,0 +1,29 @@
+import type { ManifestWorkspaceAction, ManifestWorkspaceActionMenuItem, MetaWorkspaceActionDefaultKind, UmbWorkspaceActionArgs, UmbWorkspaceActionDefaultKind } from '../../../types.js';
+import { UmbExtensionsElementAndApiInitializer } from '../../../../../../libs/extension-api/index.js';
+import { UmbLitElement } from '../../../../lit-element/index.js';
+import type { UmbAction } from '../../../../action/index.js';
+import type { UmbExtensionElementAndApiInitializer } from '../../../../../../libs/extension-api/index.js';
+export declare class UmbWorkspaceActionElement<MetaType extends MetaWorkspaceActionDefaultKind = MetaWorkspaceActionDefaultKind, ApiType extends UmbWorkspaceActionDefaultKind<MetaType> = UmbWorkspaceActionDefaultKind<MetaType>> extends UmbLitElement {
+    #private;
+    protected _extensionsController?: UmbExtensionsElementAndApiInitializer<ManifestWorkspaceActionMenuItem, 'workspaceActionMenuItem', ManifestWorkspaceActionMenuItem>;
+    set manifest(value: ManifestWorkspaceAction<MetaType> | undefined);
+    get manifest(): ManifestWorkspaceAction<MetaType> | undefined;
+    set api(api: ApiType | undefined);
+    get api(): ApiType | undefined;
+    protected _actionApi?: UmbAction<UmbWorkspaceActionArgs<MetaType>>;
+    protected _buttonLabel?: string;
+    private _buttonState?;
+    private _additionalOptions?;
+    private _href?;
+    private _isDisabled;
+    protected _items: Array<UmbExtensionElementAndApiInitializer<ManifestWorkspaceActionMenuItem>>;
+    protected observeExtensions(aliases: string[]): void;
+    render(): import("lit-html").TemplateResult<1>;
+    disconnectedCallback(): void;
+}
+export default UmbWorkspaceActionElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-workspace-action': UmbWorkspaceActionElement;
+    }
+}

package/dist-cms/packages/core/workspace/components/workspace-action/default/workspace-action.element.js

@@ -0,0 +1,179 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, html, property, state, when } from '../../../../../../external/lit/index.js';
+import { stringOrStringArrayIntersects } from '../../../../utils/index.js';
+import { UmbActionExecutedEvent } from '../../../../event/index.js';
+import { umbExtensionsRegistry } from '../../../../extension-registry/index.js';
+import { UmbExtensionsElementAndApiInitializer } from '../../../../../../libs/extension-api/index.js';
+import { UmbLitElement } from '../../../../lit-element/index.js';
+let UmbWorkspaceActionElement = class UmbWorkspaceActionElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this._isDisabled = false;
+        this._items = [];
+        this.#buttonStateResetTimeoutId = null;
+    }
+    #manifest;
+    #api;
+    set manifest(value) {
+        if (!value)
+            return;
+        const oldValue = this.#manifest;
+        if (oldValue !== value) {
+            this.#manifest = value;
+            this._href = value?.meta.href;
+            this._additionalOptions = value?.meta.additionalOptions;
+            this.#createAliases();
+        }
+    }
+    get manifest() {
+        return this.#manifest;
+    }
+    set api(api) {
+        this.#api = api;
+        this.#api?.getHref?.().then((href) => {
+            this._href = href ?? this.manifest?.meta.href;
+        });
+        this.#api?.hasAdditionalOptions?.().then((additionalOptions) => {
+            this._additionalOptions = additionalOptions ?? this.manifest?.meta.additionalOptions;
+        });
+        this.#observeIsDisabled();
+    }
+    get api() {
+        return this.#api;
+    }
+    #buttonStateResetTimeoutId;
+    /**
+     * Create a list of original and overwritten aliases of workspace actions for the action.
+     */
+    async #createAliases() {
+        if (!this.#manifest)
+            return;
+        const aliases = new Set();
+        if (this.#manifest) {
+            aliases.add(this.#manifest.alias);
+            // TODO: This works on one level for now, which will be enough for the current use case. However, you can overwrite the overwrites, so we need to make this recursive. Perhaps we could move this to the extensions initializer.
+            // Add overwrites so that we can show any previously registered actions on the original workspace action
+            if (this.#manifest.overwrites) {
+                const overwrites = Array.isArray(this.#manifest.overwrites)
+                    ? this.#manifest.overwrites
+                    : [this.#manifest.overwrites];
+                for (const alias of overwrites) {
+                    aliases.add(alias);
+                }
+            }
+        }
+        this.observeExtensions(Array.from(aliases));
+    }
+    async #onClick(event) {
+        if (this._href) {
+            event.stopPropagation();
+        }
+        // If its a link or has additional options, then we do not want to display state on the button. [NL]
+        if (!this._href) {
+            if (!this._additionalOptions) {
+                this._buttonState = 'waiting';
+            }
+            try {
+                const api = this._actionApi ?? this.#api;
+                if (!api)
+                    throw new Error('No api defined');
+                await api.execute();
+                this._buttonState = 'success';
+                this.#initButtonStateReset();
+            }
+            catch (reason) {
+                if (reason) {
+                    console.warn(reason);
+                }
+                this._buttonState = 'failed';
+                this.#initButtonStateReset();
+            }
+        }
+        this.dispatchEvent(new UmbActionExecutedEvent());
+    }
+    #observeIsDisabled() {
+        this.observe(this.#api?.isDisabled, (isDisabled) => {
+            this._isDisabled = isDisabled || false;
+        }, 'isDisabledObserver');
+    }
+    #initButtonStateReset() {
+        /* When the button has additional options, we do not show the waiting state.
+    Therefore, we need to ensure the button state is reset, so we are able to show the success state again. */
+        this.#clearButtonStateResetTimeout();
+        this.#buttonStateResetTimeoutId = window.setTimeout(() => {
+            this._buttonState = undefined;
+        }, 2000);
+    }
+    #clearButtonStateResetTimeout() {
+        if (this.#buttonStateResetTimeoutId !== null) {
+            clearTimeout(this.#buttonStateResetTimeoutId);
+            this.#buttonStateResetTimeoutId = null;
+        }
+    }
+    observeExtensions(aliases) {
+        this._extensionsController?.destroy();
+        this._extensionsController = new UmbExtensionsElementAndApiInitializer(this, umbExtensionsRegistry, 'workspaceActionMenuItem', (manifest) => [{ meta: manifest.meta }], (action) => stringOrStringArrayIntersects(action.forWorkspaceActions, aliases), (actions) => {
+            this._items = actions;
+        }, undefined);
+    }
+    #renderButton() {
+        const label = this.localize.string(this._buttonLabel || this.#manifest?.meta.label || this.#manifest?.name || '');
+        return html `
+			<uui-button
+				data-mark="workspace-action:${this.#manifest?.alias}"
+				color=${this.#manifest?.meta.color ?? 'default'}
+				look=${this.#manifest?.meta.look ?? 'default'}
+				label=${this._additionalOptions ? label + '…' : label}
+				.disabled=${this._isDisabled}
+				.href=${this._href}
+				.state=${this._buttonState}
+				@click=${this.#onClick}></uui-button>
+		`;
+    }
+    #renderActionMenu() {
+        return html `
+			<umb-workspace-action-menu
+				color=${this.#manifest?.meta.color ?? 'default'}
+				look=${this.#manifest?.meta.look ?? 'default'}
+				.items=${this._items}></umb-workspace-action-menu>
+		`;
+    }
+    render() {
+        return when(this._items.length, () => html `<uui-button-group>${this.#renderButton()}${this.#renderActionMenu()}</uui-button-group>`, () => this.#renderButton());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#clearButtonStateResetTimeout();
+    }
+};
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbWorkspaceActionElement.prototype, "manifest", null);
+__decorate([
+    property({ attribute: false })
+], UmbWorkspaceActionElement.prototype, "api", null);
+__decorate([
+    state()
+], UmbWorkspaceActionElement.prototype, "_buttonState", void 0);
+__decorate([
+    state()
+], UmbWorkspaceActionElement.prototype, "_additionalOptions", void 0);
+__decorate([
+    state()
+], UmbWorkspaceActionElement.prototype, "_href", void 0);
+__decorate([
+    state()
+], UmbWorkspaceActionElement.prototype, "_isDisabled", void 0);
+__decorate([
+    state()
+], UmbWorkspaceActionElement.prototype, "_items", void 0);
+UmbWorkspaceActionElement = __decorate([
+    customElement('umb-workspace-action')
+], UmbWorkspaceActionElement);
+export { UmbWorkspaceActionElement };
+export default UmbWorkspaceActionElement;

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

@@ -1,2 +1,3 @@
 export * from './common/index.js';
+export * from './default/index.js';
 export * from './workspace-action-base.controller.js';

package/dist-cms/packages/core/workspace/components/workspace-action/index.js

@@ -1,2 +1,3 @@
 export * from './common/index.js';
+export * from './default/index.js';
 export * from './workspace-action-base.controller.js';

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

@@ -24,7 +24,8 @@ let UmbWorkspaceActionMenuElement = class UmbWorkspaceActionMenuElement extends
     render() {
         if (!this.items?.length)
             return nothing;
-        return html `<uui-button
+        return html `
+			<uui-button
 				id="popover-trigger"
 				popovertarget="workspace-action-popover"
 				look="${this.look}"
@@ -43,7 +44,8 @@ let UmbWorkspaceActionMenuElement = class UmbWorkspaceActionMenuElement extends
 						${repeat(this.items, (ext) => ext.alias, (ext) => ext.component)}
 					</uui-scroll-container>
 				</umb-popover-layout>
-			</uui-popover-container>`;
+			</uui-popover-container>
+		`;
     }
     static { this.styles = [
         UmbTextStyles,

package/dist-cms/packages/core/workspace/components/workspace-action-menu-item/default/index.d.ts

@@ -0,0 +1 @@
+export * from './workspace-action-menu-item.element.js';

package/dist-cms/packages/core/workspace/components/workspace-action-menu-item/default/index.js

@@ -0,0 +1 @@
+export * from './workspace-action-menu-item.element.js';

package/dist-cms/packages/core/workspace/components/workspace-action-menu-item/default/workspace-action-menu-item.element.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { customElement, html, ifDefined, property, state, when } from '../../../../../../external/lit/index.js';
 import { UmbActionExecutedEvent } from '../../../../event/index.js';
-import { html, customElement, property, state, ifDefined, nothing } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../lit-element/index.js';
 let UmbWorkspaceActionMenuItemElement = class UmbWorkspaceActionMenuItemElement extends UmbLitElement {
     #api;
@@ -32,13 +32,11 @@ let UmbWorkspaceActionMenuItemElement = class UmbWorkspaceActionMenuItemElement
     render() {
         return html `
 			<uui-menu-item
-				label=${ifDefined(this.manifest?.meta.label ? this.localize.string(this.manifest.meta.label) : this.manifest?.name)}
+				label=${ifDefined(this.localize.string(this.manifest?.meta.label ?? this.manifest?.name))}
 				href=${ifDefined(this._href)}
-				@click-label=${this.#onClickLabel}
-				@click=${this.#onClick}>
-				${this.manifest?.meta.icon
-            ? html `<umb-icon slot="icon" name="${this.manifest?.meta.icon}"></umb-icon>`
-            : nothing}
+				@click=${this.#onClick}
+				@click-label=${this.#onClickLabel}>
+				${when(this.manifest?.meta.icon, (icon) => html `<umb-icon slot="icon" name=${icon}></umb-icon>`)}
 			</uui-menu-item>
 		`;
     }

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

@@ -1 +1,2 @@
+export * from './default/index.js';
 export * from './workspace-action-menu-item-base.controller.js';

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

@@ -1 +1,2 @@
+export * from './default/index.js';
 export * from './workspace-action-menu-item-base.controller.js';

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

@@ -57,7 +57,11 @@ let UmbWorkspaceBreadcrumbElement = class UmbWorkspaceBreadcrumbElement extends
     #getHref(structureItem) {
         if (structureItem.isFolder)
             return undefined;
-        return `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit/${structureItem.unique}`;
+        let href = `section/${this.#sectionContext?.getPathname()}`;
+        if (structureItem.unique) {
+            href += `/workspace/${structureItem.entityType}/edit/${structureItem.unique}`;
+        }
+        return href;
     }
     render() {
         const structure = this._isNew ? this._structure : this._structure.slice(0, -1);

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

@@ -11,12 +11,10 @@ import { UmbTextStyles } from '../../../../style/index.js';
 import { UmbVariantId } from '../../../../variant/index.js';
 import { UMB_APP_LANGUAGE_CONTEXT } from '../../../../../language/index.js';
 import { UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT } from '../../../../menu/index.js';
-import { UMB_SECTION_CONTEXT } from '../../../../section/index.js';
 let UmbWorkspaceVariantMenuBreadcrumbElement = class UmbWorkspaceVariantMenuBreadcrumbElement extends UmbLitElement {
-    #sectionContext;
     #workspaceContext;
     #appLanguageContext;
-    #structureContext;
+    #menuStructureContext;
     constructor() {
         super();
         this._name = '';
@@ -25,9 +23,6 @@ let UmbWorkspaceVariantMenuBreadcrumbElement = class UmbWorkspaceVariantMenuBrea
             this.#appLanguageContext = instance;
             this.#observeDefaultCulture();
         });
-        this.consumeContext(UMB_SECTION_CONTEXT, (instance) => {
-            this.#sectionContext = instance;
-        });
         this.consumeContext(UMB_VARIANT_WORKSPACE_CONTEXT, (instance) => {
             if (!instance)
                 return;
@@ -38,14 +33,14 @@ let UmbWorkspaceVariantMenuBreadcrumbElement = class UmbWorkspaceVariantMenuBrea
         this.consumeContext(UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT, (instance) => {
             if (!instance)
                 return;
-            this.#structureContext = instance;
+            this.#menuStructureContext = instance;
             this.#observeStructure();
         });
     }
     #observeStructure() {
-        if (!this.#structureContext || !this.#workspaceContext)
+        if (!this.#menuStructureContext || !this.#workspaceContext)
             return;
-        this.observe(this.#structureContext.structure, (value) => {
+        this.observe(this.#menuStructureContext.structure, (value) => {
             if (!this.#workspaceContext)
                 return;
             const unique = this.#workspaceContext.getUnique();
@@ -87,10 +82,7 @@ let UmbWorkspaceVariantMenuBreadcrumbElement = class UmbWorkspaceVariantMenuBrea
         return structureItem.variants?.[0]?.name ?? '(#general_unknown)';
     }
     #getHref(structureItem) {
-        if (structureItem.isFolder)
-            return undefined;
-        const workspaceBasePath = `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit`;
-        return `${workspaceBasePath}/${structureItem.unique}/${this._workspaceActiveVariantId?.culture}`;
+        return this.#menuStructureContext?.getItemHref(structureItem);
     }
     render() {
         return html `

package/dist-cms/packages/core/workspace/components/workspace-editor/workspace-editor.element.js

@@ -74,12 +74,14 @@ let UmbWorkspaceEditorElement = class UmbWorkspaceEditorElement extends UmbLitEl
     }
     #currentProvidedView;
     #createRoutes() {
-        let newRoutes = [];
+        const newRoutes = [];
         if (this._workspaceViews.length > 0) {
-            newRoutes = this._workspaceViews.map((context) => {
+            this._workspaceViews.forEach((context) => {
                 const manifest = context.manifest;
-                return {
-                    path: UMB_WORKSPACE_VIEW_PATH_PATTERN.generateLocal({ viewPathname: manifest.meta.pathname }),
+                const path = UMB_WORKSPACE_VIEW_PATH_PATTERN.generateLocal({ viewPathname: manifest.meta.pathname });
+                newRoutes.push({
+                    unique: manifest.alias,
+                    path,
                     component: () => createExtensionElement(manifest),
                     setup: (component) => {
                         if (this.#currentProvidedView !== context) {
@@ -91,7 +93,7 @@ let UmbWorkspaceEditorElement = class UmbWorkspaceEditorElement extends UmbLitEl
                             component.manifest = manifest;
                         }
                     },
-                };
+                });
             });
             // Duplicate first workspace and use it for the empty path scenario. [NL]
             newRoutes.push({ ...newRoutes[0], unique: newRoutes[0].path, path: '' });

package/dist-cms/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.js

@@ -13,6 +13,7 @@ import { UmbDataPathVariantQuery, umbBindToValidation } from '../../../validatio
 import { UMB_PROPERTY_DATASET_CONTEXT, isNameablePropertyDatasetContext } from '../../../property/index.js';
 import { UUIInputEvent } from '../../../../../external/uui/index.js';
 import { UMB_HINT_CONTEXT } from '../../../hint/index.js';
+import { observeMultiple } from '../../../../../libs/observable-api/index.js';
 let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVariantSelectorElement extends UmbLitElement {
     #splitViewContext;
     #datasetContext;
@@ -73,6 +74,20 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
             this._cultureVariantOptions = this._variantOptions.filter((variant) => variant.segment === null);
             this.#setReadOnlyCultures(workspaceContext);
         }, '_observeVariantOptions');
+        if (workspaceContext) {
+            this.observe(observeMultiple([
+                workspaceContext.variesByCulture,
+                workspaceContext.variesBySegment,
+                workspaceContext.variantOptions,
+            ]), ([variesByCulture, variesBySegment, variantOptions]) => {
+                if (variesByCulture === false && variesBySegment === true && variantOptions.length > 1) {
+                    this.#expandVariant(UmbVariantId.Create(variantOptions[0]));
+                }
+            }, '_observeExpandFirstVariantIfSegmentOnly');
+        }
+        else {
+            this.removeUmbControllerByAlias('_observeExpandFirstVariantIfSegmentOnly');
+        }
     }
     async #observeActiveVariants(workspaceContext) {
         this.observe(workspaceContext?.splitView.activeVariantsInfo, (activeVariants) => {
@@ -164,12 +179,12 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
         this._popoverElement.style.width = `${host.width}px`;
         // If the active variant is a segment then we expend the culture variant when the selector is opened.
         if (this.#isSegmentVariantOption(this._activeVariant)) {
-            const culture = this._cultureVariantOptions.find((variant) => {
+            const option = this._cultureVariantOptions.find((variant) => {
                 return variant.culture === this._activeVariant?.culture && variant.segment === null;
             });
-            if (!culture)
+            if (!option)
                 return;
-            const variantId = UmbVariantId.Create(culture);
+            const variantId = UmbVariantId.Create(option);
             this.#expandVariant(variantId);
         }
     }
@@ -254,7 +269,7 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
 								${this.#renderReadOnlyTag(this._activeVariant?.culture)}
 								<uui-symbol-expand .open=${this._variantSelectorOpen}></uui-symbol-expand>
 							</uui-button>
-							${!this._variantSelectorOpen ? this.#renderHintBadge(firstHintOnInactiveVariant) : nothing}
+							${!this._variantSelectorOpen ? this.#renderVariantSelectorHintBadge(firstHintOnInactiveVariant) : nothing}
 							${this._activeVariants.length > 1
                 ? html `
 										<uui-button slot="append" compact id="variant-close" @click=${this.#closeSplitView}>
@@ -285,10 +300,25 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
         const subVariantOptions = this.#getSegmentVariantOptionsForCulture(variantOption, variantId);
         const hint = this._hintMap.get(variantId.toString());
         const active = this.#isVariantActive(variantId);
+        const isExpanded = this.#isVariantExpanded(variantId);
+        let subHint;
+        if (!hint && !isExpanded) {
+            // Loop through the sub variants to find a hint if the culture variant does not have one.
+            for (const subVariant of subVariantOptions) {
+                const subVariantId = UmbVariantId.Create(subVariant);
+                const foundHint = this._hintMap.get(subVariantId.toString());
+                if (foundHint) {
+                    subHint = foundHint;
+                    break;
+                }
+            }
+        }
         return html `
 			<div class="variant culture-variant ${active ? 'selected' : ''}">
 				${this._variesBySegment && this.#isCreated(variantOption) && subVariantOptions.length > 0
-            ? html `<div class="expand-area">${this.#renderExpandToggle(variantId)}</div>`
+            ? html `<div class="expand-area">
+							${this.#renderExpandToggle(variantId)}${this.#renderSubHintBadge(!isExpanded ? subHint : undefined)}
+						</div>`
             : nothing}
 
 				<button
@@ -300,6 +330,7 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
 					<div class="variant-info">
 						<div class="variant-name">
 							${this.#getVariantDisplayName(variantOption)}${this.#renderReadOnlyTag(variantId.culture)}
+							${this.#renderHintBadge(!active ? hint : undefined)}
 						</div>
 						<div class="variant-details">
 							<span>${this._renderVariantDetails(variantOption)}</span>
@@ -307,20 +338,32 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
 					</div>
 					<div class="specs-info">${this.#getVariantSpecInfo(variantOption)}</div>
 				</button>
-				${this.#renderHintBadge(!active ? hint : undefined)} ${this.#renderSplitViewButton(variantOption)}
+				${this.#renderSplitViewButton(variantOption)}
 			</div>
-			${this.#isVariantExpanded(variantId)
-            ? html ` ${subVariantOptions.map((option) => this.#renderSegmentVariantOption(option))} `
-            : nothing}
+			${isExpanded ? html ` ${subVariantOptions.map((option) => this.#renderSegmentVariantOption(option))} ` : nothing}
 		`;
     }
-    #renderHintBadge(hint) {
+    #renderVariantSelectorHintBadge(hint) {
         if (!hint)
             return nothing;
         return html ` <umb-badge slot="append" .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
 			>${hint.text}</umb-badge
 		>`;
     }
+    #renderSubHintBadge(hint) {
+        if (!hint)
+            return nothing;
+        return html ` <umb-badge .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
+			>${hint.text}</umb-badge
+		>`;
+    }
+    #renderHintBadge(hint) {
+        if (!hint)
+            return nothing;
+        return html ` <umb-badge inline-mode .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
+			>${hint.text}</umb-badge
+		>`;
+    }
     #isCreated(variantOption) {
         return (variantOption.variant?.state &&
             variantOption.variant?.state !== 'NotCreated');
@@ -335,6 +378,8 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
     #renderSegmentVariantOption(variantOption) {
         const variantId = UmbVariantId.Create(variantOption);
         const notCreated = this.#isCreateMode(variantOption, variantId);
+        const hint = this._hintMap.get(variantId.toString());
+        const active = this.#isVariantActive(variantId);
         return html `
 			<div class="variant segment-variant ${this.#isVariantActive(variantId) ? 'selected' : ''}">
 				${notCreated ? nothing : html `<div class="expand-area"></div>`}
@@ -346,7 +391,7 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
 					${notCreated ? html `<uui-icon class="add-icon" name="icon-add"></uui-icon>` : nothing}
 					<div class="variant-info">
 						<div class="variant-name">
-							${this.#getVariantDisplayName(variantOption)}${this.#renderReadOnlyTag(variantId.culture)}
+							${this.#getVariantDisplayName(variantOption)}${this.#renderReadOnlyTag(variantId.culture)}${this.#renderHintBadge(!active ? hint : undefined)}
 						</div>
 						<div class="variant-details">
 							<span>${this._renderVariantDetails(variantOption)}</span>
@@ -369,7 +414,10 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
         if (this.#isSegmentVariantOption(variantOption)) {
             return variantOption?.segmentInfo?.name ?? this._labelDefault;
         }
-        return variantOption.variant?.name ?? variantOption.language.name;
+        if (variantOption.variant?.name && variantOption.variant?.name.trim() !== '') {
+            return variantOption.variant?.name;
+        }
+        return variantOption.language.name;
     }
     #getVariantSpecInfo(variantOption) {
         if (!variantOption) {
@@ -599,6 +647,10 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
 				font-size: var(--uui-type-small-size);
 				font-weight: 700;
 			}
+
+			umb-badge {
+				z-index: 2;
+			}
 		`,
     ]; }
 };