@db-ux/core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/build/components/control-panel-mobile/control-panel-mobile.scss

@@ -0,0 +1,125 @@
+@use "sass:string";
+@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/colors";
+@use "../../styles/internal/component";
+@use "../../styles/internal/custom-elements";
+@use "../../styles/internal/control-panel-mobile";
+@use "../../styles/internal/navigation-item";
+@use "../../styles/internal/indicator";
+
+.db-control-panel-mobile {
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	display: grid;
+	position: relative;
+	min-block-size: component.$min-mobile-header-height;
+	gap: variables.$db-spacing-fixed-xs;
+	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
+
+	&[data-position="top"] {
+		@extend %control-panel-mobile-position-top;
+	}
+
+	&[data-position="bottom"] {
+		@extend %control-panel-mobile-position-bottom;
+	}
+
+	.db-control-panel-brand {
+		justify-self: self-start;
+		inline-size: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.db-control-panel-mobile-button {
+		grid-area: drawer-button;
+	}
+
+	@include control-panel-mobile.has-empty-drawer {
+		--db-control-panel-mobile-position-top-grid-areas: "brand primary";
+		--db-control-panel-mobile-position-top-grid-columns: [brand] 1fr
+			[primary] min-content;
+
+		// If drawer is empty we hide burger button
+		.db-control-panel-mobile-button {
+			display: none;
+		}
+
+		// We don't show primary border in this case
+		.db-control-panel-primary-actions {
+			padding-inline-end: 0;
+
+			&::before {
+				display: none;
+			}
+		}
+	}
+
+	.db-drawer {
+		--db-drawer-content-padding-inline: 0;
+		--db-drawer-max-width: variables.$db-container-xs;
+		--db-drawer-max-height: 63vh;
+
+		> .db-drawer-container {
+			> .db-drawer-content {
+				display: flex;
+				flex-direction: column;
+				block-size: 100%;
+
+				.db-control-panel-secondary-actions {
+					flex-shrink: 0;
+					padding-inline: variables.$db-spacing-fixed-md;
+					padding-block-start: variables.$db-spacing-fixed-xs;
+
+					@include helpers.divider("top");
+				}
+
+				.db-control-panel-mobile-drawer-scroll-container {
+					display: flex;
+					flex-direction: column;
+					overflow-y: auto;
+					block-size: 100%;
+
+					.db-control-panel-meta-navigation {
+						padding: variables.$db-spacing-fixed-md;
+						margin-block-start: auto;
+
+						@include helpers.divider("top");
+					}
+
+					.db-navigation {
+						padding: variables.$db-spacing-fixed-md;
+
+						#{string.unquote(custom-elements.$overflow-scroll-left-button)},
+						#{string.unquote(custom-elements.$overflow-scroll-right-button)} {
+							display: none;
+						}
+
+						> menu {
+							@include navigation-item.direct-navigation-items {
+								@extend %indicator;
+
+								@include indicator.set-indicator-vertical();
+
+								@include navigation-item.active-navigation-item {
+									@include indicator.show-indicator-vertical(
+
+									);
+								}
+
+								@include navigation-item.direct-navigation-items {
+									/* Workaround for custom-elements */
+									&::after {
+										content: none;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/build/components/control-panel-primary-actions/control-panel-primary-actions.css

@@ -0,0 +1,16 @@
+/* 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 */
+/* Opacity */
+/* Transitions */
+/* Screen sizes */
+/* Container sizes */
+.db-control-panel-primary-actions {
+  grid-area: primary;
+  display: flex;
+  gap: var(--db-spacing-fixed-xs);
+  align-items: center;
+}

package/build/components/control-panel-primary-actions/control-panel-primary-actions.scss

@@ -0,0 +1,8 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+
+.db-control-panel-primary-actions {
+	grid-area: primary;
+	display: flex;
+	gap: variables.$db-spacing-fixed-xs;
+	align-items: center;
+}

package/build/components/control-panel-secondary-actions/control-panel-secondary-actions.css

@@ -0,0 +1,16 @@
+/* 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 */
+/* Opacity */
+/* Transitions */
+/* Screen sizes */
+/* Container sizes */
+.db-control-panel-secondary-actions {
+  grid-area: secondary;
+  display: flex;
+  gap: var(--db-spacing-fixed-xs);
+  align-items: center;
+}

package/build/components/control-panel-secondary-actions/control-panel-secondary-actions.scss

@@ -0,0 +1,8 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+
+.db-control-panel-secondary-actions {
+	grid-area: secondary;
+	display: flex;
+	gap: variables.$db-spacing-fixed-xs;
+	align-items: center;
+}

package/build/components/custom-select/custom-select.css

@@ -1122,12 +1122,12 @@ summary[aria-disabled=true]) {
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost],
-  .db-custom-select > .db-button[data-icon=cross][data-variant=ghost] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost]::after,
+  .db-custom-select > .db-button[data-icon=cross][data-variant=ghost]::after {
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost]::after,

package/build/components/custom-select-dropdown/custom-select-dropdown.css

@@ -414,13 +414,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-checkbox),
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-checkbox) {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-checkbox)::after,
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-checkbox)::after {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button), .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input),
@@ -445,13 +445,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input),
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-input) {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input)::after,
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-input)::after {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button),
@@ -473,13 +473,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button),
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button) {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)::after,
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)::after {
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 @media screen and (min-width: 48em) {

package/build/components/custom-select-list-item/custom-select-list-item.css

@@ -164,12 +164,12 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-divider=true] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-divider=true]::before {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -222,12 +222,12 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-custom-select-list-item[data-divider=true]:not(:last-of-type) {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-list-item[data-divider=true]:not(:last-of-type)::before {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-custom-select-list-item > label {

package/build/components/divider/divider.css

@@ -70,12 +70,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider:not([data-variant=vertical]) {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider:not([data-variant=vertical])::before {
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-divider:not([data-variant=vertical])[data-width=full] {
@@ -96,12 +96,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider[data-variant=vertical] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider[data-variant=vertical]::before {
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-divider[data-variant=vertical]:is(:not([data-margin]), [data-margin=small]) {

package/build/components/drawer/drawer.css

@@ -153,10 +153,10 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
 }
 
-.db-drawer .db-drawer-container {
+.db-drawer .db-drawer-container:not([data-direction]), .db-drawer .db-drawer-container[data-direction=right] {
   inset-inline: auto 0;
 }
-.db-drawer [data-rounded=true].db-drawer-container {
+.db-drawer [data-rounded=true].db-drawer-container:not([data-direction]), .db-drawer [data-rounded=true].db-drawer-container[data-direction=right] {
   border-start-start-radius: var(--db-border-radius-sm);
   border-end-start-radius: var(--db-border-radius-sm);
 }
@@ -320,12 +320,12 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* 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-width-3xs) solid var(--db-divider-bg-color);
+  .db-drawer .db-drawer-container .db-drawer-header::before {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-drawer .db-drawer-container .db-drawer-header .db-drawer-header-text {
@@ -340,6 +340,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 .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;
+  gap: var(--db-spacing-fixed-md);
 }
 .db-drawer[data-position=absolute] {
   position: absolute;

package/build/components/drawer/drawer.scss

@@ -26,10 +26,6 @@
 
 %full-horizontal {
 	&:not([data-width="full"]) {
-		/// Sets the maximum height of the drawer
-		/// @propertyname max-block-size
-		/// @cssprop --db-drawer-max-height
-		/// @default calc(100% - #{variables.$db-spacing-fixed-xl})
 		max-block-size: var(
 			--db-drawer-max-height,
 			calc(100% - #{variables.$db-spacing-fixed-xl})
@@ -91,10 +87,6 @@ $spacings: (
 
 	.db-drawer-header {
 		// We need this variable to overwrite it inside the header
-		/// Controls the bottom padding inside the drawer header
-		/// @propertyname padding-block-end
-		/// @cssprop --db-drawer-header-padding-block-end
-		/// @default #{map.get($spacing, "block")}
 		/* stylelint-disable-next-line db-ux/use-spacings */
 		padding-block-end: var(
 			--db-drawer-header-padding-block-end,
@@ -105,10 +97,6 @@ $spacings: (
 
 	.db-drawer-content {
 		// We need this variable to overwrite it inside the header
-		/// Controls left/right padding inside the drawer content area
-		/// @propertyname padding-inline
-		/// @cssprop --db-drawer-content-padding-inline
-		/// @default #{map.get($spacing, "inline")}
 		/* stylelint-disable-next-line db-ux/use-spacings */
 		padding-inline: var(
 			--db-drawer-content-padding-inline,
@@ -134,7 +122,6 @@ $spacings: (
 
 .db-drawer {
 	.db-drawer-container {
-		@extend %direction-right;
 		@extend %spacing-drawer;
 
 		display: flex;
@@ -146,19 +133,6 @@ $spacings: (
 		box-shadow: variables.$db-elevation-md;
 
 		&:not([data-width="full"]) {
-			/// Sets the maximum width of the drawer
-			/// and some default values for the drawer
-			/// @propertyname max-inline-size
-			/// @cssprop --db-drawer-max-width
-			/// @default calc(100% - #{variables.$db-spacing-fixed-xl})
-			///
-			/// @example css - Wide drawer
-			///   .db-drawer-wide {
-			///     --db-drawer-max-width: 800px;
-			///   }
-			///   <div class="db-drawer db-drawer-wide">
-			///     <!-- wide drawer -->
-			///   </div>
 			max-inline-size: var(
 				--db-drawer-max-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})
@@ -190,6 +164,11 @@ $spacings: (
 			box-shadow: variables.$db-elevation-md;
 		}
 
+		&:not([data-direction]),
+		&[data-direction="right"] {
+			@extend %direction-right;
+		}
+
 		&[data-direction="left"] {
 			@extend %direction-left;
 		}
@@ -224,6 +203,7 @@ $spacings: (
 			&:has(.button-close-drawer),
 			&:has(:not(.db-drawer-header-text:empty)) {
 				display: flex;
+				gap: variables.$db-spacing-fixed-md;
 			}
 		}
 	}