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

package/build/components/notification/notification.scss

@@ -0,0 +1,216 @@
+@use "sass:map";
+@use "@db-ux/core-foundations/build/styles/density";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "../../styles/internal/component";
+@use "../../styles/internal/link-components";
+@use "./notification-grid-default";
+@use "./notification-grid-overlay";
+@use "./notification-grid-non-overlay";
+
+%ugly-line-height-workarounds {
+	// resets line-height to smaller height based on timestamp
+	&:has(span) {
+		header,
+		p,
+		&::before,
+		.db-button {
+			/* stylelint-disable-next-line db-ux/use-spacings */
+			margin-block-start: -2px;
+		}
+	}
+}
+
+.db-notification {
+	@extend %component-border;
+	@extend %grid-layout-default;
+	@extend %ugly-line-height-workarounds;
+
+	display: grid;
+	padding: variables.$db-spacing-fixed-md;
+	gap: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
+	inline-size: inherit;
+	background-color: colors.$db-adaptive-bg-basic-level-2-default;
+
+	&::before {
+		--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
+	}
+
+	a {
+		@extend %db-default-link;
+
+		grid-area: link;
+		white-space: nowrap;
+
+		// Overwrite settings for db-link ALWAYS
+		&::before,
+		&::after {
+			content: none !important;
+			margin: 0 !important;
+		}
+
+		&[data-variant="brand"] {
+			@extend %db-link-default-color;
+		}
+
+		&[data-size="small"] {
+			@extend %db-overwrite-font-size-md;
+		}
+	}
+
+	// headline
+	header {
+		grid-area: head;
+		font-weight: 700;
+
+		&,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			font-family: var(--db-font-family-sans);
+			margin: 0;
+			line-height: var(--db-type-headline-line-height-2xs);
+			font-size: var(--db-type-headline-font-size-2xs);
+
+			&::before,
+			&::after {
+				--db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
+				--db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
+			}
+		}
+	}
+
+	// content
+	p {
+		@extend %db-overwrite-font-size-md;
+
+		grid-area: content;
+		margin: 0;
+	}
+
+	img {
+		min-block-size: variables.$db-sizing-md;
+		min-inline-size: variables.$db-sizing-md;
+		max-block-size: variables.$db-sizing-md;
+		max-inline-size: variables.$db-sizing-md;
+		border-radius: variables.$db-border-radius-xs;
+	}
+
+	// timestamp
+	span {
+		@extend %db-overwrite-font-size-sm;
+
+		grid-area: timestamp;
+		white-space: nowrap;
+	}
+
+	.db-button {
+		grid-area: close;
+	}
+
+	&:has(img) {
+		// we don't show a icon if we have an image
+		::before {
+			content: none !important;
+		}
+	}
+
+	&[data-icon]::before,
+	&::before,
+	img {
+		--db-icon-margin-end: 0;
+
+		@include icons.to-filled-icon();
+
+		grid-area: icon;
+	}
+
+	// has link inline or overlay
+	&:has(a) {
+		&[data-link-variant="inline"],
+		&[data-variant="overlay"] {
+			// 1. only content (min. requirement)
+			grid-template-areas: "content link";
+			grid-template-columns: 1fr min-content;
+
+			&:has(.db-button) {
+				grid-template-columns: 1fr min-content min-content;
+				grid-template-areas: "content link close";
+			}
+
+			// 2. headline
+			&:has(header) {
+				grid-template-columns: 1fr min-content;
+				grid-template-areas:
+					"head link"
+					"content content";
+
+				&:has(.db-button) {
+					grid-template-columns: 1fr min-content min-content;
+					grid-template-areas:
+						"head link close"
+						"content content content";
+				}
+			}
+
+			// 3. icon or img
+			&[data-icon],
+			&[data-semantic]:not([data-semantic="adaptive"]),
+			&:has(img) {
+				grid-template-areas: "icon content link";
+				grid-template-columns: min-content 1fr min-content;
+
+				&:has(.db-button) {
+					grid-template-columns: min-content 1fr min-content min-content;
+					grid-template-areas: "icon content link close";
+				}
+
+				&:has(header) {
+					grid-template-columns: min-content 1fr min-content;
+					grid-template-areas:
+						"icon head link"
+						"icon content content";
+
+					&:has(.db-button) {
+						grid-template-columns: min-content 1fr min-content min-content;
+						grid-template-areas:
+							"icon head link close"
+							"icon content content content";
+					}
+				}
+			}
+		}
+	}
+
+	&[data-variant="overlay"] {
+		@extend %grid-layout-variant-overlay;
+
+		box-shadow: variables.$db-elevation-md;
+	}
+
+	&:not([data-variant="overlay"]) {
+		@extend %grid-layout-variant-not-overlay;
+	}
+
+	&[data-variant="overlay"],
+	&[data-variant="standalone"] {
+		@extend %default-card;
+	}
+
+	@each $name in colors.$variant-colors {
+		&[data-semantic="#{$name}"] {
+			@extend %db-#{$name}-variables;
+
+			@include icons.variant-icons($name);
+
+			&::before {
+				@extend %icon;
+			}
+		}
+	}
+}

package/build/components/page/page.css

@@ -0,0 +1,49 @@
+/* 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-page-document {
+  block-size: 100%;
+  overflow: hidden;
+}
+
+.db-page {
+  opacity: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-page[data-fade-in=true] {
+    transition: opacity var(--db-transition-straight-emotional);
+  }
+}
+.db-page:not([data-fonts-loaded]), .db-page[data-fonts-loaded=true] {
+  opacity: 1;
+}
+.db-page[data-variant=fixed] {
+  block-size: 100%;
+  min-block-size: 100%;
+  display: flex;
+  flex-direction: column;
+  /* workaround for angular */
+}
+.db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer) {
+  display: flex;
+  flex: 0 1 auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer) {
+  display: flex;
+  flex: 0 1 auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.db-page[data-variant=fixed] > .db-main {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  flex: 1 1 auto;
+  inline-size: 100%;
+}

package/build/components/page/page.scss

@@ -0,0 +1,52 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+
+.db-page-document {
+	block-size: 100%;
+	overflow: hidden;
+}
+
+@mixin header-footer-style {
+	> :is(.db-header, .db-footer, header, footer) {
+		display: flex;
+		flex: 0 1 auto;
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+}
+
+.db-page {
+	opacity: 0;
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		&[data-fade-in="true"] {
+			transition: opacity variables.$db-transition-straight-emotional;
+		}
+	}
+
+	&:not([data-fonts-loaded]),
+	&[data-fonts-loaded="true"] {
+		opacity: 1;
+	}
+
+	&[data-variant="fixed"] {
+		@include header-footer-style();
+
+		block-size: 100%;
+		min-block-size: 100%;
+		display: flex;
+		flex-direction: column;
+
+		/* workaround for angular */
+		> :is(db-header, dbheader, dbfooter, db-footer) {
+			@include header-footer-style();
+		}
+
+		> .db-main {
+			display: flex;
+			flex-direction: column;
+			overflow: auto;
+			flex: 1 1 auto;
+			inline-size: 100%;
+		}
+	}
+}

package/build/components/popover/popover.css

@@ -0,0 +1,291 @@
+/* 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 */
+/* Variants for adaptive components like input, select, notification, ... */
+@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%));
+  }
+}
+.db-popover > article {
+  border: var(--db-border-height-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+
+.db-popover > article {
+  /* stylelint-disable-next-line db-ux/use-border-radius */
+  border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
+}
+
+.db-popover > article:not([data-placement]), .db-popover > article[data-placement=bottom]:not([data-outside-vy]), .db-popover > article[data-placement=top]:not([data-outside-vy]), .db-popover > article:is([data-outside-vy=bottom], [data-outside-vy=top]):not([data-outside-vx],
+[data-placement$=end],
+[data-placement$=start]) {
+  --db-popover-center-x: -50%;
+  inset-inline-start: 50%;
+}
+.db-popover > article[data-placement=left]:not([data-outside-vx]), .db-popover > article[data-placement=right]:not([data-outside-vx]), .db-popover > article[data-outside-vx=left]:not([data-placement$=end],
+[data-placement$=start]), .db-popover > article[data-outside-vx=right]:not([data-placement$=end],
+[data-placement$=start]) {
+  --db-popover-center-y: -50%;
+  inset-block-start: 50%;
+}
+
+.db-popover > article {
+  --db-popover-distance: var(--db-spacing-fixed-2xs);
+}
+.db-popover > article::before {
+  content: "";
+  position: absolute;
+}
+.db-popover > article[data-gap=true] {
+  --db-popover-gap: 1;
+  --db-popover-distance: var(--db-spacing-fixed-md);
+}
+.db-popover > article:is(.db-tooltip) {
+  --db-popover-distance: var(--db-spacing-fixed-sm);
+}
+.db-popover > article[data-placement^=bottom]:not([data-outside-vy])[data-placement$=end], .db-popover > article[data-placement^=top]:not([data-outside-vy])[data-placement$=end], .db-popover > article[data-outside-vy=bottom]:not([data-outside-vx])[data-placement$=end], .db-popover > article[data-outside-vy=top]:not([data-outside-vx])[data-placement$=end] {
+  inset-inline-end: 0;
+}
+.db-popover > article[data-placement^=bottom]:not([data-outside-vy])[data-placement$=start], .db-popover > article[data-placement^=top]:not([data-outside-vy])[data-placement$=start], .db-popover > article[data-outside-vy=bottom]:not([data-outside-vx])[data-placement$=start], .db-popover > article[data-outside-vy=top]:not([data-outside-vx])[data-placement$=start] {
+  inset-inline-start: 0;
+}
+.db-popover > article[data-placement^=left]:not([data-outside-vx])[data-placement$=end], .db-popover > article[data-placement^=right]:not([data-outside-vx])[data-placement$=end], .db-popover > article[data-outside-vx=left][data-placement$=end], .db-popover > article[data-outside-vx=right][data-placement$=end] {
+  inset-block-end: 0;
+}
+.db-popover > article[data-placement^=left]:not([data-outside-vx])[data-placement$=start], .db-popover > article[data-placement^=right]:not([data-outside-vx])[data-placement$=start], .db-popover > article[data-outside-vx=left][data-placement$=start], .db-popover > article[data-outside-vx=right][data-placement$=start] {
+  inset-block-start: 0;
+}
+.db-popover > article:not([data-placement], [data-outside-vy]), .db-popover > article[data-placement^=bottom]:not([data-outside-vy]), .db-popover > article[data-outside-vy=top]:not([data-outside-vx]) {
+  inset-block-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
+}
+.db-popover > article:not([data-placement], [data-outside-vy])::before, .db-popover > article[data-placement^=bottom]:not([data-outside-vy])::before, .db-popover > article[data-outside-vy=top]:not([data-outside-vx])::before {
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: var(--db-popover-distance);
+  inset-block-start: calc(-1 * var(--db-popover-distance));
+}
+.db-popover > article[data-placement^=top]:not([data-outside-vy]), .db-popover > article[data-outside-vy=bottom]:not([data-outside-vx]) {
+  inset-block-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
+}
+.db-popover > article[data-placement^=top]:not([data-outside-vy])::before, .db-popover > article[data-outside-vy=bottom]:not([data-outside-vx])::before {
+  inset-inline-end: 0;
+  inline-size: 100%;
+  block-size: var(--db-popover-distance);
+  inset-block-end: calc(-1 * var(--db-popover-distance));
+}
+.db-popover > article[data-placement^=left]:not([data-outside-vx]), .db-popover > article[data-outside-vx=right] {
+  inset-inline-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
+}
+.db-popover > article[data-placement^=left]:not([data-outside-vx])::before, .db-popover > article[data-outside-vx=right]::before {
+  inset-block-end: 0;
+  block-size: 100%;
+  inline-size: var(--db-popover-distance);
+  inset-inline-end: calc(-1 * var(--db-popover-distance));
+}
+.db-popover > article[data-placement^=right]:not([data-outside-vx]), .db-popover > article[data-outside-vx=left] {
+  inset-inline-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
+}
+.db-popover > article[data-placement^=right]:not([data-outside-vx])::before, .db-popover > article[data-outside-vx=left]::before {
+  inset-block-start: 0;
+  block-size: 100%;
+  inline-size: var(--db-popover-distance);
+  inset-inline-start: calc(-1 * var(--db-popover-distance));
+}
+
+.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-open=false]), .db-popover > article[data-open=true] {
+  display: revert;
+}
+.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy]):not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy]):not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx]):not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx]) {
+  --db-popover-translate-y: -25%;
+}
+.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy]):not([data-animation]):not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy]):not([data-animation]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy])[data-animation=false]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy])[data-animation=false], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy]):not([data-animation]):not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy]):not([data-animation]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy])[data-animation=false]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy])[data-animation=false], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx]):not([data-animation]):not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx]):not([data-animation]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx])[data-animation=false]:not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx])[data-animation=false] {
+  opacity: 1;
+  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy])[data-animation=true]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx])[data-animation=true]:not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx])[data-animation=true] {
+    animation: popover-animation var(--db-transition-straight-emotional) normal both;
+  }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy])[data-animation=true][data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx])[data-animation=true][data-delay=slow] {
+    animation-delay: var(--db-transition-duration-fast);
+  }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy])[data-animation=true][data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx])[data-animation=true][data-delay=fast] {
+    animation-delay: calc(var(--db-transition-duration-fast) / 2);
+  }
+}
+.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy]):not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx]):not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx]) {
+  --db-popover-translate-y: 25%;
+}
+.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy]):not([data-animation]):not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy]):not([data-animation]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy])[data-animation=false]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy])[data-animation=false], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx]):not([data-animation]):not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx]):not([data-animation]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx])[data-animation=false]:not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx])[data-animation=false] {
+  opacity: 1;
+  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx])[data-animation=true]:not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx])[data-animation=true] {
+    animation: popover-animation var(--db-transition-straight-emotional) normal both;
+  }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy])[data-animation=true][data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx])[data-animation=true][data-delay=slow] {
+    animation-delay: var(--db-transition-duration-fast);
+  }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy])[data-animation=true][data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx])[data-animation=true][data-delay=fast] {
+    animation-delay: calc(var(--db-transition-duration-fast) / 2);
+  }
+}
+.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx]):not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left]:not([data-open=false]), .db-popover > article[data-outside-vx=left][data-open=true] {
+  --db-popover-translate-x: -25%;
+}
+.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx]):not([data-animation]):not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx]):not([data-animation]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx])[data-animation=false]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx])[data-animation=false], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left]:not([data-animation]):not([data-open=false]), .db-popover > article[data-outside-vx=left][data-open=true]:not([data-animation]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left][data-animation=false]:not([data-open=false]), .db-popover > article[data-outside-vx=left][data-animation=false][data-open=true] {
+  opacity: 1;
+  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left][data-animation=true]:not([data-open=false]), .db-popover > article[data-outside-vx=left][data-animation=true][data-open=true] {
+    animation: popover-animation var(--db-transition-straight-emotional) normal both;
+  }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx])[data-animation=true][data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left][data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-outside-vx=left][data-animation=true][data-delay=slow][data-open=true] {
+    animation-delay: var(--db-transition-duration-fast);
+  }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx])[data-animation=true][data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left][data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-outside-vx=left][data-animation=true][data-delay=fast][data-open=true] {
+    animation-delay: calc(var(--db-transition-duration-fast) / 2);
+  }
+}
+.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx]):not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right]:not([data-open=false]), .db-popover > article[data-outside-vx=right][data-open=true] {
+  --db-popover-translate-x: 25%;
+}
+.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx]):not([data-animation]):not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx]):not([data-animation]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx])[data-animation=false]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx])[data-animation=false], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right]:not([data-animation]):not([data-open=false]), .db-popover > article[data-outside-vx=right][data-open=true]:not([data-animation]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right][data-animation=false]:not([data-open=false]), .db-popover > article[data-outside-vx=right][data-animation=false][data-open=true] {
+  opacity: 1;
+  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right][data-animation=true]:not([data-open=false]), .db-popover > article[data-outside-vx=right][data-animation=true][data-open=true] {
+    animation: popover-animation var(--db-transition-straight-emotional) normal both;
+  }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx])[data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx])[data-animation=true][data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right][data-animation=true][data-delay=slow]:not([data-open=false]), .db-popover > article[data-outside-vx=right][data-animation=true][data-delay=slow][data-open=true] {
+    animation-delay: var(--db-transition-duration-fast);
+  }
+  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx])[data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx])[data-animation=true][data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right][data-animation=true][data-delay=fast]:not([data-open=false]), .db-popover > article[data-outside-vx=right][data-animation=true][data-delay=fast][data-open=true] {
+    animation-delay: calc(var(--db-transition-duration-fast) / 2);
+  }
+}
+
+.db-popover > article {
+  position: absolute;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  box-shadow: var(--db-elevation-md);
+  display: none;
+  z-index: 1;
+  white-space: nowrap;
+}
+.db-popover > article[data-width=fixed] {
+  inline-size: max-content;
+  max-inline-size: var(--db-sizing-3xl);
+  white-space: normal;
+  text-align: initial;
+}
+
+.db-popover {
+  position: relative;
+  display: flex;
+  inline-size: fit-content;
+}
+.db-popover > article {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-popover > article:not([data-spacing]) {
+  padding: var(--db-spacing-fixed-sm);
+}
+.db-popover > article[data-spacing=large] {
+  padding: var(--db-spacing-fixed-lg);
+}
+.db-popover > article[data-spacing=medium] {
+  padding: var(--db-spacing-fixed-md);
+}
+.db-popover > article[data-spacing=small] {
+  padding: var(--db-spacing-fixed-sm);
+}
+.db-popover > article[data-spacing=none] {
+  padding: 0;
+}

package/build/components/popover/popover.scss

@@ -0,0 +1,26 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "../../styles/internal/popover-component";
+@use "../../styles/internal/component";
+
+.db-popover {
+	position: relative;
+	display: flex;
+	inline-size: fit-content;
+
+	&:is([data-e2e-hover="true"], :hover, :focus-within) {
+		> article:not([data-open="false"]) {
+			@extend %show-popover;
+		}
+	}
+
+	> article {
+		@extend %popover-center;
+		@extend %default-popover;
+
+		@include component.get-data-spacing();
+
+		&[data-open="true"] {
+			@extend %show-popover;
+		}
+	}
+}