@db-ux/core-components 4.12.0 → 4.13.0-shell-f221975

package/build/components/header/header.scss

@@ -1,274 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/screen-sizes";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "@db-ux/core-foundations/build/styles/density";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "../../styles/internal/component";
-
-.db-header {
-	background-color: colors.$db-adaptive-bg-basic-level-1-default;
-
-	@include helpers.display(flex);
-
-	flex-direction: column;
-	position: relative;
-	min-block-size: component.$min-mobile-header-height;
-	border-block-end: variables.$db-border-width-3xs solid
-		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
-
-	@include screen-sizes.screen("md") {
-		--db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm};
-	}
-
-	&[data-width="small"] {
-		margin-inline: auto;
-		max-inline-size: screen-sizes.$db-breakpoint-sm;
-	}
-
-	&[data-width="medium"] {
-		margin-inline: auto;
-		max-inline-size: screen-sizes.$db-breakpoint-md;
-	}
-
-	&[data-width="large"] {
-		margin-inline: auto;
-		max-inline-size: screen-sizes.$db-breakpoint-lg;
-	}
-
-	.db-link {
-		@include helpers.display(inline-block);
-	}
-
-	&[data-on-forcing-mobile="true"] {
-		/*
-		We make the header invisible for a short time if the user passes in data-force-mobile property.
-		We do it because otherwise we see the default desktop-navigation for some mil. sec.
-		*/
-		visibility: hidden;
-	}
-
-	// All use-cases where we hide the divider
-	&:not(:has(.db-navigation)),
-	&:has(.db-brand:empty) {
-		.db-header-navigation-container::before {
-			display: none;
-		}
-	}
-
-	&:not(:has(.db-navigation)) {
-		&:has(.db-header-secondary-action:empty) {
-			// Hide the action-area divider only when both navigation and secondary action are missing.
-			// With no navigation but a secondary action, we keep the divider.
-			.db-header-action-container::before {
-				display: none;
-			}
-
-			// Hide the burger ONLY when the drawer would be empty.
-			// This requires: no main navigation AND no meta navigation AND no secondary action.
-			&:has(.db-header-meta-navigation:empty) {
-				.db-header-burger-menu-container {
-					@include helpers.display(none);
-				}
-			}
-		}
-	}
-}
-
-.db-header-navigation-bar {
-	@include helpers.display(flex);
-
-	position: relative;
-	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
-	inline-size: 100%;
-	align-items: center;
-
-	@include screen-sizes.screen("md") {
-		padding: variables.$db-spacing-fixed-md variables.$db-spacing-fixed-lg;
-	}
-}
-
-.db-header-meta-navigation {
-	@extend %db-density-functional;
-	@include helpers.display(flex);
-
-	flex-direction: column;
-	gap: variables.$db-spacing-fixed-sm;
-	justify-content: flex-end;
-	background-color: colors.$db-adaptive-bg-basic-level-2-default;
-	padding: variables.$db-spacing-fixed-md;
-
-	@include helpers.divider("top");
-
-	@include screen-sizes.screen("md") {
-		padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-lg;
-		margin: 0;
-		gap: variables.$db-spacing-fixed-md;
-		flex-direction: row;
-
-		&::before {
-			display: none;
-		}
-
-		&:empty {
-			@include helpers.display(none);
-		}
-	}
-
-	&:empty {
-		@include helpers.display(none);
-	}
-}
-
-.db-header-navigation-container {
-	@include helpers.display(inherit);
-
-	flex: 1 1 auto;
-	inline-size: 100%;
-	align-items: center;
-	block-size: 100%;
-
-	@include screen-sizes.screen("md") {
-		@include helpers.divider("left");
-
-		&::before {
-			position: inherit;
-			block-size: variables.$db-sizing-md;
-			margin-inline-start: variables.$db-spacing-fixed-lg;
-		}
-	}
-}
-
-.db-header-primary-action {
-	margin-inline-start: auto;
-}
-
-.db-header-brand-container:not(:has(> :nth-child(1))) {
-	@include helpers.display(none);
-}
-
-.db-header-action-container:has(> .db-header-secondary-action:empty) {
-	@include screen-sizes.screen("md") {
-		@include helpers.display(none);
-	}
-}
-
-.db-header-brand-container {
-	min-block-size: variables.$db-sizing-md;
-}
-
-.db-header-action-container {
-	@include helpers.divider("left");
-
-	@include screen-sizes.screen("md") {
-		&::before {
-			margin-inline: variables.$db-spacing-fixed-sm;
-		}
-	}
-
-	&::before {
-		margin-inline: variables.$db-spacing-fixed-xs;
-		position: inherit;
-		block-size: variables.$db-sizing-md;
-	}
-}
-
-.db-header-brand-container,
-.db-header-action-container {
-	align-items: center;
-	block-size: 100%;
-
-	@include helpers.display(inherit);
-
-	gap: inherit;
-	flex: 0 1 auto;
-	flex-grow: 0;
-	flex-shrink: 0;
-}
-
-.db-header-secondary-action {
-	flex: 0 1 auto;
-	flex-grow: 0;
-	flex-shrink: 0;
-	padding-block-start: variables.$db-spacing-fixed-xs;
-
-	@include helpers.divider("top");
-
-	@include screen-sizes.screen("md") {
-		&::before {
-			display: none;
-		}
-	}
-}
-
-.db-header-drawer-navigation {
-	@include helpers.display(flex);
-
-	flex-direction: column;
-	flex: 1 1 auto;
-	block-size: 100%;
-	overflow: auto;
-	justify-content: space-between;
-}
-
-.db-header-navigation {
-	padding-block: variables.$db-spacing-fixed-md;
-
-	@include screen-sizes.screen("md") {
-		margin-inline: variables.$db-spacing-fixed-lg;
-	}
-}
-
-.db-header-navigation,
-.db-header-secondary-action {
-	@include helpers.display(flex);
-
-	gap: variables.$db-spacing-fixed-sm;
-	padding-inline: variables.$db-spacing-fixed-md;
-
-	@include screen-sizes.screen("md") {
-		gap: variables.$db-spacing-fixed-xs;
-		padding: 0;
-	}
-}
-
-.db-header-drawer {
-	--db-drawer-content-padding-inline: 0;
-
-	// 1px for box shadow of header
-	--db-drawer-header-padding-block-end: calc(
-		1px + #{variables.$db-spacing-fixed-xs}
-	);
-
-	padding-block-end: 0;
-
-	.db-drawer-content {
-		@include helpers.display(flex);
-
-		flex-direction: column;
-		block-size: 100%;
-		overflow: hidden;
-	}
-}
-
-/* Only for Desktop */
-.db-header-meta-navigation,
-.db-header-navigation-container > .db-header-navigation,
-.db-header-action-container > .db-header-secondary-action {
-	@include helpers.display(none);
-
-	@include screen-sizes.screen("md") {
-		@include helpers.display(inherit);
-	}
-}
-
-/* Only for Mobile */
-.db-header-drawer-navigation > .db-header-meta-navigation:not(:empty) {
-	@include helpers.display(inherit);
-}
-
-.db-header-drawer,
-.db-header-burger-menu-container {
-	@include screen-sizes.screen("md") {
-		@include helpers.display(none);
-	}
-}

package/build/components/navigation/navigation.css

@@ -1,202 +0,0 @@
-.db-visually-hidden,
-[data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
-  position: absolute !important;
-  inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
-  padding: 0 !important;
-  pointer-events: none !important;
-}
-
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* Variants for adaptive components like input, select, notification, ... */
-.db-navigation > menu .db-navigation-item::after {
-  content: "";
-  position: absolute;
-  border-radius: var(--db-border-radius-xs);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-navigation > menu .db-navigation-item::after {
-    transition: block-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), inline-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
-  }
-}
-
-.db-navigation > menu .db-navigation-item::after {
-  block-size: 0;
-  inline-size: var(--db-border-width-xs);
-  transform: translate(0, -50%);
-  inset-block: 50% auto;
-  background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
-  inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
-}
-.db-navigation > menu .db-navigation-item {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (min-width: 64em) {
-  .db-navigation > menu .db-navigation-item:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item::after {
-    block-size: var(--db-border-width-xs);
-    inline-size: 0;
-    transform: translate(-50%, 0);
-    inset-inline-start: 50%;
-    background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
-    inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
-  }
-}
-.db-navigation > menu .db-navigation-item {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-
-.db-navigation > menu .db-navigation-item:has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true]::after {
-  block-size: 100%;
-  inline-size: var(--db-border-width-xs);
-}
-@media (forced-colors: active), print {
-  .db-navigation > menu .db-navigation-item:has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true]::after {
-    border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  }
-}
-.db-navigation > menu .db-navigation-item:has([aria-current=page]), .db-navigation > menu .db-navigation-item:has([data-active=true]), .db-navigation > menu .db-navigation-item[aria-current=page], .db-navigation > menu .db-navigation-item[data-active=true] {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (min-width: 64em) {
-  .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]:not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item[data-active=true]:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([aria-current=page])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([data-active=true])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[aria-current=page]::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[data-active=true]::after {
-    block-size: var(--db-border-width-xs);
-    inline-size: 100%;
-  }
-}
-@media (min-width: 64em) and (forced-colors: active), print and (min-width: 64em) {
-  .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]:not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item[data-active=true]:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([aria-current=page])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([data-active=true])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[aria-current=page]::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[data-active=true]::after {
-    border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  }
-}
-.db-navigation > menu .db-navigation-item:has([aria-current=page]), .db-navigation > menu .db-navigation-item:has([data-active=true]), .db-navigation > menu .db-navigation-item[aria-current=page], .db-navigation > menu .db-navigation-item[data-active=true] {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-
-.db-navigation {
-  -webkit-tap-highlight-color: transparent; /* for removing the highlight */
-  inline-size: 100%;
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (min-width: 64em) {
-  .db-navigation:not([data-force-mobile]), .db-navigation[data-force-mobile=false] {
-    -webkit-tap-highlight-color: inherit;
-    inline-size: auto;
-  }
-}
-.db-navigation {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-.db-navigation > menu {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  gap: var(--db-spacing-fixed-sm);
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (min-width: 64em) {
-  .db-navigation > menu:not([data-force-mobile]), .db-navigation > menu[data-force-mobile=false] {
-    flex-direction: row;
-  }
-}
-.db-navigation > menu {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-.db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (min-width: 64em) {
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
-    --db-icon-margin-start: var(--db-spacing-fixed-sm);
-    --db-icon-trailing: "chevron_down";
-  }
-}
-@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
-    transition: transform var(--db-transition-straight-emotional);
-  }
-}
-@media (min-width: 64em) {
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile]):is(:hover, :focus-visible)::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile]):has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:is(:hover, :focus-visible)::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile]):is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile]):has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]:is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]:has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after {
-    transform: rotate(-180deg);
-  }
-}
-.db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button),
-.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (min-width: 64em) {
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
-    --db-icon-trailing: "chevron_right";
-    --db-icon-margin-start: auto;
-  }
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile]):is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile]) :has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after, .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false] :has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile]):is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile]) :has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false]:is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false] :has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after {
-    transform: none;
-  }
-}
-.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button),
-.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-.db-navigation > menu .db-navigation-item .db-navigation-item::after {
-  display: none;
-}
-.db-navigation[data-force-close=true] > menu menu {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (min-width: 64em) {
-  .db-navigation[data-force-close=true] > menu menu:not([data-force-mobile]):not([hidden]), .db-navigation[data-force-close=true] > menu menu[data-force-mobile=false]:not([hidden]) {
-    display: none;
-  }
-}
-.db-navigation[data-force-close=true] > menu menu {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}

package/build/components/navigation/navigation.scss

@@ -1,108 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/screen-sizes";
-@use "../../styles/internal/component";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "../../styles/internal/form-components";
-@use "../../styles/internal/db-puls";
-
-.db-navigation {
-	-webkit-tap-highlight-color: transparent; /* for removing the highlight */
-	inline-size: 100%;
-
-	@include screen-sizes.screen("md") {
-		-webkit-tap-highlight-color: inherit;
-		inline-size: auto;
-	}
-
-	> menu {
-		display: flex;
-		flex-direction: column;
-		padding: 0;
-		margin: 0;
-		gap: variables.$db-spacing-fixed-sm;
-
-		@include screen-sizes.screen("md") {
-			flex-direction: row;
-		}
-
-		.db-navigation-item {
-			@extend %db-puls-auto;
-
-			.db-navigation-item-expand-button:is(button),
-			.db-navigation-item-expand-button > button {
-				// overwrite for navigation items
-				@include screen-sizes.screen("md") {
-					&::after {
-						--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
-						--db-icon-trailing: "chevron_down";
-
-						@media (prefers-reduced-motion: no-preference) {
-							transition: form-components.$dropdown-icon-transition;
-						}
-					}
-
-					&:is(:hover, :focus-visible),
-					&:has(
-						~ .db-sub-navigation:is(
-								:hover,
-								:focus-visible,
-								:focus-within
-							)
-					) {
-						&::after {
-							transform: form-components.$dropdown-icon-transform;
-						}
-					}
-				}
-			}
-
-			// re overwrite for non navigation items
-			> menu {
-				.db-navigation-item-expand-button:is(button),
-				.db-navigation-item-expand-button > button {
-					@include screen-sizes.screen("md") {
-						&::after {
-							--db-icon-trailing: "chevron_right";
-							--db-icon-margin-start: auto;
-						}
-
-						&:is(:hover, :focus-visible),
-						:has(
-							~ .db-sub-navigation:is(
-									:hover,
-									:focus-visible,
-									:focus-within
-								)
-						) {
-							&::after {
-								transform: none;
-							}
-						}
-					}
-				}
-			}
-
-			&:has([aria-current="page"]),
-			&:has([data-active="true"]),
-			&[aria-current="page"],
-			&[data-active="true"] {
-				@extend %show-db-puls-auto;
-			}
-
-			// angular workaround: as no direct-child selector can be used, the pulse is hidden from the second level onwards
-			.db-navigation-item {
-				&::after {
-					display: none;
-				}
-			}
-		}
-	}
-
-	&[data-force-close="true"] {
-		> menu menu {
-			@include screen-sizes.screen("md") {
-				@include helpers.display(none);
-			}
-		}
-	}
-}