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

package/build/components/divider/divider.scss

@@ -0,0 +1,56 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+
+.db-divider {
+	&:is(:not([data-margin]), [data-margin="small"]) {
+		margin: variables.$db-spacing-fixed-sm 0;
+	}
+
+	&[data-margin="medium"] {
+		margin: variables.$db-spacing-fixed-md 0;
+	}
+
+	&[data-margin="large"] {
+		margin: variables.$db-spacing-fixed-lg 0;
+	}
+
+	&[data-margin="none"] {
+		margin: 0;
+	}
+
+	&:not([data-variant="vertical"]) {
+		@include helpers.divider();
+
+		block-size: variables.$db-border-height-3xs;
+
+		&[data-width="full"] {
+			inline-size: 100%;
+		}
+	}
+
+	&[data-variant="vertical"] {
+		@include helpers.divider("left");
+
+		inline-size: variables.$db-border-height-3xs;
+
+		&:is(:not([data-margin]), [data-margin="small"]) {
+			margin: 0 variables.$db-spacing-fixed-sm;
+		}
+
+		&[data-margin="medium"] {
+			margin: 0 variables.$db-spacing-fixed-md;
+		}
+
+		&[data-margin="large"] {
+			margin: 0 variables.$db-spacing-fixed-lg;
+		}
+
+		&[data-margin="none"] {
+			margin: 0;
+		}
+
+		&[data-width="full"] {
+			block-size: 100%;
+		}
+	}
+}

package/build/components/drawer/drawer.css

@@ -0,0 +1,303 @@
+/* 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%));
+  }
+}
+dialog[data-variant], dialog[data-backdrop] {
+  position: fixed;
+  inset: 0;
+  z-index: 9995;
+}
+
+dialog {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  z-index: 9996;
+  color: inherit;
+}
+dialog[data-variant=inside]:not([data-backdrop=none])::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+}
+dialog:not([data-backdrop=none])::backdrop, dialog:not([data-backdrop=none])::before {
+  background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  opacity: 0.64;
+}
+dialog:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=invisible]::before {
+  opacity: 0;
+}
+dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=weak]::before {
+  opacity: 0.32;
+}
+
+.db-drawer .db-drawer-container {
+  inset-inline: auto 0;
+}
+.db-drawer [data-rounded=true].db-drawer-container {
+  border-start-start-radius: var(--db-border-radius-sm);
+  border-end-start-radius: var(--db-border-radius-sm);
+}
+
+.db-drawer .db-drawer-container[data-direction=left] {
+  inset-inline: 0 auto;
+}
+.db-drawer [data-rounded=true].db-drawer-container[data-direction=left] {
+  border-start-end-radius: var(--db-border-radius-sm);
+  border-end-end-radius: var(--db-border-radius-sm);
+}
+
+.db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
+  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
+  max-inline-size: none;
+}
+
+.db-drawer .db-drawer-container[data-direction=up] {
+  inset: auto 0 0;
+}
+.db-drawer [data-rounded=true].db-drawer-container[data-direction=up] {
+  border-start-end-radius: var(--db-border-radius-sm);
+  border-start-start-radius: var(--db-border-radius-sm);
+}
+
+.db-drawer .db-drawer-container[data-direction=down] {
+  inset: 0 0 auto;
+}
+.db-drawer [data-rounded=true].db-drawer-container[data-direction=down] {
+  border-end-end-radius: var(--db-border-radius-sm);
+  border-end-start-radius: var(--db-border-radius-sm);
+}
+
+.db-drawer .db-drawer-container {
+  padding-block: var(--db-spacing-fixed-sm);
+}
+.db-drawer [data-spacing=small].db-drawer-container {
+  padding-block: var(--db-spacing-fixed-xs);
+}
+.db-drawer [data-spacing=small].db-drawer-container .db-drawer-header {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-xs));
+  padding-inline: var(--db-spacing-fixed-md);
+}
+.db-drawer [data-spacing=small].db-drawer-container .db-drawer-content {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-md));
+  overflow-y: auto;
+}
+.db-drawer .db-drawer-container .db-drawer-header {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-sm));
+  padding-inline: var(--db-spacing-fixed-lg);
+}
+.db-drawer .db-drawer-container .db-drawer-content {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
+  overflow-y: auto;
+}
+.db-drawer [data-spacing=medium].db-drawer-container {
+  padding-block: var(--db-spacing-fixed-sm);
+}
+.db-drawer [data-spacing=medium].db-drawer-container .db-drawer-header {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-sm));
+  padding-inline: var(--db-spacing-fixed-lg);
+}
+.db-drawer [data-spacing=medium].db-drawer-container .db-drawer-content {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
+  overflow-y: auto;
+}
+.db-drawer [data-spacing=large].db-drawer-container {
+  padding-block: var(--db-spacing-fixed-md);
+}
+.db-drawer [data-spacing=large].db-drawer-container .db-drawer-header {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-md));
+  padding-inline: var(--db-spacing-fixed-xl);
+}
+.db-drawer [data-spacing=large].db-drawer-container .db-drawer-content {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-xl));
+  overflow-y: auto;
+}
+.db-drawer [data-spacing=none].db-drawer-container {
+  padding-block: 0;
+}
+.db-drawer [data-spacing=none].db-drawer-container .db-drawer-header {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-end: var(--db-drawer-header-padding-block-end, 0);
+  padding-inline: 0;
+}
+.db-drawer [data-spacing=none].db-drawer-container .db-drawer-content {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline: var(--db-drawer-content-padding-inline, 0);
+  overflow-y: auto;
+}
+
+.db-drawer .db-drawer-container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  block-size: 100%;
+  inline-size: 100%;
+  position: fixed;
+  box-shadow: var(--db-elevation-md);
+}
+.db-drawer .db-drawer-container:not([data-width=full]) {
+  max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
+}
+.db-drawer .db-drawer-container[data-rounded=true] {
+  box-shadow: var(--db-elevation-md);
+}
+.db-drawer .db-drawer-container .db-drawer-header {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
+  display: none;
+}
+.db-drawer .db-drawer-container .db-drawer-header[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-drawer .db-drawer-container .db-drawer-header::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  block-size: var(--db-border-height-3xs);
+  inset-block-end: 0;
+  inset-inline: 0;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media (forced-colors: active) {
+  .db-drawer .db-drawer-container .db-drawer-header {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-drawer .db-drawer-container .db-drawer-header .db-drawer-header-text {
+  margin-block: auto;
+  font-weight: 700;
+}
+.db-drawer .db-drawer-container .db-drawer-header .button-close-drawer {
+  margin-inline-start: auto;
+}
+.db-drawer .db-drawer-container .db-drawer-header .button-close-drawer button {
+  margin-inline-start: auto;
+}
+.db-drawer .db-drawer-container .db-drawer-header:has(.button-close-drawer), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)) {
+  display: flex;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-drawer[open] .db-drawer-container:not([data-direction]), .db-drawer[open] .db-drawer-container[data-direction=right] {
+    animation: show-right-to-left var(--db-transition-straight-show);
+  }
+  .db-drawer[open] .db-drawer-container[data-direction=left] {
+    animation: show-left-to-right var(--db-transition-straight-show);
+  }
+  .db-drawer[open] .db-drawer-container[data-direction=up] {
+    animation: show-bottom-to-top var(--db-transition-straight-show);
+  }
+  .db-drawer[open] .db-drawer-container[data-direction=down] {
+    animation: show-top-to-bottom var(--db-transition-straight-show);
+  }
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-drawer[open] .db-drawer-container[hidden]:not([data-direction]), .db-drawer[open] .db-drawer-container[hidden][data-direction=right] {
+    animation: hide-right-to-left var(--db-transition-straight-hide);
+  }
+  .db-drawer[open] .db-drawer-container[hidden][data-direction=left] {
+    animation: hide-left-to-right var(--db-transition-straight-hide);
+  }
+  .db-drawer[open] .db-drawer-container[hidden][data-direction=up] {
+    animation: hide-bottom-to-top var(--db-transition-straight-hide);
+  }
+  .db-drawer[open] .db-drawer-container[hidden][data-direction=down] {
+    animation: hide-top-to-bottom var(--db-transition-straight-hide);
+  }
+}

package/build/components/drawer/drawer.scss

@@ -0,0 +1,228 @@
+@use "sass:map";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/animation";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "../../styles/internal/component";
+@use "../../styles/dialog-init";
+
+%direction-right {
+	inset-inline: auto 0;
+
+	&[data-rounded="true"] {
+		border-start-start-radius: variables.$db-border-radius-sm;
+		border-end-start-radius: variables.$db-border-radius-sm;
+	}
+}
+
+%direction-left {
+	inset-inline: 0 auto;
+
+	&[data-rounded="true"] {
+		border-start-end-radius: variables.$db-border-radius-sm;
+		border-end-end-radius: variables.$db-border-radius-sm;
+	}
+}
+
+%full-horizontal {
+	&:not([data-width="full"]) {
+		max-block-size: var(
+			--db-drawer-max-height,
+			calc(100% - #{variables.$db-spacing-fixed-xl})
+		);
+		max-inline-size: none;
+	}
+}
+
+%direction-up {
+	@extend %full-horizontal;
+
+	inset: auto 0 0;
+
+	&[data-rounded="true"] {
+		border-start-end-radius: variables.$db-border-radius-sm;
+		border-start-start-radius: variables.$db-border-radius-sm;
+	}
+}
+
+%direction-down {
+	@extend %full-horizontal;
+
+	inset: 0 0 auto;
+
+	&[data-rounded="true"] {
+		border-end-end-radius: variables.$db-border-radius-sm;
+		border-end-start-radius: variables.$db-border-radius-sm;
+	}
+}
+
+$spacings: (
+	"small": (
+		"block": variables.$db-spacing-fixed-xs,
+		"inline": variables.$db-spacing-fixed-md
+	),
+	"medium": (
+		"block": variables.$db-spacing-fixed-sm,
+		"inline": variables.$db-spacing-fixed-lg
+	),
+	"large": (
+		"block": variables.$db-spacing-fixed-md,
+		"inline": variables.$db-spacing-fixed-xl
+	),
+	"none": (
+		"block": 0,
+		"inline": 0
+	)
+);
+
+@mixin get-spacing($spacing) {
+	padding-block: map.get($spacing, "block");
+
+	.db-drawer-header {
+		// We need this variable to overwrite it inside the header
+		/* stylelint-disable-next-line db-ux/use-spacings */
+		padding-block-end: var(
+			--db-drawer-header-padding-block-end,
+			#{map.get($spacing, "block")}
+		);
+		padding-inline: map.get($spacing, "inline");
+	}
+
+	.db-drawer-content {
+		// We need this variable to overwrite it inside the header
+		/* stylelint-disable-next-line db-ux/use-spacings */
+		padding-inline: var(
+			--db-drawer-content-padding-inline,
+			#{map.get($spacing, "inline")}
+		);
+		// TODO: Evaluate whether we need overflow: hidden and that for only specifically set y here.
+		overflow-y: auto;
+	}
+}
+
+%spacing-drawer {
+	@each $name, $spacing in $spacings {
+		@if ($name == "medium") {
+			@include get-spacing($spacing);
+		}
+
+		&[data-spacing="#{$name}"] {
+			@include get-spacing($spacing);
+		}
+	}
+}
+
+.db-drawer {
+	.db-drawer-container {
+		@extend %direction-right;
+		@extend %spacing-drawer;
+
+		display: flex;
+		flex-direction: column;
+		background-color: colors.$db-adaptive-bg-basic-level-1-default;
+		block-size: 100%;
+		inline-size: 100%;
+		position: fixed;
+		box-shadow: variables.$db-elevation-md;
+
+		&:not([data-width="full"]) {
+			max-inline-size: var(
+				--db-drawer-max-width,
+				calc(100% - #{variables.$db-spacing-fixed-xl})
+			);
+		}
+
+		&[data-rounded="true"] {
+			box-shadow: variables.$db-elevation-md;
+		}
+
+		&[data-direction="left"] {
+			@extend %direction-left;
+		}
+
+		&[data-direction="up"] {
+			@extend %direction-up;
+		}
+
+		&[data-direction="down"] {
+			@extend %direction-down;
+		}
+
+		.db-drawer-header {
+			@include helpers.divider("bottom");
+
+			display: none;
+
+			.db-drawer-header-text {
+				margin-block: auto;
+				font-weight: 700;
+			}
+
+			.button-close-drawer {
+				margin-inline-start: auto;
+
+				// angular-workaround
+				button {
+					margin-inline-start: auto;
+				}
+			}
+
+			&:has(.button-close-drawer),
+			&:has(:not(.db-drawer-header-text:empty)) {
+				display: flex;
+			}
+		}
+	}
+
+	&[open] {
+		.db-drawer-container {
+			@media screen and (prefers-reduced-motion: no-preference) {
+				&:not([data-direction]),
+				&[data-direction="right"] {
+					animation: show-right-to-left
+						#{variables.$db-transition-straight-show};
+				}
+
+				&[data-direction="left"] {
+					animation: show-left-to-right
+						#{variables.$db-transition-straight-show};
+				}
+
+				&[data-direction="up"] {
+					animation: show-bottom-to-top
+						#{variables.$db-transition-straight-show};
+				}
+
+				&[data-direction="down"] {
+					animation: show-top-to-bottom
+						#{variables.$db-transition-straight-show};
+				}
+			}
+
+			&[hidden] {
+				@media screen and (prefers-reduced-motion: no-preference) {
+					&:not([data-direction]),
+					&[data-direction="right"] {
+						animation: hide-right-to-left
+							#{variables.$db-transition-straight-hide};
+					}
+
+					&[data-direction="left"] {
+						animation: hide-left-to-right
+							#{variables.$db-transition-straight-hide};
+					}
+
+					&[data-direction="up"] {
+						animation: hide-bottom-to-top
+							#{variables.$db-transition-straight-hide};
+					}
+
+					&[data-direction="down"] {
+						animation: hide-top-to-bottom
+							#{variables.$db-transition-straight-hide};
+					}
+				}
+			}
+		}
+	}
+}