@db-ux/core-components 4.4.1-footer-28739e3 → 4.4.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @db-ux/core-components
 
+## 4.4.2
+
+### Patch Changes
+
+- fix(SSR-compatibility): Implement framework-specific `useId` for UUID generation in React and Vue outputs - [see commit 1073c46](https://github.com/db-ux-design-system/core-web/commit/1073c469a20bf1346f150c00364ee1aeab7643d0)
+
+- fix: issue with DBInput not working properly with `datalist` and `type="time"` - [see commit 72ccb09](https://github.com/db-ux-design-system/core-web/commit/72ccb09d1304aec894b4fde27624f90029efec9d)
+
+## 4.4.1
+
+### Patch Changes
+
+- DBCustomSelect: Prevent floating label from flickering during initial render - [see commit e5ceff8](https://github.com/db-ux-design-system/core-web/commit/e5ceff861534186cf86d1f5f0a876e04aeac9e41)
+
 ## 4.4.0
 
 ### Minor Changes

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/input/input.css

@@ -1009,10 +1009,17 @@ input:focus-visible)::after {
 .db-input input {
   position: relative;
 }
+.db-input input::-webkit-color-swatch-wrapper {
+  block-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 2/1;
+}
 .db-input input::-webkit-calendar-picker-indicator, .db-input input::-webkit-search-cancel-button {
   background-image: none;
-  inline-size: var(--db-icon-font-size, 1.5rem);
-  block-size: var(--db-icon-font-size, 1.5rem);
+  position: absolute;
+  inset-inline-end: var(--db-spacing-fixed-sm);
+  display: block !important;
+  inline-size: var(--db-icon-font-size, 1.5rem) !important;
+  block-size: var(--db-icon-font-size, 1.5rem) !important;
   padding: 0;
   cursor: pointer;
   /* stylelint-disable-next-line db-ux/use-spacings */
@@ -1046,6 +1053,3 @@ input:focus-visible)::after {
 .db-input input::file-selector-button:active {
   background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
-.db-input:has(datalist) input::-webkit-calendar-picker-indicator {
-  display: none !important;
-}

package/build/components/input/input.scss

@@ -122,13 +122,23 @@ $icon-padding: calc(
 	input {
 		position: relative;
 
+		&::-webkit-color-swatch-wrapper {
+			block-size: icons.$default-icon-font-size;
+			aspect-ratio: 2/1;
+		}
+
 		&::-webkit-calendar-picker-indicator,
 		&::-webkit-search-cancel-button {
 			@extend %db-overwrite-font-size-sm;
 
 			background-image: none;
-			inline-size: icons.$default-icon-font-size;
-			block-size: icons.$default-icon-font-size;
+			position: absolute;
+			inset-inline-end: var(--db-spacing-fixed-sm);
+
+			// Those are set by browser on element directly
+			display: block !important;
+			inline-size: icons.$default-icon-font-size !important;
+			block-size: icons.$default-icon-font-size !important;
 			padding: 0;
 			cursor: pointer;
 			/* stylelint-disable-next-line db-ux/use-spacings */
@@ -173,11 +183,5 @@ $icon-padding: calc(
 
 	&:has(datalist) {
 		@extend %dropdown-icon;
-
-		input {
-			&::-webkit-calendar-picker-indicator {
-				display: none !important;
-			}
-		}
 	}
 }