@carbon/ibm-products-web-components 0.19.0-rc.0 → 0.20.0-rc.0

package/scss/components/page-header/_story-assets/_storybook-styles.scss

@@ -0,0 +1,35 @@
+//
+// Copyright IBM Corp. 2025, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/spacing';
+
+.page-header--docs-demo .docs-story div:first-child {
+  padding: 0;
+}
+
+.tabs-demo {
+  block-size: 200vh;
+}
+
+.page-header--docs-demo .tabs-demo {
+  block-size: 100%;
+}
+
+#main-content main {
+  margin-block-start: spacing.$spacing-09;
+}
+
+.page-header--docs-demo .innerZoomElementWrapper > * {
+  /* Used to override storybook styling from a dynamically generated class in the canvas preview */
+  /* stylelint-disable-next-line declaration-no-important */
+  border: 0 !important;
+}
+
+.page-header--docs-demo .ui-shell--header {
+  /* stylelint-disable-next-line carbon/layout-use */
+  transform: translateY(-48px);
+}

package/scss/components/page-header/page-header.scss

@@ -26,9 +26,13 @@ $carbon-prefix: 'cds';
   // TODO: remove above styles when styles from React have been migrated
   // and use the extend below
   // @extend .#{$prefix}--page-header;
+  position: sticky;
   display: block;
   background-color: $layer-01;
   border-block-end: 1px solid $border-subtle-01;
+  /* custom css property used from calculation of header offset */
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-start: var(--c4p-page-header-header-top);
 }
 
 :host(#{$prefix}-page-header-breadcrumb),
@@ -40,7 +44,14 @@ $carbon-prefix: 'cds';
 }
 
 :host(#{$prefix}-page-header-breadcrumb) {
+  position: sticky;
+  background-color: $layer-01;
   block-size: convert.to-rem(40px);
+  border-block-end: $border-subtle;
+
+  /* custom css property used from calculation of breadcrumb offset */
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-start: var(--c4p-page-header-breadcrumb-top);
   // TODO: remove above styles when styles from React have been migrated
   // and use the extend below
   // @extend .#{$prefix}--page-header__breadcrumb-bar;