@db-ux/core-components 1.0.0-test-13b991d

package/build/components/input/input.scss

@@ -0,0 +1,147 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/component";
+@use "../../styles/internal/form-components";
+@use "../../styles/internal/button-components";
+
+$icon-padding: calc(
+	#{form-components.$font-size-height} + #{variables.$db-spacing-fixed-sm} +
+		#{variables.$db-spacing-fixed-xs}
+);
+
+.db-input {
+	@include form-components.set-default-form-component(input);
+
+	// padding-inline-end according to current amount of icons
+	&[data-icon],
+	&:has(input[type="search"]) {
+		--db-form-component-padding-inline-start: #{$icon-padding};
+	}
+
+	&[data-icon-after],
+	&:has(input[type="search"]),
+	&:has(datalist) {
+		--db-form-component-padding-inline-end: #{$icon-padding};
+	}
+
+	&[data-hide-label="true"] {
+		--db-label-visible-height: 0;
+		--db-label-visible-spacing: 1;
+	}
+
+	&:has(input[type="search"]) {
+		@include icons.set-icon("magnifying_glass");
+		@include icons.set-icon("cross_circle", "after");
+
+		&::after {
+			opacity: 0;
+
+			@media screen and (prefers-reduced-motion: no-preference) {
+				transition: opacity variables.$db-transition-duration-fast;
+			}
+		}
+
+		&:has(input:not(:placeholder-shown)):has(
+				input:hover,
+				input:focus-visible
+			) {
+			&::after {
+				opacity: 1;
+			}
+		}
+	}
+
+	&:has(input[type="date"]),
+	&:has(input[type="week"]),
+	&:has(input[type="datetime-local"]),
+	&:has(input[type="month"]) {
+		@include icons.set-icon("calendar", "after");
+	}
+
+	&:has(input[type="time"]) {
+		@include icons.set-icon("clock", "after");
+	}
+
+	&:has(input[type="file"]) {
+		input {
+			@extend %db-overwrite-font-size-sm;
+
+			padding-block-start: variables.$db-spacing-fixed-xs;
+		}
+
+		&[data-variant="floating"] {
+			input {
+				@extend %db-overwrite-font-size-xs;
+
+				padding-block-start: calc(
+					#{variables.$db-spacing-fixed-md} +
+						#{variables.$db-spacing-fixed-3xs}
+				);
+
+				&::file-selector-button {
+					@extend %db-overwrite-font-size-xs;
+
+					block-size: variables.$db-sizing-xs;
+					padding: 0 variables.$db-spacing-fixed-xs;
+					margin-inline-end: variables.$db-spacing-fixed-xs;
+				}
+			}
+		}
+	}
+
+	input {
+		position: relative;
+
+		&::-webkit-calendar-picker-indicator,
+		&::-webkit-search-cancel-button {
+			background-image: none;
+			inline-size: icons.$default-icon-font-size;
+			block-size: icons.$default-icon-font-size;
+			padding: 0;
+			cursor: pointer;
+		}
+
+		&::-webkit-search-cancel-button {
+			appearance: none;
+			position: absolute;
+			inset-inline-end: calc(
+				#{variables.$db-spacing-fixed-sm} +
+					#{variables.$db-border-height-3xs}
+			);
+		}
+
+		&::file-selector-button {
+			@extend %default-interactive-component;
+			@extend %default-button;
+			@extend %db-overwrite-font-size-sm;
+
+			color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+			block-size: variables.$db-sizing-sm;
+			padding: variables.$db-spacing-fixed-3xs
+				variables.$db-spacing-fixed-sm;
+			margin-inline-end: variables.$db-spacing-fixed-sm;
+
+			&:hover,
+			&:focus {
+				background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+			}
+
+			&:active {
+				background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
+			}
+		}
+	}
+
+	&:has(datalist) {
+		@extend %dropdown-icon;
+
+		input {
+			&::-webkit-calendar-picker-indicator {
+				display: none !important;
+			}
+		}
+	}
+}

package/build/components/link/link.css

@@ -0,0 +1,257 @@
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-link {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+  --db-base-line-height: var(--db-type-body-line-height-md);
+  --db-base-font-size: var(--db-type-body-font-size-md);
+  line-height: var(--db-type-body-line-height-md);
+  font-size: var(--db-type-body-font-size-md);
+}
+
+.db-link[data-size=small] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
+  --db-base-line-height: var(--db-type-body-line-height-sm);
+  --db-base-font-size: var(--db-type-body-font-size-sm);
+  line-height: var(--db-type-body-line-height-sm);
+  font-size: var(--db-type-body-font-size-sm);
+}
+
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+.db-link {
+  transition: outline var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
+}
+
+@keyframes show-right-to-left {
+  from {
+    transform: translateX(110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-right-to-left {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(110%);
+  }
+}
+@keyframes show-left-to-right {
+  from {
+    transform: translateX(-110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-left-to-right {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-110%);
+  }
+}
+@keyframes show-bottom-to-top {
+  from {
+    transform: translateY(110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-bottom-to-top {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(110%);
+  }
+}
+@keyframes show-top-to-bottom {
+  from {
+    transform: translateY(-110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-top-to-bottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(-110%);
+  }
+}
+@keyframes accordion-open {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+@keyframes popover-animation {
+  0% {
+    opacity: 0;
+    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
+  }
+}
+/* Variants for adaptive components like input, select, notification, ... */
+.db-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
+  content: var(--db-icon, attr(data-icon));
+  content: var(--db-icon, attr(data-icon))/"";
+  -webkit-alt: "";
+  alt: "";
+  color: var(--db-icon-color, inherit);
+  display: inline-block;
+  /*** icon - placeholder ***/
+  font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
+  font-size: var(--db-icon-font-size, 1.5rem);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: var(--db-icon-font-weight, normal);
+  line-height: 1;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  speak: none;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  speak: never;
+  text-transform: none;
+  vertical-align: middle;
+  block-size: var(--db-icon-font-size, 1.5rem);
+  inline-size: var(--db-icon-font-size, 1.5rem);
+}
+@media aural {
+  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
+    content: none;
+  }
+}
+@media speech {
+  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
+    content: none;
+  }
+}
+
+.db-link a, .db-link {
+  display: inline-block;
+  block-size: var(--db-sizing-sm);
+}
+
+.db-link {
+  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-link:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  color: color-mix(in srgb, transparent 25%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
+}
+.db-link:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-link:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-link:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-link:active:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  color: color-mix(in srgb, transparent 50%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
+}
+.db-link:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-link:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-link:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+
+.db-link {
+  inline-size: fit-content;
+  text-underline-position: from-font;
+  text-decoration-thickness: 0.0625rem;
+  text-decoration-line: underline;
+}
+.db-link:not([data-variant=inline]) {
+  white-space: nowrap;
+}
+[data-variant=inline].db-link {
+  display: inline;
+}
+.db-link:focus-visible {
+  border-radius: var(--db-border-radius-xs);
+}
+[aria-disabled=true].db-link {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.db-link[data-content=internal]:not([data-hide-icon-after=true])::after {
+  --db-icon-after: "arrow_right";
+  content: var(--db-icon-after, attr(data-icon-after));
+  content: var(--db-icon-after, attr(data-icon-after))/"";
+  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
+}
+.db-link[data-content=internal]:not([data-hide-icon-after=true])::after {
+  vertical-align: top;
+}
+.db-link[data-content=external]:not([data-hide-icon-after=true])::after {
+  --db-icon-after: "arrow_up_right";
+  content: var(--db-icon-after, attr(data-icon-after));
+  content: var(--db-icon-after, attr(data-icon-after))/"";
+  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
+}
+.db-link[data-content=internal], .db-link[data-content=external] {
+  --db-icon-margin-start: var(--db-spacing-fixed-2xs);
+}
+.db-link[data-content=internal]::after, .db-link[data-content=external]::after {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  margin-inline-start: var(--db-icon-margin-start);
+}
+.db-link[data-variant=brand] {
+  color: var(--db-brand-bg-inverted-contrast-high-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  color: var(--db-brand-bg-inverted-contrast-high-hovered);
+}
+.db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  color: var(--db-brand-bg-inverted-contrast-high-pressed);
+}
+.db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-link[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-link[data-size=small] {
+  --db-icon-margin-start: var(--db-spacing-fixed-3xs);
+}

package/build/components/link/link.scss

@@ -0,0 +1,60 @@
+@charset "utf-8";
+
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/animation";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "../../styles/internal/link-components";
+
+.db-link {
+	@extend %db-default-link;
+	@extend %db-overwrite-font-size-md;
+
+	a {
+		// Workaround for angular
+		@extend %db-link-height;
+	}
+
+	&[data-content="internal"] {
+		@include icons.set-icon("arrow_right", "after");
+
+		&:not([data-hide-icon-after="true"])::after {
+			vertical-align: top;
+		}
+	}
+
+	&[data-content="external"] {
+		@include icons.set-icon("arrow_up_right", "after");
+	}
+
+	&[data-content="internal"],
+	&[data-content="external"] {
+		--db-icon-margin-start: #{variables.$db-spacing-fixed-2xs};
+
+		&::after {
+			/* stylelint-disable-next-line db-ux/use-spacings */
+			margin-inline-start: var(--db-icon-margin-start);
+		}
+	}
+
+	// We couldn't extend any existing SCSS placeholders, as this is a special construct
+	&[data-variant="brand"] {
+		color: colors.$db-brand-bg-inverted-contrast-high-default;
+
+		@include helpers.hover {
+			color: #{colors.$db-brand-bg-inverted-contrast-high-hovered};
+		}
+
+		@include helpers.active {
+			color: #{colors.$db-brand-bg-inverted-contrast-high-pressed};
+		}
+	}
+
+	&[data-size="small"] {
+		--db-icon-margin-start: #{variables.$db-spacing-fixed-3xs};
+
+		@extend %db-overwrite-font-size-sm;
+	}
+}

package/build/components/navigation/navigation.css

@@ -0,0 +1,218 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+.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;
+}
+
+/* Variants for adaptive components like input, select, notification, ... */
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-navigation > menu .db-navigation-item::after {
+  content: "";
+  position: absolute;
+  border-radius: var(--db-border-radius-xs);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-navigation > menu .db-navigation-item::after {
+    transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
+  }
+}
+
+.db-navigation > menu .db-navigation-item {
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-navigation > menu .db-navigation-item::after {
+  block-size: 0;
+  inline-size: var(--db-border-height-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));
+}
+@media screen and (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-height-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: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 at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* 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-height-xs);
+}
+@media (forced-colors: active) {
+  .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-height-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  }
+}
+@media screen 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 {
+    block-size: var(--db-border-height-xs);
+    inline-size: 100%;
+  }
+}
+@media screen and (min-width: 64em) and (forced-colors: active) {
+  .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-height-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  }
+}
+
+.db-navigation {
+  -webkit-tap-highlight-color: transparent; /* for removing the highlight */
+  inline-size: 100%;
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (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 > menu {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  gap: var(--db-spacing-fixed-sm);
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (min-width: 64em) {
+  .db-navigation > menu:not([data-force-mobile]), .db-navigation > menu[data-force-mobile=false] {
+    flex-direction: row;
+  }
+}
+.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 at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (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-after: "chevron_down";
+  }
+}
+@media screen and (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 screen and (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 > menu .db-navigation-item-expand-button:is(button),
+.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button {
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (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-after: "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:has([aria-current=page]) menu :has([aria-current=page])::after,
+.db-navigation > menu .db-navigation-item:has([aria-current=page]) menu [aria-current=page]::after, .db-navigation > menu .db-navigation-item:has([data-active=true]) menu :has([aria-current=page])::after,
+.db-navigation > menu .db-navigation-item:has([data-active=true]) menu [aria-current=page]::after, .db-navigation > menu .db-navigation-item[aria-current=page] menu :has([aria-current=page])::after,
+.db-navigation > menu .db-navigation-item[aria-current=page] menu [aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true] menu :has([aria-current=page])::after,
+.db-navigation > menu .db-navigation-item[data-active=true] menu [aria-current=page]::after {
+  display: none;
+}
+.db-navigation > menu .db-navigation-item .db-navigation-item::after {
+  display: none;
+}
+.db-navigation[data-force-close=true] > menu menu {
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (min-width: 64em) {
+  .db-navigation[data-force-close=true] > menu menu:not([data-force-mobile]), .db-navigation[data-force-close=true] > menu menu[data-force-mobile=false] {
+    display: none;
+  }
+}