@db-ux/core-components 4.10.1 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @db-ux/core-components
 
+## 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_
+
 ## 4.10.1
 
 ### Patch Changes

package/README.md

@@ -141,7 +141,7 @@ Contributions are very welcome, please refer to the [contribution guide](https:/
 ## Code of conduct
 
 We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone – have a look at our [Contributor Covenant Code of Conduct](https://github.com/db-ux-design-system/core-web/blob/main/CODE-OF-CONDUCT.md).
+community a harassment-free experience for everyone – have a look at our [Contributor Covenant Code of Conduct](https://github.com/db-ux-design-system/.github/blob/main/CODE-OF-CONDUCT.md).
 
 ## License
 

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

@@ -58,6 +58,8 @@
   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);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));

package/build/components/checkbox/checkbox.css

@@ -41,6 +41,8 @@
   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);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
@@ -117,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 {
@@ -137,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/custom-select.css

@@ -491,6 +491,8 @@
   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);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));

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

@@ -36,6 +36,8 @@
   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);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
@@ -57,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

@@ -341,6 +341,8 @@
   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);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
@@ -912,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 {
@@ -57,6 +59,8 @@
   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);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));

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

@@ -48,6 +48,8 @@
   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);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));

package/build/components/notification/notification.css

@@ -786,6 +786,8 @@
   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);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
@@ -815,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/select/select.css

@@ -341,6 +341,8 @@
   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);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));

package/build/components/switch/switch.css

@@ -63,6 +63,8 @@
   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);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
@@ -128,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 {
@@ -148,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 {