@siemens/element-ng 51.0.0 → 51.1.0

package/schematics/migration.json

@@ -5,6 +5,11 @@
       "version": "51.0.0",
       "description": "Updates Siemens element to v51",
       "factory": "./ng-update/index#migrateToV51"
+    },
+    "migration-v51-0-1": {
+      "version": "51.0.1",
+      "description": "Renames Siemens Design Language color tokens to include the color group segment",
+      "factory": "./ng-update/index#migrateToV5101"
     }
   }
 }

package/schematics/migrations/data/css-custom-properties.js

@@ -1,3 +1,194 @@
+/** Color token suffixes that moved from `si.sys.<group>` to `si.sys.color.<group>`. */
+export const SYS_COLOR_TOKEN_NAMES = [
+    'background-0',
+    'background-1',
+    'background-2',
+    'background-3',
+    'background-4',
+    'background-accent',
+    'background-accent-active',
+    'background-accent-hover',
+    'background-accent-secondary',
+    'background-accent-secondary-active',
+    'background-accent-secondary-hover',
+    'background-active',
+    'background-caution',
+    'background-caution-active',
+    'background-caution-hover',
+    'background-caution-subtle',
+    'background-critical',
+    'background-critical-active',
+    'background-critical-hover',
+    'background-critical-subtle',
+    'background-danger',
+    'background-danger-active',
+    'background-danger-hover',
+    'background-danger-secondary',
+    'background-danger-subtle',
+    'background-hover',
+    'background-information',
+    'background-information-active',
+    'background-information-hover',
+    'background-information-subtle',
+    'background-inverse',
+    'background-neutral',
+    'background-neutral-active',
+    'background-neutral-hover',
+    'background-success',
+    'background-success-active',
+    'background-success-hover',
+    'background-success-subtle',
+    'background-warning',
+    'background-warning-active',
+    'background-warning-hover',
+    'background-warning-secondary',
+    'background-warning-subtle',
+    'border-1',
+    'border-2',
+    'border-3',
+    'border-4',
+    'border-accent',
+    'border-accent-active',
+    'border-accent-hover',
+    'border-caution',
+    'border-critical',
+    'border-danger',
+    'border-danger-secondary',
+    'border-information',
+    'border-inverse',
+    'border-neutral',
+    'border-success',
+    'border-warning',
+    'border-warning-secondary',
+    'code-1',
+    'code-2',
+    'code-3',
+    'code-4',
+    'code-5',
+    'code-6',
+    'code-7',
+    'code-8',
+    'code-9',
+    'code-10',
+    'code-11',
+    'code-12',
+    'data-categorical-1',
+    'data-categorical-2',
+    'data-categorical-3',
+    'data-categorical-4',
+    'data-categorical-5',
+    'data-categorical-6',
+    'data-categorical-7',
+    'data-categorical-8',
+    'data-categorical-9',
+    'data-categorical-10',
+    'data-categorical-11',
+    'data-categorical-12',
+    'data-categorical-13',
+    'data-categorical-14',
+    'data-categorical-15',
+    'data-categorical-16',
+    'data-categorical-17',
+    'data-rating-average',
+    'data-rating-bad',
+    'data-rating-excellent',
+    'data-rating-good',
+    'data-rating-poor',
+    'data-sequential-avocado-1',
+    'data-sequential-avocado-2',
+    'data-sequential-avocado-3',
+    'data-sequential-avocado-4',
+    'data-sequential-blue-1',
+    'data-sequential-blue-2',
+    'data-sequential-blue-3',
+    'data-sequential-blue-4',
+    'data-sequential-deep-blue-1',
+    'data-sequential-deep-blue-2',
+    'data-sequential-deep-blue-3',
+    'data-sequential-deep-blue-4',
+    'data-sequential-green-1',
+    'data-sequential-green-2',
+    'data-sequential-green-3',
+    'data-sequential-green-4',
+    'data-sequential-interactive-coral-1',
+    'data-sequential-interactive-coral-2',
+    'data-sequential-interactive-coral-3',
+    'data-sequential-interactive-coral-4',
+    'data-sequential-orange-1',
+    'data-sequential-orange-2',
+    'data-sequential-orange-3',
+    'data-sequential-orange-4',
+    'data-sequential-orchid-1',
+    'data-sequential-orchid-2',
+    'data-sequential-orchid-3',
+    'data-sequential-orchid-4',
+    'data-sequential-plum-1',
+    'data-sequential-plum-2',
+    'data-sequential-plum-3',
+    'data-sequential-plum-4',
+    'data-sequential-purple-1',
+    'data-sequential-purple-2',
+    'data-sequential-purple-3',
+    'data-sequential-purple-4',
+    'data-sequential-red-1',
+    'data-sequential-red-2',
+    'data-sequential-red-3',
+    'data-sequential-red-4',
+    'data-sequential-royal-blue-1',
+    'data-sequential-royal-blue-2',
+    'data-sequential-royal-blue-3',
+    'data-sequential-royal-blue-4',
+    'data-sequential-sand-1',
+    'data-sequential-sand-2',
+    'data-sequential-sand-3',
+    'data-sequential-sand-4',
+    'data-sequential-turquoise-1',
+    'data-sequential-turquoise-2',
+    'data-sequential-turquoise-3',
+    'data-sequential-turquoise-4',
+    'data-sequential-yellow-1',
+    'data-sequential-yellow-2',
+    'data-sequential-yellow-3',
+    'data-sequential-yellow-4',
+    'effects-backdrop',
+    'effects-focus',
+    'effects-logo',
+    'effects-shadow-1',
+    'effects-shadow-2',
+    'effects-shadow-3',
+    'effects-shadow-4',
+    'text-accent',
+    'text-accent-active',
+    'text-accent-hover',
+    'text-caution',
+    'text-critical',
+    'text-danger',
+    'text-disabled',
+    'text-information',
+    'text-inverse',
+    'text-on-accent',
+    'text-on-accent-secondary',
+    'text-on-accent-secondary-active',
+    'text-on-accent-secondary-hover',
+    'text-on-caution',
+    'text-on-critical',
+    'text-on-danger',
+    'text-on-danger-secondary',
+    'text-on-information',
+    'text-on-neutral',
+    'text-on-success',
+    'text-on-warning',
+    'text-on-warning-secondary',
+    'text-primary',
+    'text-secondary',
+    'text-success',
+    'text-warning'
+];
+export const SYS_COLOR_TOKEN_RENAMES = SYS_COLOR_TOKEN_NAMES.flatMap(name => [
+    { replace: `$si-sys-${name}`, replaceWith: `$si-sys-color-${name}` },
+    { replace: `--si-sys-${name}`, replaceWith: `--si-sys-color-${name}` },
+    { replace: `si-sys-${name}`, replaceWith: `si-sys-color-${name}` }
+]);
 export const CSS_CUSTOM_PROPERTIES_MIGRATION = [
     {
         replace: '--si-feedback-icon-offset',
@@ -157,47 +348,47 @@ export const CSS_CUSTOM_PROPERTIES_MIGRATION = [
     },
     {
         replace: '$box-shadow',
-        replaceWith: '$si-sys-effects-shadow-2'
+        replaceWith: '$si-sys-color-effects-shadow-2'
     },
     {
         replace: '$box-shadow-sm',
-        replaceWith: '$si-sys-effects-shadow-1'
+        replaceWith: '$si-sys-color-effects-shadow-1'
     },
     {
         replace: '$box-shadow-lg',
-        replaceWith: '$si-sys-effects-shadow-3'
+        replaceWith: '$si-sys-color-effects-shadow-3'
     },
     {
         replace: '$popover-box-shadow',
-        replaceWith: '$si-sys-effects-shadow-3'
+        replaceWith: '$si-sys-color-effects-shadow-3'
     },
     {
         replace: '$modal-content-box-shadow-xs',
-        replaceWith: '$si-sys-effects-shadow-3'
+        replaceWith: '$si-sys-color-effects-shadow-3'
     },
     {
         replace: '$modal-content-box-shadow-sm-up',
-        replaceWith: '$si-sys-effects-shadow-2'
+        replaceWith: '$si-sys-color-effects-shadow-2'
     },
     {
         replace: '$thumbnail-box-shadow',
-        replaceWith: '$si-sys-effects-shadow-1'
+        replaceWith: '$si-sys-color-effects-shadow-1'
     },
     {
         replace: '$element-elevation-1',
-        replaceWith: '$si-sys-effects-shadow-1'
+        replaceWith: '$si-sys-color-effects-shadow-1'
     },
     {
         replace: '$element-elevation-2',
-        replaceWith: '$si-sys-effects-shadow-2'
+        replaceWith: '$si-sys-color-effects-shadow-2'
     },
     {
         replace: '$element-elevation-3',
-        replaceWith: '$si-sys-effects-shadow-3'
+        replaceWith: '$si-sys-color-effects-shadow-3'
     },
     {
         replace: '$element-elevation-4',
-        replaceWith: '$si-sys-effects-shadow-4'
+        replaceWith: '$si-sys-color-effects-shadow-4'
     },
     ...['font-size', 'line-height', 'font-weight'].flatMap(property => [
         {
@@ -220,5 +411,6 @@ export const CSS_CUSTOM_PROPERTIES_MIGRATION = [
             replace: `$si-${property}-display-bold`,
             replaceWith: `$si-${property}-display-lg-sbold`
         }
-    ])
+    ]),
+    ...SYS_COLOR_TOKEN_RENAMES
 ];

package/schematics/migrations/data/element-migration-data.js

@@ -6,7 +6,7 @@ import { ATTRIBUTE_SELECTORS_MIGRATION } from './attribute-selectors.js';
 import { CLASS_MEMBER_REPLACEMENTS_MIGRATION } from './class-member-replacement.js';
 import { COMPONENT_PROPERTY_NAMES_MIGRATION } from './component-property-names.js';
 import { COMPONENT_PROPERTY_TO_CHILD_MIGRATION } from './component-property-to-child.js';
-import { CSS_CUSTOM_PROPERTIES_MIGRATION } from './css-custom-properties.js';
+import { CSS_CUSTOM_PROPERTIES_MIGRATION, SYS_COLOR_TOKEN_RENAMES } from './css-custom-properties.js';
 import { ELEMENT_CLASS_CHANGES_MIGRATION } from './element-class-changes.js';
 import { ELEMENT_SELECTORS_MIGRATION } from './element-selectors.js';
 import { PROVIDER_FUNCTION_REMOVALS_MIGRATION } from './provider-function-removals.js';
@@ -24,3 +24,15 @@ export const getElementMigrationData = () => ({
     symbolRemovalChanges: SYMBOL_REMOVALS_MIGRATION,
     symbolRenamingChanges: SYMBOL_RENAMING_MIGRATION
 });
+export const getColorTokenRenameMigrationData = () => ({
+    attributeSelectorChanges: [],
+    classMemberReplacementChanges: [],
+    componentPropertyNameChanges: [],
+    cssCustomPropertyChanges: SYS_COLOR_TOKEN_RENAMES,
+    componentPropertyToChildChanges: [],
+    elementClassChanges: [],
+    elementSelectorChanges: [],
+    providerFunctionRemovalChanges: [],
+    symbolRemovalChanges: [],
+    symbolRenamingChanges: []
+});

package/schematics/migrations/data/index.js

@@ -1 +1 @@
-export { getElementMigrationData } from './element-migration-data.js';
+export { getColorTokenRenameMigrationData, getElementMigrationData } from './element-migration-data.js';

package/schematics/ng-update/index.js

@@ -3,3 +3,4 @@
  * SPDX-License-Identifier: MIT
  */
 export { migrateToV51 } from './migrate-to-v51.js';
+export { migrateToV5101 } from './migrate-to-v51-0-1.js';

package/schematics/ng-update/migrate-to-v51-0-1.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { getColorTokenRenameMigrationData } from '../migrations/data/index.js';
+import { elementMigrationRule } from '../migrations/element-migration/element-migration.js';
+export const migrateToV5101 = () => {
+    return (tree, context) => {
+        context.logger.info('🚀 Starting color token rename for v51.0.1...');
+        return elementMigrationRule({ path: '/' }, getColorTokenRenameMigrationData())(tree, context);
+    };
+};

package/schematics/utils/index.js

@@ -8,5 +8,4 @@ export * from './ts-compiler-host.js';
 export * from './schematics-file-system.js';
 export * from './template-utils.js';
 export * from './template-edit-utils.js';
-export * from './testing.js';
 export * from './ts-utils.js';

package/template-i18n.json

@@ -214,6 +214,7 @@
   "SI_MARKDOWN_CALLOUT.TIP": "Tip",
   "SI_NAVBAR.OPEN_LAUNCHPAD": "Switch app",
   "SI_NAVBAR.TOGGLE_NAVIGATION": "Show navigation",
+  "SI_NAVBAR_VERTICAL.BACK": "Back",
   "SI_NAVBAR_VERTICAL.COLLAPSE": "Collapse",
   "SI_NAVBAR_VERTICAL.EXPAND": "Expand",
   "SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER": "Search…",

package/types/siemens-element-ng-auto-collapsable-list.d.ts

@@ -15,7 +15,8 @@ declare class SiAutoCollapsableListMeasurable {
      *       .pipe(
      *         map(size => size.width),
      *         distinctUntilChanged(),
-     *         shareReplay(1)
+     *         takeUntilDestroyed(),
+     *         shareReplay({ bufferSize: 1, refCount: true })
      *       )
      * ```
      */

package/types/siemens-element-ng-avatar.d.ts

@@ -9,7 +9,7 @@ import { TranslatableString } from '@siemens/element-translate-ng/translate';
  */
 declare class SiAvatarBackgroundColorDirective implements OnChanges {
     /**
-     * The desired color index from $si-sys-data-categorical-* color tokens. This can be set to any kind of
+     * The desired color index from $si-sys-color-data-categorical-* color tokens. This can be set to any kind of
      * positive integer that is then mapped to a color index.
      * A better way to set a pseudo-random color is to set {@link autoColor} to `true`.
      *

package/types/siemens-element-ng-navbar-vertical-next.d.ts

@@ -45,6 +45,16 @@ declare class SiNavbarVerticalNextGroupTriggerDirective {
      * @internal
      */
     readonly flyout: _angular_core.WritableSignal<boolean>;
+    /** `true` when this group is currently rendered as a mobile flat group.
+     * @internal
+     */
+    readonly flatGroupActive: _angular_core.Signal<boolean>;
+    /**
+     * Whether the group is currently revealed to the user, taking the active
+     * rendering mode into account. Used for `aria-expanded`.
+     * @internal
+     */
+    readonly ariaExpanded: _angular_core.Signal<boolean>;
     /** `true` when this group contains the active route. Set by the group component.
      * @internal
      */
@@ -56,6 +66,7 @@ declare class SiNavbarVerticalNextGroupTriggerDirective {
     readonly flyoutMode: _angular_core.Signal<boolean>;
     private flyoutOutsideClickSubscription?;
     private readonly viewContainer;
+    private readonly elementRef;
     private readonly overlay;
     private readonly destroyRef;
     private readonly injector;
@@ -66,6 +77,8 @@ declare class SiNavbarVerticalNextGroupTriggerDirective {
     constructor();
     /** @internal */
     hideFlyout(): void;
+    /** @internal */
+    focus(): void;
     protected triggered(): void;
     private toggleFlyout;
     private attachInline;
@@ -127,6 +140,7 @@ declare class SiNavbarVerticalNextItemComponent implements OnInit {
      * Formats badge value to limit display to "+99" for numbers greater than 99
      */
     protected readonly formattedBadge: _angular_core.Signal<string>;
+    protected readonly toggleIcon: _angular_core.Signal<string>;
     /** Active via override or router link — excludes group state.
      * @internal
      */
@@ -235,6 +249,20 @@ declare class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
     private injector;
     protected readonly ready: _angular_core.WritableSignal<boolean>;
     protected readonly smallScreen: _angular_core.WritableSignal<boolean>;
+    private readonly mobileScreen;
+    /**
+     * `true` when triggering a group should open the mobile flat group
+     * instead of inline/flyout. Requires `alwaysFlyout` and a viewport width at
+     * or below {@link BOOTSTRAP_BREAKPOINTS.smMinimum}, 576px. Collapsing the
+     * drawer on mobile must not reset the open flat group, so this stays `true`
+     * regardless of `collapsed`.
+     * @internal
+     */
+    readonly flatMode: _angular_core.Signal<boolean>;
+    /** Id of the group currently shown as a mobile flat group.
+     * @internal
+     */
+    readonly openFlatGroupId: _angular_core.WritableSignal<string | undefined>;
     /** Chip menu sub-component; present only while the parent template renders it.
      * @internal
      */
@@ -286,6 +314,10 @@ declare class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
     collapse(): void;
     /** @internal */
     groupStateChanged(stateId: string | undefined, expanded: boolean): void;
+    /** Closes the open mobile flat group.
+     * @internal
+     */
+    closeFlatGroup(): void;
     protected saveUIState(): void;
     /** @internal */
     itemTriggered(): void;
@@ -356,14 +388,29 @@ declare class SiNavbarVerticalNextFooterItemsComponent {
 
 /** @experimental */
 declare class SiNavbarVerticalNextGroupComponent {
+    protected readonly icons: Record<"elementLeft2", string>;
     protected readonly navbar: _siemens_element_ng_navbar_vertical_next.SiNavbarVerticalNextComponent;
     protected readonly groupTrigger: SiNavbarVerticalNextGroupTriggerDirective;
+    protected readonly triggerItem: SiNavbarVerticalNextItemComponent;
+    protected readonly flatGroupTitleId: string;
+    /**
+     * Back button text for flat groups.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.BACK:Back`)
+     * ```
+     */
+    readonly ariaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     private readonly routerLinkActive;
+    private readonly focusTrap;
+    private wasFlatGroupActive;
     protected readonly visible: _angular_core.Signal<boolean>;
     constructor();
     protected close(): void;
+    private updateFlatGroupFocus;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiNavbarVerticalNextGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiNavbarVerticalNextGroupComponent, "si-navbar-vertical-next-group", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiNavbarVerticalNextGroupComponent, "si-navbar-vertical-next-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** @experimental */

package/types/siemens-element-ng-notification-item.d.ts

@@ -8,7 +8,6 @@ import { TranslatableString } from '@siemens/element-translate-ng/translate';
  * @param type - The type of the link, always 'router-link'.
  * @param routerLink - The router link to navigate to.
  * @param extras - Optional navigation extras for the router.
- * @deprecated Use the CSS-based list item component instead.
  */
 interface NotificationItemRouterLink {
     type: 'router-link';
@@ -20,7 +19,6 @@ interface NotificationItemRouterLink {
  * @param type - The type of the link, always 'link'.
  * @param href - The URL to navigate to.
  * @param target - Optional target attribute for the link.
- * @deprecated Use the CSS-based list item component instead.
  */
 interface NotificationItemLink {
     type: 'link';
@@ -31,7 +29,6 @@ interface NotificationItemLink {
  * Base interface for notification item actions.
  * @param ariaLabel - The ARIA label for accessibility.
  * @param icon - The icon to display for the action.
- * @deprecated Use the CSS-based list item component instead.
  */
 interface NotificationItemBase {
     ariaLabel: TranslatableString;
@@ -54,7 +51,6 @@ interface NotificationItemActionCircleButton extends NotificationItemBase {
  * @param type - The type of the action, always 'action-icon-button'.
  * @param customClass - Optional custom CSS class for styling.
  * @param action - The action to perform when the button is clicked.
- * @deprecated Use the CSS-based list item component instead.
  */
 interface NotificationItemActionIconButton extends NotificationItemBase {
     type: 'action-icon-button';
@@ -66,7 +62,6 @@ interface NotificationItemActionIconButton extends NotificationItemBase {
  * @param type - The type of the link, always 'router-link'.
  * @param routerLink - The router link to navigate to.
  * @param extras - Optional navigation extras for the router.
- * @deprecated Use the CSS-based list item component instead.
  */
 interface NotificationItemRouterLinkIcon extends NotificationItemBase {
     type: 'router-link';
@@ -78,7 +73,6 @@ interface NotificationItemRouterLinkIcon extends NotificationItemBase {
  * @param type - The type of the link, always 'link'.
  * @param href - The URL to navigate to.
  * @param target - Optional target attribute for the link.
- * @deprecated Use the CSS-based list item component instead.
  */
 interface NotificationItemLinkIcon extends NotificationItemBase {
     type: 'link';
@@ -90,7 +84,6 @@ interface NotificationItemLinkIcon extends NotificationItemBase {
  * @param type - The type of the action, always 'action-button'.
  * @param label - The label to display on the button.
  * @param action - The action to perform when the button is clicked.
- * @deprecated Use the CSS-based list item component instead.
  */
 interface NotificationItemActionButton {
     type: 'action-button';
@@ -101,7 +94,6 @@ interface NotificationItemActionButton {
  * Interface for a menu in a notification item.
  * @param type - The type of the action, always 'menu'.
  * @param menuItems - The menu items to display in the menu.
- * @deprecated Use the CSS-based list item component instead.
  */
 interface NotificationItemMenu {
     type: 'menu';
@@ -109,20 +101,16 @@ interface NotificationItemMenu {
 }
 /**
  * Union type for quick actions in a notification item.
- * @deprecated Use the CSS-based list item component instead.
  */
 type NotificationItemQuickAction = NotificationItemActionCircleButton | NotificationItemActionIconButton | NotificationItemLinkIcon | NotificationItemRouterLinkIcon;
 /**
  * Union type for primary actions in a notification item.
- * @deprecated Use the CSS-based list item component instead.
  */
 type NotificationItemPrimaryAction = NotificationItemActionCircleButton | NotificationItemActionIconButton | NotificationItemLinkIcon | NotificationItemRouterLinkIcon | NotificationItemMenu | NotificationItemActionButton;
 /**
  * This component represents a single notification that can be used within notification
  * centers, popovers, or other containers. It supports various action types including
  * router links, standard links, action buttons, and menus.
- *
- * @deprecated Use the CSS-based list item component instead.
  */
 declare class SiNotificationItemComponent {
     protected readonly icons: Record<"elementOptionsVertical", string>;

package/types/siemens-element-ng-translate.d.ts

@@ -216,6 +216,7 @@ interface SiTranslatableKeys {
     'SI_MARKDOWN_CALLOUT.TIP'?: string;
     'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
     'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;
+    'SI_NAVBAR_VERTICAL.BACK'?: string;
     'SI_NAVBAR_VERTICAL.COLLAPSE'?: string;
     'SI_NAVBAR_VERTICAL.EXPAND'?: string;
     'SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER'?: string;