@db-ux/core-components 4.3.2 → 4.4.0-loading-567cd0c

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/core-components
 
+## 4.4.0
+
+### Minor Changes
+
+- feat: add `role` property to DBNotification & automatically add role based on semantic if no `role` or `ariaLive` is provided to increase UX for screen-reader users - [see commit 177d71e](https://github.com/db-ux-design-system/core-web/commit/177d71e287a64a6491ba446e7812d0adbda1717e)
+
+- feat(DBSelect): hide empty first option in `required` selects with placeholder after the first user selection, and add `showEmptyOption` prop to overwrite this - [see commit 4280bc4](https://github.com/db-ux-design-system/core-web/commit/4280bc47538d6983d6bb5575f012b6c6b25b40e8)
+
 ## 4.3.2
 
 ### Patch Changes

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

@@ -77,6 +77,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
+@keyframes wobbling {
+  50% {
+    inset-inline-start: 100%;
+    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
+  }
+}
 .db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;

package/build/components/button/button.css

@@ -154,6 +154,48 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   display: inline-flex;
 }
 
+.db-button .db-loading-indicator:not([data-overlay]) div label, .db-button .db-loading-indicator:not([data-overlay=true]) div label,
+.db-button .db-loading-indicator:not([data-overlay]) div span,
+.db-button .db-loading-indicator:not([data-overlay=true]) div span {
+  display: none;
+}
+
+.db-button:has(.db-loading-indicator:not([data-overlay=true]))[data-icon]::before, .db-button:has(.db-loading-indicator:not([data-overlay=true]))[data-icon-before]::before {
+  display: none;
+}
+.db-button:has(.db-loading-indicator:not([data-overlay=true]))[data-icon-after]::after {
+  display: none;
+}
+.db-button:has(.db-loading-indicator[data-state=inactive]) .db-loading-indicator {
+  display: none;
+}
+.db-button .db-loading-indicator:not([data-state=successful], [data-state=critical]) {
+  --db-loading-indicator-segment-color: currentcolor;
+  --db-loading-indicator-segment-color-overlay: currentcolor;
+}
+.db-button .db-loading-indicator:not([data-overlay]), .db-button .db-loading-indicator:not([data-overlay=true]) {
+  margin-inline-end: var(--db-spacing-fixed-xs);
+}
+.db-button .db-loading-indicator[data-overlay=true] {
+  background-color: transparent;
+}
+.db-button .db-loading-indicator[data-overlay=true]::before {
+  z-index: 1;
+  background-color: var(--db-loading-indicator-button-overlay-color, inherit);
+}
+.db-button .db-loading-indicator[data-overlay=true]::after {
+  z-index: 0;
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+}
+.db-button .db-loading-indicator[data-overlay=true] svg,
+.db-button .db-loading-indicator[data-overlay=true] div {
+  z-index: 2;
+}
+
 .db-button {
   max-inline-size: 100%;
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
@@ -193,6 +235,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: 100%;
 }
 .db-button[data-variant=brand] {
+  --db-loading-indicator-button-overlay-color: var(--db-brand-origin-default);
   background-color: var(--db-brand-origin-default);
   color: var(--db-brand-on-origin-default);
   border-color: var(--db-brand-on-bg-basic-emphasis-70-default);

package/build/components/button/button.scss

@@ -6,11 +6,13 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/component";
 @use "../../styles/internal/button-components";
+@use "../../styles/internal/loading";
 
 // generic styles can be found in _button-components.scss
 .db-button {
 	@extend %default-interactive-component;
 	@extend %default-button;
+	@extend %interactive-element-with-loading;
 	@extend %db-overwrite-font-size-md;
 
 	max-inline-size: 100%;
@@ -62,6 +64,8 @@
 	}
 
 	&[data-variant="brand"] {
+		--db-loading-indicator-button-overlay-color: #{colors.$db-brand-origin-default};
+
 		background-color: colors.$db-brand-origin-default;
 		color: colors.$db-brand-on-origin-default;
 		border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;

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

@@ -645,7 +645,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-custom-select[data-variant=floating]:has(summary:focus-within,
+.db-custom-select[data-variant=floating]:has(:focus-within,
 summary:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not(.placeholder),
 input[type=checkbox]:checked,
@@ -654,7 +654,7 @@ input[type=radio]:checked) > label {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  .db-custom-select[data-variant=floating]:has(summary:focus-within,
+  .db-custom-select[data-variant=floating]:has(:focus-within,
   summary:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
   input[type=checkbox]:checked,
@@ -881,7 +881,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
 }
-.db-custom-select[data-variant=floating]:has(summary:focus-within,
+.db-custom-select[data-variant=floating]:has(:focus-within,
 summary:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not(.placeholder),
 input[type=checkbox]:checked,
@@ -890,12 +890,12 @@ input[type=radio]:checked) > label {
   opacity: 1;
   font-style: normal;
 }
-.db-custom-select[data-variant=floating]:has(summary:focus-within,
+.db-custom-select[data-variant=floating]:has(:focus-within,
 summary:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not(.placeholder),
 input[type=checkbox]:checked,
 input[type=radio]:checked) summary::placeholder,
-.db-custom-select[data-variant=floating]:has(summary:focus-within,
+.db-custom-select[data-variant=floating]:has(:focus-within,
 summary:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not(.placeholder),
 input[type=checkbox]:checked,
@@ -907,12 +907,12 @@ input[type=radio]:checked) [id$=-placeholder] {
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
-  .db-custom-select[data-variant=floating]:has(summary:focus-within,
+  .db-custom-select[data-variant=floating]:has(:focus-within,
   summary:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
   input[type=checkbox]:checked,
   input[type=radio]:checked) summary::placeholder,
-  .db-custom-select[data-variant=floating]:has(summary:focus-within,
+  .db-custom-select[data-variant=floating]:has(:focus-within,
   summary:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
   input[type=checkbox]:checked,
@@ -920,7 +920,7 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
-.db-custom-select[data-variant=floating]:has(summary:focus-within,
+.db-custom-select[data-variant=floating]:has(:focus-within,
 summary:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not(.placeholder),
 input[type=checkbox]:checked,
@@ -946,7 +946,7 @@ input[type=radio]:checked) summary:is([type=date],
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
-  .db-custom-select[data-variant=floating]:has(summary:focus-within,
+  .db-custom-select[data-variant=floating]:has(:focus-within,
   summary:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
   input[type=checkbox]:checked,

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

@@ -219,21 +219,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
  */
-@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%));
-  }
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(1turn);
-  }
-}
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md
@@ -427,14 +412,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     display: none;
   }
 }
+.db-custom-select-dropdown > db-loading-indicator > .db-loading-indicator,
+.db-custom-select-dropdown > .db-loading-indicator,
 .db-custom-select-dropdown > db-infotext > .db-infotext,
 .db-custom-select-dropdown > .db-infotext {
   padding: var(--db-spacing-fixed-lg) var(--db-spacing-fixed-md);
   margin: auto;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .db-custom-select-dropdown > db-infotext > .db-infotext[data-icon=circular_arrows]::before,
-  .db-custom-select-dropdown > .db-infotext[data-icon=circular_arrows]::before {
-    animation: rotate 1.5s linear 0s infinite normal none running;
-  }
-}

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

@@ -2,7 +2,6 @@
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/screen-sizes";
 @use "@db-ux/core-foundations/build/styles/helpers";
-@use "@db-ux/core-foundations/build/styles/animation";
 @use "../../styles/internal/form-components";
 
 .db-custom-select-dropdown {
@@ -69,18 +68,11 @@
 		}
 	}
 
+	> db-loading-indicator > .db-loading-indicator,
+	> .db-loading-indicator,
 	> db-infotext > .db-infotext,
 	> .db-infotext {
 		padding: variables.$db-spacing-fixed-lg variables.$db-spacing-fixed-md;
 		margin: auto;
-
-		&[data-icon="circular_arrows"] {
-			&::before {
-				@media screen and (prefers-reduced-motion: no-preference) {
-					animation: rotate 1.5s linear 0s infinite normal none
-						running;
-				}
-			}
-		}
 	}
 }

package/build/components/drawer/drawer.css

@@ -58,6 +58,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
+@keyframes wobbling {
+  50% {
+    inset-inline-start: 100%;
+    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
+  }
+}
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/link/link.css

@@ -144,6 +144,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
+@keyframes wobbling {
+  50% {
+    inset-inline-start: 100%;
+    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
+  }
+}
 .db-link[data-content=internal]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after, .db-link[data-content=external]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;