@db-ux/core-components 4.10.2 → 4.11.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @db-ux/core-components
 
+## 4.11.1
+
+### Patch Changes
+
+- fix: transition logical inline-size/block-size instead of physical width/height in DB Puls animation - [see commit 4445d59](https://github.com/db-ux-design-system/core-web/commit/4445d599ff3e1352f6ee1a1868ace803d3a70518)
+
+## 4.11.0
+
+### Minor Changes
+
+- feat: add DBTable, DBTableHead, DBTableBody, DBTableFooter, DBTableRow, DBTableHeaderCell, and DBTableDataCell components - [see commit f64b6e0](https://github.com/db-ux-design-system/core-web/commit/f64b6e0f4b36ea4987c1d9ac7a0328bf317cdcad)
+
+### Patch Changes
+
+- fix: Remove unwanted whitespace characters from rendered output to prevent layout shifts - [see commit a0f23a4](https://github.com/db-ux-design-system/core-web/commit/a0f23a4a3e715414de3d045b59b88dc3ac28d5e7)
+
 ## 4.10.2
 
 _version bump_

package/build/components/checkbox/checkbox.css

@@ -119,7 +119,6 @@
 .db-checkbox:is(label),
 .db-checkbox > label {
   align-items: flex-start;
-  position: relative;
   color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
 .db-checkbox input {
@@ -139,6 +138,7 @@
 }
 .db-checkbox[data-hide-label=true] {
   font-size: 0;
+  inline-size: fit-content;
 }
 .db-checkbox[data-hide-label=true] input {
   margin-inline-end: 0;

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

@@ -24,11 +24,6 @@
   outline-offset: var(--db-border-width-xs);
   box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
-@media (prefers-reduced-motion: no-preference) {
-  .db-custom-button:not([data-disable-focus=true]):has(input):focus-within {
-    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
-  }
-}
 .db-custom-button:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(input):focus-within {
   border-radius: var(--db-border-radius-xs);
 }

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

@@ -25,11 +25,6 @@
   outline-offset: var(--db-border-width-xs);
   box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
-@media (prefers-reduced-motion: no-preference) {
-  .db-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-visible) {
-    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
-  }
-}
 .db-custom-select-list-item:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(> label > input:focus-visible) {
   border-radius: var(--db-border-radius-xs);
 }

package/build/components/infotext/infotext.css

@@ -59,11 +59,14 @@
 }
 
 .db-infotext {
-  --db-icon-margin-end: var(--db-spacing-fixed-2xs);
+  --db-icon-margin-end: 0;
 }
 .db-infotext:not([hidden]) {
   display: flex;
 }
+.db-infotext {
+  gap: 0.5ch;
+}
 .db-infotext:not([data-icon]) {
   --db-icon-font-family: var(
   	--db-icon-filled-font-family,

package/build/components/infotext/infotext.scss

@@ -6,11 +6,13 @@
 @use "@db-ux/core-foundations/build/styles/icons";
 
 .db-infotext {
-	--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
+	--db-icon-margin-end: 0;
 
 	@extend %db-overwrite-font-size-sm;
 	@include helpers.display(flex);
 
+	gap: calc(1ch / 2);
+
 	@include icons.has-no-icon {
 		@include icons.to-filled-icon;
 		@include icons.set-icon("information_circle");

package/build/components/input/input.css

@@ -914,11 +914,6 @@ input:focus-visible)::after {
   outline-offset: var(--db-border-width-xs);
   box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
-@media (prefers-reduced-motion: no-preference) {
-  .db-input input::-webkit-calendar-picker-indicator:focus-visible, .db-input input::-webkit-search-cancel-button:focus-visible {
-    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
-  }
-}
 .db-input input::-webkit-search-cancel-button {
   appearance: none;
   position: absolute;

package/build/components/link/link.css

@@ -15,8 +15,10 @@
   --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
 }
 
-.db-link {
-  transition: outline var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
+@media (prefers-reduced-motion: no-preference) {
+  .db-link {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
+  }
 }
 
 @keyframes popover-animation {

package/build/components/navigation/navigation.css

@@ -27,7 +27,7 @@
 }
 @media (prefers-reduced-motion: no-preference) {
   .db-navigation > menu .db-navigation-item::after {
-    transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
+    transition: block-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), inline-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
   }
 }
 

package/build/components/notification/notification.css

@@ -817,8 +817,10 @@
   border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
 }
 
-.db-notification a {
-  transition: outline var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
+@media (prefers-reduced-motion: no-preference) {
+  .db-notification a {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
+  }
 }
 
 @keyframes popover-animation {

package/build/components/radio/radio.css

@@ -58,7 +58,6 @@
 .db-radio:is(label),
 .db-radio > label {
   align-items: flex-start;
-  position: relative;
   color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
 .db-radio input {
@@ -78,6 +77,7 @@
 }
 .db-radio[data-hide-label=true] {
   font-size: 0;
+  inline-size: fit-content;
 }
 .db-radio[data-hide-label=true] input {
   margin-inline-end: 0;

package/build/components/switch/switch.css

@@ -130,7 +130,6 @@
 .db-switch:is(label),
 .db-switch > label {
   align-items: flex-start;
-  position: relative;
   color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
 .db-switch input {
@@ -150,6 +149,7 @@
 }
 .db-switch[data-hide-label=true] {
   font-size: 0;
+  inline-size: fit-content;
 }
 .db-switch[data-hide-label=true] input {
   margin-inline-end: 0;

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

@@ -25,11 +25,6 @@
   outline-offset: var(--db-border-width-xs);
   box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
-@media (prefers-reduced-motion: no-preference) {
-  .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
-    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
-  }
-}
 .db-tab-item input:not([data-disable-focus=true]):not([type=radio], [role=switch]):focus-visible::before {
   border-radius: var(--db-border-radius-xs);
 }

package/build/components/tab-list/tab-list.css

@@ -20,8 +20,10 @@
   pointer-events: none !important;
 }
 
-.db-tab-list > ul::-webkit-scrollbar, .db-tab-list > ul::-webkit-scrollbar-corner {
-  transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
+@media (prefers-reduced-motion: no-preference) {
+  .db-tab-list > ul::-webkit-scrollbar, .db-tab-list > ul::-webkit-scrollbar-corner {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
+  }
 }
 
 @keyframes popover-animation {