@db-ux/core-components 3.0.2-shell4-bdb351c → 3.0.3

package/build/assets/icons/LICENCES.json

@@ -17,18 +17,6 @@
 		"licence": "https://lucide.dev/license#lucide-license",
 		"origin": "arrow-right"
 	},
-	{
-		"name": "house.svg",
-		"type": "lucide",
-		"licence": "https://lucide.dev/license#lucide-license",
-		"origin": "house"
-	},
-	{
-		"name": "intermediary_stop.svg",
-		"type": "lucide",
-		"licence": "https://lucide.dev/license#lucide-license",
-		"origin": "circle-small"
-	},
 	{
 		"name": "arrow_up.svg",
 		"type": "lucide",
@@ -65,18 +53,6 @@
 		"licence": "https://lucide.dev/license#lucide-license",
 		"origin": "chevron-up"
 	},
-	{
-		"name": "double_chevron_left.svg",
-		"type": "lucide",
-		"licence": "https://lucide.dev/license#lucide-license",
-		"origin": "chevrons_left"
-	},
-	{
-		"name": "double_chevron_right.svg",
-		"type": "lucide",
-		"licence": "https://lucide.dev/license#lucide-license",
-		"origin": "chevrons-right"
-	},
 	{
 		"name": "clock.svg",
 		"type": "lucide",

package/build/components/accordion/accordion.css

@@ -81,14 +81,14 @@ The spacings are not part of the styling of the accordion items themselves.
   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-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item::before,
-  .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item::before, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item::before,
-  .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item::before {
-    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item,
+  .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item,
+  .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item::before,

package/build/components/{control-panel-brand/control-panel-brand.css → brand/brand.css}

@@ -75,12 +75,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-control-panel-brand {
+.db-brand {
   font: var(--db-type-body-md);
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  .db-control-panel-brand {
+  .db-brand {
     /* 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);
@@ -113,27 +113,21 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-control-panel-brand {
+.db-brand {
   display: flex;
   gap: var(--db-spacing-fixed-sm);
   align-items: center;
   font-weight: 700;
-  grid-area: brand;
-  block-size: var(--db-sizing-md);
-  min-block-size: var(--db-sizing-md);
 }
-.db-control-panel-brand::before {
+.db-brand::before {
   --db-icon-font-size: var(--db-sizing-md);
   --db-icon-margin-end: 0;
   --db-icon-color: var(--db-brand-origin-default);
 }
-.db-control-panel-brand:has(img, svg)::before {
-  content: none;
-}
-.db-control-panel-brand img {
+.db-brand img {
   inline-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
   max-block-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
 }
-.db-control-panel-brand a {
+.db-brand a {
   text-decoration: none;
 }

package/build/components/{control-panel-brand/control-panel-brand.scss → brand/brand.scss}

@@ -2,16 +2,13 @@
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/fonts";
 
-.db-control-panel-brand {
+.db-brand {
 	@extend %db-overwrite-font-size-md;
 
 	display: flex;
 	gap: variables.$db-spacing-fixed-sm;
 	align-items: center;
 	font-weight: 700;
-	grid-area: brand;
-	block-size: variables.$db-sizing-md;
-	min-block-size: variables.$db-sizing-md;
 
 	&::before {
 		--db-icon-font-size: #{variables.$db-sizing-md};
@@ -19,12 +16,6 @@
 		--db-icon-color: #{colors.$db-brand-origin-default};
 	}
 
-	&:has(img, svg) {
-		&::before {
-			content: none;
-		}
-	}
-
 	img {
 		$logo-size: calc(
 			#{variables.$db-sizing-md} - #{variables.$db-sizing-3xs}

package/build/components/button/button.css

@@ -259,7 +259,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-button:disabled {
+.db-button:is(:disabled, [aria-disabled=true]) {
   opacity: var(--db-opacity-md);
 }
 .db-button:has(> .db-button) {

package/build/components/button/button.scss

@@ -106,11 +106,11 @@
 		}
 	}
 
-	&:disabled {
+	&:is(:disabled, [aria-disabled="true"]) {
 		opacity: variables.$db-opacity-md;
 	}
 
-	// Workaround for current stencil implementation for control-panel-desktop
+	// Workaround for current stencil implementation for header
 	&:has(> .db-button) {
 		margin: 0;
 		padding: 0;

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]::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],
+  .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,

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)::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-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-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)::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-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-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)::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);
+  .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);
   }
 }
 @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]::before {
-    border-block-end: 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] {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: 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)::before {
-    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .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 > 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])::before {
-    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .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])[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]::before {
-    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .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]: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:not([data-direction]), .db-drawer .db-drawer-container[data-direction=right] {
+.db-drawer .db-drawer-container {
   inset-inline: auto 0;
 }
-.db-drawer [data-rounded=true].db-drawer-container:not([data-direction]), .db-drawer [data-rounded=true].db-drawer-container[data-direction=right] {
+.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);
 }
@@ -172,7 +172,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .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)));
   min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
-  max-inline-size: 100vw;
+  max-inline-size: none;
 }
 
 .db-drawer .db-drawer-container[data-direction=up] {
@@ -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::before {
-    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .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 .db-drawer-header-text {
@@ -340,7 +340,6 @@ 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

@@ -34,7 +34,7 @@
 			--db-drawer-min-height,
 			calc(100% - #{variables.$db-spacing-fixed-xl})
 		);
-		max-inline-size: 100vw;
+		max-inline-size: none;
 	}
 }
 
@@ -122,6 +122,7 @@ $spacings: (
 
 .db-drawer {
 	.db-drawer-container {
+		@extend %direction-right;
 		@extend %spacing-drawer;
 
 		display: flex;
@@ -164,11 +165,6 @@ $spacings: (
 			box-shadow: variables.$db-elevation-md;
 		}
 
-		&:not([data-direction]),
-		&[data-direction="right"] {
-			@extend %direction-right;
-		}
-
 		&[data-direction="left"] {
 			@extend %direction-left;
 		}
@@ -203,7 +199,6 @@ $spacings: (
 			&:has(.button-close-drawer),
 			&:has(:not(.db-drawer-header-text:empty)) {
 				display: flex;
-				gap: variables.$db-spacing-fixed-md;
 			}
 		}
 	}