@db-ux/core-components 4.4.3 → 4.5.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @db-ux/core-components
 
+## 4.5.1
+
+### Patch Changes
+
+- fix: issue with DBButton `noText` and `width="full"` not having fixed size - [see commit bc81b40](https://github.com/db-ux-design-system/core-web/commit/bc81b402660871d706b1bf8d3fbac6713a7c9670)
+
+- fix: issue with hover state when using DBPopover/Tooltip with animation - [see commit bc4801b](https://github.com/db-ux-design-system/core-web/commit/bc4801bf0b32d5dc4fd8e29626a6122e34fb6ada)
+
+- fix: issue with DBCustomSelect inside DBDrawer (or other `<dialog>` based) components, which has a problem with top-layer and focus - [see commit 6547ada](https://github.com/db-ux-design-system/core-web/commit/6547ada44844cbed1b8207db742a5119edb945f6)
+
+- fix(`input type="date"`): wrong padding and color for successful and critical state - [see commit 4f3db42](https://github.com/db-ux-design-system/core-web/commit/4f3db4262a652ac8d6353bd1a0a92a4a62b6ff86)
+
+## 4.5.0
+
+### Minor Changes
+
+- feat: add `wrap` property for possible inline components (badge, button, infotext, tooltip) besides link and navigation-item, which already have the `wrap` property - [see commit c08970c](https://github.com/db-ux-design-system/core-web/commit/c08970c640f24abee93ed17de258f4e15fa7cb7f)
+
+- feat: add DBCustomButton for development to style `<a>` or `<label><input/>` children - [see commit a50323b](https://github.com/db-ux-design-system/core-web/commit/a50323b21363981c02bbabf7828a6f2d94f11e4d)
+
 ## 4.4.3
 
 ### Patch Changes

package/build/components/accordion-item/accordion-item.css

@@ -54,10 +54,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     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% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }
@@ -86,6 +88,7 @@
   text-transform: none;
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
+  /* stylelint-disable-next-line db-ux/use-sizing */
   block-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
@@ -198,7 +201,7 @@
 }
 .db-accordion-item > details[open] > summary + div {
   block-size: auto;
-  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  /* stylelint-disable-next-line declaration-property-value-no-unknown, db-ux/use-sizing */
   block-size: calc-size(auto, size);
 }
 .db-accordion-item > details[open] > summary::after {
@@ -231,24 +234,54 @@
 .db-accordion-item > details > summary:not([hidden]) {
   display: flex;
 }
-.db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]) {
+.db-accordion-item > details > summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-level-1-hovered);
 }
-.db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-accordion-item > details > summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-accordion-item > details > summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-accordion-item > details > summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-accordion-item > details > summary:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]) {
+.db-accordion-item > details > summary:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-level-1-pressed);
 }
-.db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-accordion-item > details > summary:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-accordion-item > details > summary:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-accordion-item > details > summary:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-accordion-item > details > summary:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-accordion-item > details > summary::-webkit-details-marker {

package/build/components/accordion-item/accordion-item.scss

@@ -15,7 +15,7 @@
 		&[open] {
 			> summary + div {
 				block-size: auto;
-				/* stylelint-disable-next-line declaration-property-value-no-unknown */
+				/* stylelint-disable-next-line declaration-property-value-no-unknown, db-ux/use-sizing */
 				block-size: calc-size(auto, size);
 			}
 

package/build/components/badge/badge.css

@@ -111,6 +111,10 @@
 
 @layer variables {}
 
+.db-badge {
+  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+
 .db-badge {
   font-weight: 700;
   overflow-wrap: break-word;
@@ -124,10 +128,6 @@
   display: inline-flex;
 }
 
-.db-badge {
-  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
-}
-
 .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button {
   --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
   border-color: var(--db-tag-border-color);
@@ -138,24 +138,84 @@
 .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::before, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::before, .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::after, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::after {
   --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
 }
-.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]) {
+.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-vibrant-hovered);
 }
-.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]) {
+.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-vibrant-pressed);
 }
-.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 
@@ -320,6 +380,9 @@
 .db-badge:has(.db-icon) {
   padding: var(--db-spacing-fixed-3xs);
 }
+.db-badge[data-wrap=false] {
+  white-space: nowrap;
+}
 .db-badge[data-size=medium] {
   --badge-size: var(--db-spacing-fixed-sm);
   padding-inline: var(--db-spacing-fixed-xs);
@@ -330,8 +393,9 @@
 }
 .db-badge:empty,
 .db-badge > span:empty {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   block-size: var(--badge-size);
-  inline-size: var(--badge-size);
+  aspect-ratio: 1;
   padding: 0;
 }
 .db-badge[data-placement^=corner][data-label]::before {

package/build/components/badge/badge.scss

@@ -70,6 +70,10 @@
 		@extend %db-overwrite-font-size-2xs;
 	}
 
+	&[data-wrap="false"] {
+		white-space: nowrap;
+	}
+
 	&[data-size="medium"] {
 		--badge-size: #{variables.$db-spacing-fixed-sm};
 
@@ -90,8 +94,9 @@
 
 	&:empty,
 	> span:empty {
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		block-size: var(--badge-size);
-		inline-size: var(--badge-size);
+		aspect-ratio: 1;
 		padding: 0;
 	}
 

package/build/components/brand/brand.css

@@ -111,7 +111,9 @@
   --db-icon-color: var(--db-brand-origin-default);
 }
 .db-brand img {
+  /* stylelint-disable-next-line db-ux/use-sizing */
   inline-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
+  /* stylelint-disable-next-line db-ux/use-sizing */
   max-block-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
 }
 .db-brand a {

package/build/components/brand/brand.scss

@@ -22,7 +22,9 @@
 			#{variables.$db-sizing-md} - #{variables.$db-sizing-3xs}
 		);
 
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		inline-size: $logo-size;
+		/* stylelint-disable-next-line db-ux/use-sizing */
 		max-block-size: $logo-size;
 	}