[WIP] chore(deps): update fundamental-styles 0.41

.claude/skills/review-pr/SKILL.md

@@ -64,7 +64,7 @@ For each changed file, check the applicable sections below. Report findings grou
 - [ ] **If public API changed (new input, changed behavior, removed feature), docs examples are updated**
 - [ ] Examples consolidated into existing examples — no unnecessary standalone example files
 - [ ] Every demonstrated feature is user-observable (can the user see it working?)
-- [ ] `@sap-ui/common-css` utility classes (`sap-flex`, `sap-margin-*`, `sap-padding-*`) — no inline styles
+- [ ] `@fundamental-styles/common-css` utility classes (`sap-flex`, `sap-margin-*`, `sap-padding-*`) — no inline styles
 - [ ] Individual component imports in examples — no deprecated `*Module` classes
 
 ### 6. Breaking Changes

.claude/skills/update-docs/SKILL.md

@@ -39,7 +39,7 @@ Flag inputs/outputs that exist in the component but are not documented anywhere.
 For each example file:
 
 - [ ] Individual component imports — no deprecated `*Module` classes
-- [ ] `@sap-ui/common-css` utility classes — no inline styles where avoidable
+- [ ] `@fundamental-styles/common-css` utility classes — no inline styles where avoidable
 - [ ] Every demonstrated feature is user-observable
 - [ ] No unnecessary standalone examples (consolidate where possible)
 - [ ] Example code matches current API (no removed/renamed inputs)

apps/docs/src/styles.scss

@@ -2,7 +2,7 @@
 @import 'fundamental-styles/dist/info-label.css';
 @import 'fundamental-styles/dist/form-layout-grid.css';
 @import '@angular/cdk/overlay-prebuilt.css';
-@import '@sap-ui/common-css/dist/common-css.css';
+@import '@fundamental-styles/common-css/dist/common-css.css';
 
 @include cdk.a11y-visually-hidden();
 

libs/core/avatar-group/avatar-group.component.scss

@@ -1,4 +1,4 @@
-@use '@sap-ui/common-css/dist/sass/_common-mixins.scss' as sap;
+@use '@fundamental-styles/common-css/dist/sass/_common-mixins.scss' as sap;
 @use 'fundamental-styles/dist/avatar-group.css';
 
 @mixin fd-avatar-element() {

libs/core/combobox/combobox.component.scss

@@ -6,6 +6,10 @@
     }
 }
 
+.fd-combobox-custom-list.fd-list--dropdown .fd-list__item.fd-list__group-header {
+    border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
+}
+
 .fd-list__item.fd-combobox-list-item {
     cursor: pointer;
 }

libs/core/link/link.component.scss

@@ -1,4 +1,4 @@
-@use '@sap-ui/common-css/dist/sass/_common-mixins.scss' as sap;
+@use '@fundamental-styles/common-css/dist/sass/_common-mixins.scss' as sap;
 @use 'fundamental-styles/dist/link.css';
 
 $block: fd-link;

libs/core/multi-combobox/select-all-toggler/select-all-toggler.component.scss

@@ -1,4 +1,4 @@
-@use '@sap-ui/common-css/dist/sass/_common-mixins.scss' as sap;
+@use '@fundamental-styles/common-css/dist/sass/_common-mixins.scss' as sap;
 
 fd-multi-combobox-select-all-toggler {
     display: block;

libs/core/product-switch/product-switch-body/product-switch-body.component.scss

@@ -74,24 +74,3 @@
         }
     }
 }
-
-// TO DO: to be removed with the adoption of fundamental-styles v0.41.0+
-.fd-product-switch__item {
-    gap: 0.5rem;
-}
-
-.fd-product-switch__icon [class*='sap-icon'],
-.fd-product-switch__icon[class*='sap-icon'] {
-    margin-block-end: 0;
-}
-
-.fd-product-switch__body.fd-product-switch__body--mobile {
-    .fd-product-switch__item {
-        gap: 0.75rem;
-    }
-
-    .fd-product-switch__icon [class*='sap-icon'],
-    .fd-product-switch__icon[class*='sap-icon'] {
-        margin-inline: 0;
-    }
-}

libs/core/quick-view/quick-view-group-title/quick-view-group-title.component.html

@@ -1,5 +1,8 @@
-<div class="fd-form-group__header" [attr.aria-labelledby]="id">
-    <h1 class="fd-form-group__header-text" [id]="id">
+<div
+    class="fd-form-group__header fd-form-group__header--no-border fd-form-group__header--no-padding"
+    [attr.aria-labelledby]="id"
+>
+    <span class="fd-form-group__header-text" [id]="id" role="heading" aria-level="headingLevel()">
         <ng-content></ng-content>
-    </h1>
+    </span>
 </div>

libs/core/quick-view/quick-view-group-title/quick-view-group-title.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, Input } from '@angular/core';
+import { HeadingLevel } from '@fundamental-ngx/core/shared';
 
 let groupTitleUniqueId = 0;
 
@@ -12,4 +13,7 @@ export class QuickViewGroupTitleComponent {
     /** Id of the quick view group title. */
     @Input()
     id: string = 'fd-quick-view-group-title-' + groupTitleUniqueId++;
+
+    /** Heading level of the title. */
+    headingLevel = input<HeadingLevel | undefined | null>(undefined);
 }

libs/core/quick-view/quick-view/quick-view.component.scss

@@ -4,3 +4,8 @@
 .fd-popover__body .fd-quick-view__content {
     border-radius: var(--sapElement_BorderCornerRadius);
 }
+.fd-quick-view fd-quick-view-group-title + fd-quick-view-group-item {
+    .fd-form-item {
+        padding-block-start: 0;
+    }
+}

libs/docs/core/popover/examples/popover-programmatic/popover-programmatic-open-example.component.scss

@@ -1,6 +1,6 @@
 /* Import SAP common-css utilities for spacing, padding, etc. */
-@import '@sap-ui/common-css/dist/sap-margin.css';
-@import '@sap-ui/common-css/dist/sap-padding.css';
+@import '@fundamental-styles/common-css/dist/sap-margin.css';
+@import '@fundamental-styles/common-css/dist/sap-padding.css';
 
 /* Import fundamental-styles for list and title components */
 @import 'fundamental-styles/dist/list.css';

libs/docs/core/time-picker/examples/time-picker-minute-step-example.html

@@ -1,7 +1,7 @@
 <style>
-    @import '@sap-ui/common-css/dist/sap-flex.css';
-    @import '@sap-ui/common-css/dist/sap-margin.css';
-    @import '@sap-ui/common-css/dist/sap-typography.css';
+    @import '@fundamental-styles/common-css/dist/sap-flex.css';
+    @import '@fundamental-styles/common-css/dist/sap-margin.css';
+    @import '@fundamental-styles/common-css/dist/sap-typography.css';
 </style>
 
 <div class="sap-flex sap-flex--column sap-flex--gap-small">

libs/docs/core/time/examples/time-minute-steps.html

@@ -1,8 +1,8 @@
 <style>
-    @import '@sap-ui/common-css/dist/sap-flex.css';
-    @import '@sap-ui/common-css/dist/sap-margin.css';
-    @import '@sap-ui/common-css/dist/sap-text.css';
-    @import '@sap-ui/common-css/dist/sap-typography.css';
+    @import '@fundamental-styles/common-css/dist/sap-flex.css';
+    @import '@fundamental-styles/common-css/dist/sap-margin.css';
+    @import '@fundamental-styles/common-css/dist/sap-text.css';
+    @import '@fundamental-styles/common-css/dist/sap-typography.css';
 </style>
 
 <div style="display: flex; gap: 2rem; flex-wrap: wrap">

libs/docs/schema/src/lib/containers/schema-group/schema-group.component.scss

@@ -1,8 +1,8 @@
-@use '@sap-ui/common-css/dist/sap-margin.css';
-@use '@sap-ui/common-css/dist/sap-colors.css';
-@use '@sap-ui/common-css/dist/sap-display.css';
-@use '@sap-ui/common-css/dist/sap-typography.css';
-@use '@sap-ui/common-css/dist/sap-padding.css';
+@use '@fundamental-styles/common-css/dist/sap-margin.css';
+@use '@fundamental-styles/common-css/dist/sap-colors.css';
+@use '@fundamental-styles/common-css/dist/sap-display.css';
+@use '@fundamental-styles/common-css/dist/sap-typography.css';
+@use '@fundamental-styles/common-css/dist/sap-padding.css';
 
 :host {
     display: block;

libs/docs/schema/src/lib/containers/schema-group/schema-group.component.ts

@@ -12,8 +12,8 @@ import {
 import { Properties } from '../../models/schema.model';
 import { AsFormControlPipe, AsFormGroupPipe } from '../../pipes/type-casting.pipe';
 
-import '@sap-ui/common-css/dist/sap-padding.css';
-import '@sap-ui/common-css/dist/sap-typography.css';
+import '@fundamental-styles/common-css/dist/sap-padding.css';
+import '@fundamental-styles/common-css/dist/sap-typography.css';
 
 @Component({
     selector: 'schema-group',

libs/docs/schema/src/lib/containers/schema/schema.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { Properties, Schema } from '../../models/schema.model';
 import { SchemaGroupComponent } from '../schema-group/schema-group.component';
 
-import '@sap-ui/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
 
 @Component({
     selector: 'schema',

libs/docs/shared/src/lib/core-helpers/example-background/example-background.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { FormLabelComponent } from '@fundamental-ngx/core/form';
 import { SwitchComponent } from '@fundamental-ngx/core/switch';
 
-import '@sap-ui/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
 
 @Component({
     selector: 'background-switch',

libs/docs/shared/src/lib/core-helpers/playground/playground.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, input, output, ViewEncapsulation } from '@angular/core';
 import { Schema, SchemaComponent } from '@fundamental-ngx/docs/schema';
 
-import '@sap-ui/common-css/dist/sap-flex.css';
-import '@sap-ui/common-css/dist/sap-padding.css';
+import '@fundamental-styles/common-css/dist/sap-flex.css';
+import '@fundamental-styles/common-css/dist/sap-padding.css';
 
 @Component({
     selector: 'playground',

libs/docs/shared/src/lib/core-helpers/playground/playground.components.scss

@@ -1,4 +1,4 @@
-@use '@sap-ui/common-css/dist/sap-padding.css';
+@use '@fundamental-styles/common-css/dist/sap-padding.css';
 
 .fd-playground {
     display: block;

libs/docs/shared/src/lib/core-helpers/stackblitz/stackblitz-dependencies.ts

@@ -34,7 +34,7 @@ export class StackblitzDependencies {
         'core-js',
         'focus-trap',
         'fundamental-styles',
-        '@sap-ui/common-css',
+        '@fundamental-styles/common-css',
         'dayjs',
         'moment',
         'tslib',

libs/docs/shared/src/lib/core-helpers/toolbar/toolbar.component.ts

@@ -14,10 +14,10 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 import { CompleteThemeDefinition, ThemingService } from '@fundamental-ngx/core/theming';
 
-import '@sap-ui/common-css/dist/sap-colors.css';
-import '@sap-ui/common-css/dist/sap-display.css';
-import '@sap-ui/common-css/dist/sap-flex.css';
-import '@sap-ui/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-colors.css';
+import '@fundamental-styles/common-css/dist/sap-display.css';
+import '@fundamental-styles/common-css/dist/sap-flex.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
 
 import { NgTemplateOutlet } from '@angular/common';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

libs/docs/ui5-webcomponents-fiori/barcode-scanner-dialog/examples/barcode-scanner-dialog-sample.ts

@@ -7,10 +7,10 @@ import { MessageStrip } from '@fundamental-ngx/ui5-webcomponents/message-strip';
 import { Tag } from '@fundamental-ngx/ui5-webcomponents/tag';
 
 // Import CSS classes for styling
-import '@sap-ui/common-css/dist/sap-display.css';
-import '@sap-ui/common-css/dist/sap-flex.css';
-import '@sap-ui/common-css/dist/sap-margin.css';
-import '@sap-ui/common-css/dist/sap-text.css';
+import '@fundamental-styles/common-css/dist/sap-display.css';
+import '@fundamental-styles/common-css/dist/sap-flex.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-text.css';
 import 'fundamental-styles/dist/section.css';
 
 interface ScanResult {

libs/docs/ui5-webcomponents-fiori/dynamic-page/examples/dynamic-page-sample.ts

@@ -17,9 +17,9 @@ import { GenericTagComponent } from '@fundamental-ngx/core';
 
 import '@ui5/webcomponents-icons/dist/AllIcons.js';
 
-import '@sap-ui/common-css/dist/sap-flex.css';
-import '@sap-ui/common-css/dist/sap-margin.css';
-import '@sap-ui/common-css/dist/sap-title.css';
+import '@fundamental-styles/common-css/dist/sap-flex.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-title.css';
 import 'fundamental-styles/dist/section.css';
 import 'fundamental-styles/dist/title.css';
 

libs/docs/ui5-webcomponents-fiori/dynamic-side-content/examples/dynamic-side-content-sample.ts

@@ -13,12 +13,12 @@ import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
 import '@ui5/webcomponents-icons/dist/AllIcons.js';
 
 // Import CSS utilities
-import '@sap-ui/common-css/dist/sap-display.css';
-import '@sap-ui/common-css/dist/sap-flex.css';
-import '@sap-ui/common-css/dist/sap-margin.css';
-import '@sap-ui/common-css/dist/sap-padding.css';
-import '@sap-ui/common-css/dist/sap-text.css';
-import '@sap-ui/common-css/dist/sap-title.css';
+import '@fundamental-styles/common-css/dist/sap-display.css';
+import '@fundamental-styles/common-css/dist/sap-flex.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-padding.css';
+import '@fundamental-styles/common-css/dist/sap-text.css';
+import '@fundamental-styles/common-css/dist/sap-title.css';
 import 'fundamental-styles/dist/section.css';
 
 // Product data interface

libs/docs/ui5-webcomponents-fiori/flexible-column-layout/examples/flexible-column-layout-sample.ts

@@ -11,9 +11,9 @@ import { ListItemStandard } from '@fundamental-ngx/ui5-webcomponents/list-item-s
 import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
 import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
 
-import '@sap-ui/common-css/dist/sap-flex.css';
-import '@sap-ui/common-css/dist/sap-margin.css';
-import '@sap-ui/common-css/dist/sap-padding.css';
+import '@fundamental-styles/common-css/dist/sap-flex.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-padding.css';
 
 interface Product {
     id: number;

libs/docs/ui5-webcomponents/card/examples/card-sample.ts

@@ -19,10 +19,10 @@ import 'fundamental-styles/dist/panel.css';
 import 'fundamental-styles/dist/section.css';
 
 // Import SAP UI Common CSS
-import '@sap-ui/common-css/dist/sap-flex.css';
-import '@sap-ui/common-css/dist/sap-margin.css';
-import '@sap-ui/common-css/dist/sap-padding.css';
-import '@sap-ui/common-css/dist/sap-text.css';
+import '@fundamental-styles/common-css/dist/sap-flex.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-padding.css';
+import '@fundamental-styles/common-css/dist/sap-text.css';
 
 @Component({
     selector: 'ui5-card-sample',

libs/docs/ui5-webcomponents/input/examples/input-sample.ts

@@ -31,10 +31,10 @@ import 'fundamental-styles/dist/layout-grid.css';
 import 'fundamental-styles/dist/panel.css';
 import 'fundamental-styles/dist/section.css';
 
-import '@sap-ui/common-css/dist/sap-flex.css';
-import '@sap-ui/common-css/dist/sap-margin.css';
-import '@sap-ui/common-css/dist/sap-padding.css';
-import '@sap-ui/common-css/dist/sap-text.css';
+import '@fundamental-styles/common-css/dist/sap-flex.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-padding.css';
+import '@fundamental-styles/common-css/dist/sap-text.css';
 
 @Component({
     selector: 'ui5-input-sample',

libs/docs/ui5-webcomponents/link/examples/link-sample.ts

@@ -24,11 +24,11 @@ import 'fundamental-styles/dist/panel.css';
 import 'fundamental-styles/dist/section.css';
 
 // Import SAP UI Common CSS
-import '@sap-ui/common-css/dist/sap-flex.css';
-import '@sap-ui/common-css/dist/sap-heading.css';
-import '@sap-ui/common-css/dist/sap-margin.css';
-import '@sap-ui/common-css/dist/sap-padding.css';
-import '@sap-ui/common-css/dist/sap-text.css';
+import '@fundamental-styles/common-css/dist/sap-flex.css';
+import '@fundamental-styles/common-css/dist/sap-heading.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-padding.css';
+import '@fundamental-styles/common-css/dist/sap-text.css';
 
 @Component({
     selector: 'ui5-link-sample',

libs/docs/ui5-webcomponents/slider/examples/slider-sample.ts

@@ -16,11 +16,11 @@ import 'fundamental-styles/dist/panel.css';
 import 'fundamental-styles/dist/section.css';
 
 // Import SAP UI Common CSS
-import '@sap-ui/common-css/dist/sap-flex.css';
-import '@sap-ui/common-css/dist/sap-margin.css';
-import '@sap-ui/common-css/dist/sap-padding.css';
-import '@sap-ui/common-css/dist/sap-position.css';
-import '@sap-ui/common-css/dist/sap-text.css';
+import '@fundamental-styles/common-css/dist/sap-flex.css';
+import '@fundamental-styles/common-css/dist/sap-margin.css';
+import '@fundamental-styles/common-css/dist/sap-padding.css';
+import '@fundamental-styles/common-css/dist/sap-position.css';
+import '@fundamental-styles/common-css/dist/sap-text.css';
 
 @Component({
     selector: 'ui5-slider-sample',

package.json

@@ -49,7 +49,7 @@
         "@angular/platform-browser": "21.1.0",
         "@angular/platform-browser-dynamic": "21.1.0",
         "@angular/router": "21.1.0",
-        "@fundamental-styles/cx": "0.40.1",
+        "@fundamental-styles/cx": "0.41.0",
         "@nx/angular": "22.4.1",
         "@sap-theming/theming-base-content": "11.32.3",
         "@stackblitz/sdk": "1.9.0",
@@ -70,7 +70,7 @@
         "fast-equals": "^6.0.0",
         "focus-trap": "7.1.0",
         "focus-visible": "5.2.1",
-        "fundamental-styles": "0.40.1",
+        "fundamental-styles": "0.41.0",
         "fuse.js": "7.0.0",
         "highlight.js": "11.7.0",
         "intl": "1.2.5",
@@ -92,14 +92,14 @@
         "@angular/language-service": "21.1.0",
         "@commitlint/cli": "18.6.1",
         "@commitlint/config-conventional": "18.6.1",
+        "@fundamental-styles/common-css": "0.41.0",
         "@nx/devkit": "22.4.1",
         "@nx/eslint": "22.4.1",
         "@nx/eslint-plugin": "22.4.1",
         "@nx/jest": "22.4.1",
         "@nx/js": "22.4.1",
         "@nx/plugin": "22.4.1",
         "@nx/workspace": "22.4.1",
-        "@sap-ui/common-css": "0.40.1",
         "@schematics/angular": "21.1.0",
         "@swc-node/register": "1.9.2",
         "@swc/cli": "0.6.0",