@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/schematics/migration.json

@@ -1,10 +1,10 @@
 {
   "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
-    "migration-v49": {
-      "version": "49.0.0",
-      "description": "Updates Siemens element to v49",
-      "factory": "./ng-update/index#migrateToV49"
+    "migration-v51": {
+      "version": "51.0.0",
+      "description": "Updates Siemens element to v51",
+      "factory": "./ng-update/index#migrateToV51"
     }
   }
 }

package/schematics/migrations/data/class-member-replacement.js

@@ -2,22 +2,4 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-export const CLASS_MEMBER_REPLACEMENTS_MIGRATION = [
-    {
-        module: /@(siemens|simpl)\/element-ng(\/resize-observer)?/,
-        typeNames: ['SiResponsiveContainerDirective'],
-        propertyReplacements: [
-            { property: 'isXs', replacement: '${expression}.xs()' },
-            { property: 'isSm', replacement: '${expression}.sm()' },
-            { property: 'isMd', replacement: '${expression}.md()' },
-            { property: 'isLg', replacement: '${expression}.lg()' },
-            { property: 'isXl', replacement: '${expression}.xl()' },
-            { property: 'isXxl', replacement: '${expression}.xxl()' }
-        ]
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/modal)?/,
-        typeNames: ['ModalOptions'],
-        propertyReplacements: [{ property: 'initialState', replacement: '${expression}.inputValues' }]
-    }
-];
+export const CLASS_MEMBER_REPLACEMENTS_MIGRATION = [];

package/schematics/migrations/data/component-property-names.js

@@ -1,25 +1 @@
-export const COMPONENT_PROPERTY_NAMES_MIGRATION = [
-    // Input name changes
-    // v48 to v49
-    {
-        module: /@(siemens|simpl)\/element-ng/,
-        elementSelector: 'si-filtered-search',
-        propertyMappings: [{ replace: 'readonly', replaceWith: 'disabled' }]
-    },
-    {
-        module: /@(siemens|simpl)\/charts-ng/,
-        elementSelector: 'si-chart-gauge',
-        propertyMappings: [
-            { replace: 'numberOfDecimals', replaceWith: ['minNumberOfDecimals', 'maxNumberOfDecimals'] }
-        ]
-    },
-    {
-        module: /@(siemens|simpl)\/element-ng(\/(info-page|unauthorized-page))?/,
-        elementSelector: 'si-unauthorized-page',
-        propertyMappings: [
-            { replace: 'heading', replaceWith: 'titleText' },
-            { replace: 'subHeading', replaceWith: 'copyText' },
-            { replace: 'description', replaceWith: 'instructions' }
-        ]
-    }
-];
+export const COMPONENT_PROPERTY_NAMES_MIGRATION = [];

package/schematics/migrations/data/component-property-to-child.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+export const COMPONENT_PROPERTY_TO_CHILD_MIGRATION = [
+    {
+        parentElementSelector: 'si-map',
+        childElementSelector: 'si-map-tooltip',
+        propertyName: 'moreText'
+    }
+];

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

@@ -0,0 +1,224 @@
+export const CSS_CUSTOM_PROPERTIES_MIGRATION = [
+    {
+        replace: '--si-feedback-icon-offset',
+        replaceWith: '--si-feedback-icon-size'
+    },
+    {
+        replace: '--element-base-input-experimental',
+        replaceWith: '--element-base-input'
+    },
+    {
+        replace: '$element-base-input-experimental',
+        replaceWith: '$element-base-input'
+    },
+    {
+        replace: '$si-font-size-h1-black',
+        replaceWith: '$si-font-size-h1-bold'
+    },
+    {
+        replace: '$si-font-size-title-1-bold',
+        replaceWith: '$si-font-size-h4-bold'
+    },
+    {
+        replace: '$si-font-size-title-1',
+        replaceWith: '$si-font-size-h4'
+    },
+    {
+        replace: '$si-font-size-title-2-bold',
+        replaceWith: '$si-font-size-h5-bold'
+    },
+    {
+        replace: '$si-font-size-title-2',
+        replaceWith: '$si-font-size-h5'
+    },
+    {
+        replace: '$si-font-size-body-1',
+        replaceWith: '$si-font-size-body-lg'
+    },
+    {
+        replace: '$si-font-size-body-2',
+        replaceWith: '$si-font-size-body'
+    },
+    {
+        replace: '$si-font-size-caption-1',
+        replaceWith: '$si-font-size-caption'
+    },
+    {
+        replace: '$si-font-size-display-1',
+        replaceWith: '$si-font-size-display-xl'
+    },
+    {
+        replace: '$si-font-size-display-2',
+        replaceWith: '$si-font-size-display-lg'
+    },
+    {
+        replace: '$si-font-size-display-3',
+        replaceWith: '$si-font-size-display-bold'
+    },
+    {
+        replace: '$si-font-size-display-4',
+        replaceWith: '$si-font-size-display'
+    },
+    {
+        replace: '$si-line-height-h1-black',
+        replaceWith: '$si-line-height-h1-bold'
+    },
+    {
+        replace: '$si-line-height-title-1-bold',
+        replaceWith: '$si-line-height-h4-bold'
+    },
+    {
+        replace: '$si-line-height-title-1',
+        replaceWith: '$si-line-height-h4'
+    },
+    {
+        replace: '$si-line-height-title-2-bold',
+        replaceWith: '$si-line-height-h5-bold'
+    },
+    {
+        replace: '$si-line-height-title-2',
+        replaceWith: '$si-line-height-h5'
+    },
+    {
+        replace: '$si-line-height-body-1',
+        replaceWith: '$si-line-height-body-lg'
+    },
+    {
+        replace: '$si-line-height-body-2',
+        replaceWith: '$si-line-height-body'
+    },
+    {
+        replace: '$si-line-height-caption-1',
+        replaceWith: '$si-line-height-caption'
+    },
+    {
+        replace: '$si-line-height-display-1',
+        replaceWith: '$si-line-height-display-xl'
+    },
+    {
+        replace: '$si-line-height-display-2',
+        replaceWith: '$si-line-height-display-lg'
+    },
+    {
+        replace: '$si-line-height-display-3',
+        replaceWith: '$si-line-height-display-bold'
+    },
+    {
+        replace: '$si-line-height-display-4',
+        replaceWith: '$si-line-height-display'
+    },
+    {
+        replace: '$si-font-weight-h1-black',
+        replaceWith: '$si-font-weight-h1-bold'
+    },
+    {
+        replace: '$si-font-weight-title-1-bold',
+        replaceWith: '$si-font-weight-h4-bold'
+    },
+    {
+        replace: '$si-font-weight-title-1',
+        replaceWith: '$si-font-weight-h4'
+    },
+    {
+        replace: '$si-font-weight-title-2-bold',
+        replaceWith: '$si-font-weight-h5-bold'
+    },
+    {
+        replace: '$si-font-weight-title-2',
+        replaceWith: '$si-font-weight-h5'
+    },
+    {
+        replace: '$si-font-weight-body-1',
+        replaceWith: '$si-font-weight-body-lg'
+    },
+    {
+        replace: '$si-font-weight-body-2',
+        replaceWith: '$si-font-weight-body'
+    },
+    {
+        replace: '$si-font-weight-caption-1',
+        replaceWith: '$si-font-weight-caption'
+    },
+    {
+        replace: '$si-font-weight-display-1',
+        replaceWith: '$si-font-weight-display-xl'
+    },
+    {
+        replace: '$si-font-weight-display-2',
+        replaceWith: '$si-font-weight-display-lg'
+    },
+    {
+        replace: '$si-font-weight-display-3',
+        replaceWith: '$si-font-weight-display-bold'
+    },
+    {
+        replace: '$si-font-weight-display-4',
+        replaceWith: '$si-font-weight-display'
+    },
+    {
+        replace: '$box-shadow',
+        replaceWith: '$si-sys-effects-shadow-2'
+    },
+    {
+        replace: '$box-shadow-sm',
+        replaceWith: '$si-sys-effects-shadow-1'
+    },
+    {
+        replace: '$box-shadow-lg',
+        replaceWith: '$si-sys-effects-shadow-3'
+    },
+    {
+        replace: '$popover-box-shadow',
+        replaceWith: '$si-sys-effects-shadow-3'
+    },
+    {
+        replace: '$modal-content-box-shadow-xs',
+        replaceWith: '$si-sys-effects-shadow-3'
+    },
+    {
+        replace: '$modal-content-box-shadow-sm-up',
+        replaceWith: '$si-sys-effects-shadow-2'
+    },
+    {
+        replace: '$thumbnail-box-shadow',
+        replaceWith: '$si-sys-effects-shadow-1'
+    },
+    {
+        replace: '$element-elevation-1',
+        replaceWith: '$si-sys-effects-shadow-1'
+    },
+    {
+        replace: '$element-elevation-2',
+        replaceWith: '$si-sys-effects-shadow-2'
+    },
+    {
+        replace: '$element-elevation-3',
+        replaceWith: '$si-sys-effects-shadow-3'
+    },
+    {
+        replace: '$element-elevation-4',
+        replaceWith: '$si-sys-effects-shadow-4'
+    },
+    ...['font-size', 'line-height', 'font-weight'].flatMap(property => [
+        {
+            replace: `$si-${property}-h1-bold`,
+            replaceWith: `$si-${property}-h1`
+        },
+        {
+            replace: `$si-${property}-h4-bold`,
+            replaceWith: `$si-${property}-h4`
+        },
+        {
+            replace: `$si-${property}-body-lg-bold`,
+            replaceWith: `$si-${property}-body-lg-sbold`
+        },
+        {
+            replace: `$si-${property}-caption`,
+            replaceWith: `$si-${property}-body-sm`
+        },
+        {
+            replace: `$si-${property}-display-bold`,
+            replaceWith: `$si-${property}-display-lg-sbold`
+        }
+    ])
+];

package/schematics/migrations/data/element-class-changes.js

@@ -3,30 +3,128 @@
  * SPDX-License-Identifier: MIT
  */
 export const ELEMENT_CLASS_CHANGES_MIGRATION = [
-    // btn-circle with btn-sm should have btn-sm removed
+    ...[
+        ['bg-primary', 'background-accent', ['badge']],
+        ['bg-secondary', 'background-neutral', ['badge']],
+        ['bg-tertiary', 'background-4'],
+        ['bg-success', 'background-success', ['badge']],
+        ['bg-info', 'background-information', ['badge']],
+        ['bg-warning', 'background-warning', ['badge']],
+        ['bg-danger', 'background-danger', ['badge']],
+        ['bg-base-0', 'background-0'],
+        ['bg-base-1', 'background-1'],
+        ['bg-base-2', 'background-2'],
+        ['bg-base-3', 'background-3'],
+        ['bg-base-4', 'background-4'],
+        ['bg-base-info', 'background-information-subtle'],
+        ['bg-base-success', 'background-success-subtle'],
+        ['bg-base-caution', 'background-caution-subtle'],
+        ['bg-base-warning', 'background-warning-subtle'],
+        ['bg-base-danger', 'background-danger-subtle'],
+        ['bg-base-critical', 'background-critical-subtle'],
+        ['bg-base-translucent-1', 'effects-backdrop'],
+        ['bg-base-translucent-2', 'background-inverse'],
+        ['text-primary', 'text-accent'],
+        ['text-body', 'text-primary'],
+        ['text-tertiary', 'text-disabled'],
+        ['text-muted', 'text-disabled'],
+        ['text-info', 'text-information'],
+        ['shadow', 'shadow-2'],
+        ['shadow-sm', 'shadow-1'],
+        ['shadow-lg', 'shadow-3'],
+        ['elevation-none', 'shadow-none'],
+        ['elevation-1', 'shadow-1'],
+        ['elevation-2', 'shadow-2'],
+        ['elevation-3', 'shadow-3'],
+        ['elevation-4', 'shadow-4']
+    ].map(([oldClass, newClass, excludedClasses]) => ({
+        requiredClasses: [oldClass],
+        excludedClasses,
+        removeClasses: [oldClass],
+        addClasses: [newClass]
+    })),
+    // btn-ghost now represents the primary ghost style; old btn-ghost (tertiary ghost) must become btn-tertiary-ghost
     {
-        requiredClasses: ['btn', 'btn-circle', 'btn-sm'],
-        removeClasses: ['btn-sm'],
-        addClasses: []
+        requiredClasses: ['btn-ghost'],
+        removeClasses: ['btn-ghost'],
+        addClasses: ['btn-tertiary-ghost']
     },
-    // btn-circle with btn-xs should migrate to btn-sm
+    // btn-primary-ghost (transitional class from v49.5.0) must become btn-ghost
     {
-        requiredClasses: ['btn', 'btn-circle', 'btn-xs'],
-        removeClasses: ['btn-xs'],
-        addClasses: ['btn-sm']
+        requiredClasses: ['btn-primary-ghost'],
+        removeClasses: ['btn-primary-ghost'],
+        addClasses: ['btn-ghost']
     },
-    // btn-circle without size modifier should get btn-lg
     {
-        requiredClasses: ['btn', 'btn-circle'],
-        excludedClasses: ['btn-lg', 'btn-sm', 'btn-xs'],
+        elementSelector: 'si-select',
+        requiredClasses: [],
+        excludedClasses: ['form-control', 'btn'],
         removeClasses: [],
-        addClasses: ['btn-lg']
+        addClasses: ['btn', 'btn-ghost']
     },
-    // Non-circle buttons with btn-xs should migrate to btn-sm
     {
-        requiredClasses: ['btn', 'btn-xs'],
-        excludedClasses: ['btn-circle'],
-        removeClasses: ['btn-xs'],
-        addClasses: ['btn-sm']
-    }
+        requiredClasses: ['si-h1-black'],
+        removeClasses: ['si-h1-black'],
+        addClasses: ['si-h1']
+    },
+    {
+        requiredClasses: ['si-title-1-bold'],
+        removeClasses: ['si-title-1-bold'],
+        addClasses: ['si-h4']
+    },
+    {
+        requiredClasses: ['si-title-1'],
+        removeClasses: ['si-title-1'],
+        addClasses: ['si-h4']
+    },
+    {
+        requiredClasses: ['si-title-2-bold'],
+        removeClasses: ['si-title-2-bold'],
+        addClasses: ['si-h5-bold']
+    },
+    {
+        requiredClasses: ['si-title-2'],
+        removeClasses: ['si-title-2'],
+        addClasses: ['si-h5']
+    },
+    {
+        requiredClasses: ['si-body-1'],
+        removeClasses: ['si-body-1'],
+        addClasses: ['si-body-lg']
+    },
+    {
+        requiredClasses: ['si-body-2'],
+        removeClasses: ['si-body-2'],
+        addClasses: ['si-body']
+    },
+    {
+        requiredClasses: ['si-display-1'],
+        removeClasses: ['si-display-1'],
+        addClasses: ['si-display-xl']
+    },
+    {
+        requiredClasses: ['si-display-2'],
+        removeClasses: ['si-display-2'],
+        addClasses: ['si-display-lg']
+    },
+    {
+        requiredClasses: ['si-display-3'],
+        removeClasses: ['si-display-3'],
+        addClasses: ['si-display-lg-sbold']
+    },
+    {
+        requiredClasses: ['si-display-4'],
+        removeClasses: ['si-display-4'],
+        addClasses: ['si-display']
+    },
+    ...[
+        ['si-h1-bold', 'si-h1'],
+        ['si-h4-bold', 'si-h4'],
+        ['si-caption', 'si-body-sm'],
+        ['si-display-bold', 'si-display-lg-sbold']
+    ].map(([oldClass, newClass]) => ({
+        requiredClasses: [oldClass],
+        removeClasses: [oldClass],
+        addClasses: [newClass]
+    }))
 ];

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

@@ -5,16 +5,22 @@
 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 { 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';
 import { SYMBOL_REMOVALS_MIGRATION } from './symbol-removals.js';
 import { SYMBOL_RENAMING_MIGRATION } from './symbol-renaming.js';
 export const getElementMigrationData = () => ({
     attributeSelectorChanges: ATTRIBUTE_SELECTORS_MIGRATION,
     classMemberReplacementChanges: CLASS_MEMBER_REPLACEMENTS_MIGRATION,
     componentPropertyNameChanges: COMPONENT_PROPERTY_NAMES_MIGRATION,
+    cssCustomPropertyChanges: CSS_CUSTOM_PROPERTIES_MIGRATION,
+    componentPropertyToChildChanges: COMPONENT_PROPERTY_TO_CHILD_MIGRATION,
     elementClassChanges: ELEMENT_CLASS_CHANGES_MIGRATION,
     elementSelectorChanges: ELEMENT_SELECTORS_MIGRATION,
+    providerFunctionRemovalChanges: PROVIDER_FUNCTION_REMOVALS_MIGRATION,
     symbolRemovalChanges: SYMBOL_REMOVALS_MIGRATION,
     symbolRenamingChanges: SYMBOL_RENAMING_MIGRATION
 });

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

@@ -1,11 +1,3 @@
 export const ELEMENT_SELECTORS_MIGRATION = [
-    // v48 to v49
-    {
-        replace: 'si-unauthorized-page',
-        replaceWith: 'si-info-page',
-        defaultAttributes: [
-            { name: 'icon', value: 'element-warning-filled' },
-            { name: 'iconColor', value: 'status-warning' }
-        ]
-    }
+    { replace: 'si-icon-status', replaceWith: 'si-status-counter' }
 ];

package/schematics/migrations/data/index.js

@@ -1,5 +1 @@
-/**
- * Copyright (c) Siemens 2016 - 2026
- * SPDX-License-Identifier: MIT
- */
 export { getElementMigrationData } from './element-migration-data.js';

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

@@ -1,7 +1,17 @@
-/**
- * Copyright (c) Siemens 2016 - 2026
- * SPDX-License-Identifier: MIT
- */
+const CSS_CUSTOM_PROPERTIES_MIGRATION = [
+    {
+        replace: '--si-feedback-icon-offset',
+        replaceWith: '--si-feedback-icon-size'
+    },
+    {
+        replace: '$si-font-size-title-1-bold',
+        replaceWith: '$si-font-size-h4-bold'
+    },
+    {
+        replace: '$si-font-weight-title-2',
+        replaceWith: '$si-font-weight-h5'
+    }
+];
 const SYMBOL_RENAMING_MIGRATION = [
     {
         module: /@(siemens|simpl)\/element-ng(\/icon)?/,
@@ -103,7 +113,7 @@ const ELEMENT_SELECTORS_MIGRATION = [
     { replace: 'si-icon-next', replaceWith: 'si-icon' },
     { replace: 'si-tabset-next', replaceWith: 'si-tabset' },
     { replace: 'si-tab-next', replaceWith: 'si-tab' },
-    // v48 to v49
+    // v49 to v51
     {
         replace: 'si-unauthorized-page',
         replaceWith: 'si-info-page',
@@ -175,7 +185,7 @@ const COMPONENT_PROPERTY_NAMES_MIGRATION = [
         propertyMappings: [{ replace: '(toggle)', replaceWith: '(panelToggle)' }]
     },
     // Input name changes
-    // v48 to v49
+    // v49 to v51
     {
         module: /@(siemens|simpl)\/element-ng/,
         elementSelector: 'si-filtered-search',
@@ -198,6 +208,13 @@ const COMPONENT_PROPERTY_NAMES_MIGRATION = [
         ]
     }
 ];
+const COMPONENT_PROPERTY_TO_CHILD_MIGRATION = [
+    {
+        parentElementSelector: 'si-map',
+        childElementSelector: 'si-map-tooltip',
+        propertyName: 'moreText'
+    }
+];
 const CLASS_MEMBER_REPLACEMENTS_MIGRATION = [
     {
         module: /@(siemens|simpl)\/element-ng(\/resize-observer)?/,
@@ -218,6 +235,23 @@ const CLASS_MEMBER_REPLACEMENTS_MIGRATION = [
     }
 ];
 const ELEMENT_CLASS_CHANGES_MIGRATION = [
+    {
+        requiredClasses: ['btn-ghost'],
+        removeClasses: ['btn-ghost'],
+        addClasses: ['btn-tertiary-ghost']
+    },
+    {
+        requiredClasses: ['btn-primary-ghost'],
+        removeClasses: ['btn-primary-ghost'],
+        addClasses: ['btn-ghost']
+    },
+    {
+        elementSelector: 'si-select',
+        requiredClasses: [],
+        excludedClasses: ['form-control', 'btn'],
+        removeClasses: [],
+        addClasses: ['btn', 'btn-ghost']
+    },
     // btn-circle with btn-sm should have btn-sm removed
     {
         requiredClasses: ['btn', 'btn-circle', 'btn-sm'],
@@ -245,6 +279,12 @@ const ELEMENT_CLASS_CHANGES_MIGRATION = [
         addClasses: ['btn-sm']
     }
 ];
+const PROVIDER_FUNCTION_REMOVALS_MIGRATION = [
+    {
+        module: /@(siemens)\/element-ng(\/icon)?/,
+        names: ['provideIconConfig']
+    }
+];
 /**
  * Stable migration data for testing.
  * This data is frozen and used for testing to ensure test stability.
@@ -254,8 +294,11 @@ export const getElementMigrationTestData = () => ({
     attributeSelectorChanges: ATTRIBUTE_SELECTORS_MIGRATION,
     classMemberReplacementChanges: CLASS_MEMBER_REPLACEMENTS_MIGRATION,
     componentPropertyNameChanges: COMPONENT_PROPERTY_NAMES_MIGRATION,
+    cssCustomPropertyChanges: CSS_CUSTOM_PROPERTIES_MIGRATION,
+    componentPropertyToChildChanges: COMPONENT_PROPERTY_TO_CHILD_MIGRATION,
     elementClassChanges: ELEMENT_CLASS_CHANGES_MIGRATION,
     elementSelectorChanges: ELEMENT_SELECTORS_MIGRATION,
+    providerFunctionRemovalChanges: PROVIDER_FUNCTION_REMOVALS_MIGRATION,
     symbolRemovalChanges: SYMBOL_REMOVALS_MIGRATION,
     symbolRenamingChanges: SYMBOL_RENAMING_MIGRATION
 });

package/schematics/migrations/data/provider-function-removals.js

@@ -0,0 +1,7 @@
+export const PROVIDER_FUNCTION_REMOVALS_MIGRATION = [
+    // v49 to v51
+    {
+        module: /@(siemens|simpl)\/element-ng(\/icon)?/,
+        names: ['provideIconConfig']
+    }
+];

package/schematics/migrations/data/symbol-removals.js

@@ -1,13 +1,23 @@
 export const SYMBOL_REMOVALS_MIGRATION = [
-    // v48 to v49
+    // v49 to v51
     {
-        module: /@(siemens|simpl)\/maps-ng/,
-        elementSelector: 'si-map',
-        names: ['onResize']
+        module: /@siemens\/element-ng\/application-header/,
+        elementSelector: 'si-launchpad-factory',
+        names: ['showLessAppsText']
     },
     {
-        module: /@(siemens|simpl)\/element-ng/,
-        elementSelector: 'si-landing-page',
-        names: ['registerNowIntroText']
+        module: /@siemens\/element-ng\/file-uploader/,
+        elementSelector: 'si-file-uploader',
+        names: ['uploadTextFileSelect']
+    },
+    {
+        module: /@siemens\/element-ng\/file-uploader/,
+        elementSelector: 'si-file-dropzone',
+        names: ['uploadTextFileSelect']
+    },
+    {
+        module: /@siemens\/element-ng\/search-bar/,
+        elementSelector: 'si-search-bar',
+        names: ['tabbable']
     }
 ];