@siemens/element-ng 51.0.0 → 51.0.1

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/testing.js

@@ -1,11 +1,23 @@
+import { UnitTestTree } from '@angular-devkit/schematics/testing';
+const testAppCache = new Map();
 /**
  * Creates a sample workspace with two applications: 'app' (default) and 'second-app'
  */
 export const createTestApp = async (runner, appOptions = {}, files) => {
-    let tree = await createWorkspace(runner);
+    const cacheKey = JSON.stringify(appOptions);
+    let cachedTree = testAppCache.get(cacheKey);
+    if (!cachedTree) {
+        cachedTree = createBaseTestApp(runner, appOptions);
+        testAppCache.set(cacheKey, cachedTree);
+    }
+    const tree = new UnitTestTree((await cachedTree).branch());
     if (files) {
         addTestFiles(tree, files);
     }
+    return tree;
+};
+const createBaseTestApp = async (runner, appOptions) => {
+    let tree = await createWorkspace(runner);
     tree = await runner.runExternalSchematic('@schematics/angular', 'application', { name: 'app', ...appOptions }, tree);
     tree = await runner.runExternalSchematic('@schematics/angular', 'application', { name: 'second-app', ...appOptions }, tree);
     return tree;

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