@db-ux/core-components 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # @db-ux/core-components
 
+## 4.0.1
+
+_version bump_
+
+
 ## 4.0.0
 
 ### Major Changes

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

@@ -161,7 +161,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

package/build/components/checkbox/checkbox.css

@@ -82,7 +82,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

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

@@ -551,7 +551,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -850,6 +851,14 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   transition: none;
   opacity: 0;
 }
+.db-custom-select[data-variant=floating] summary:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-custom-select[data-variant=floating] summary {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
@@ -893,6 +902,34 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-custom-select[data-variant=floating]:has(summary:focus-within,
+summary:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) summary:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  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,
+  summary:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) summary:is([type=date],
+  [type=datetime-local],
+  [type=month],
+  [type=week],
+  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+    transition: opacity var(--db-transition-straight-emotional);
+  }
+}
 .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -1005,6 +1042,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-custom-select summary:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
 .db-custom-select summary {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

package/build/components/infotext/infotext.css

@@ -143,7 +143,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

package/build/components/input/input.css

@@ -394,7 +394,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -623,6 +624,14 @@ input[type=radio]:checked) > label {
   transition: none;
   opacity: 0;
 }
+.db-input[data-variant=floating] input:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-input[data-variant=floating] input {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
@@ -664,6 +673,32 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-input[data-variant=floating]:has(input:focus-within,
+input:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) input:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-input[data-variant=floating]:has(input:focus-within,
+  input:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) input:is([type=date],
+  [type=datetime-local],
+  [type=month],
+  [type=week],
+  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+    transition: opacity var(--db-transition-straight-emotional);
+  }
+}
 .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -791,6 +826,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-input input:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
 .db-input input {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

package/build/components/link/link.css

@@ -226,7 +226,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

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

@@ -219,7 +219,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

package/build/components/notification/notification.css

@@ -930,7 +930,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

package/build/components/select/select.css

@@ -394,7 +394,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -649,6 +650,14 @@ input[type=radio]:checked) > label {
   transition: none;
   opacity: 0;
 }
+.db-select[data-variant=floating] select:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-select[data-variant=floating] select {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
@@ -692,6 +701,34 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-select[data-variant=floating]:has(select:focus-within,
+select:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) select:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-start: var(--db-base-body-icon-font-size-2xs);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-select[data-variant=floating]:has(select:focus-within,
+  select:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) select:is([type=date],
+  [type=datetime-local],
+  [type=month],
+  [type=week],
+  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+    transition: opacity var(--db-transition-straight-emotional);
+  }
+}
 .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -804,6 +841,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-select select:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
 .db-select select {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

package/build/components/switch/switch.css

@@ -173,7 +173,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

package/build/components/tag/tag.css

@@ -985,7 +985,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

package/build/components/textarea/textarea.css

@@ -416,6 +416,14 @@ input[type=radio]:checked) > label {
   transition: none;
   opacity: 0;
 }
+.db-textarea[data-variant=floating] textarea:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-textarea[data-variant=floating] textarea {
   padding-block-start: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -457,6 +465,32 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-textarea[data-variant=floating]:has(textarea:focus-within,
+textarea:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) textarea:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-textarea[data-variant=floating]:has(textarea:focus-within,
+  textarea:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) textarea:is([type=date],
+  [type=datetime-local],
+  [type=month],
+  [type=week],
+  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+    transition: opacity var(--db-transition-straight-emotional);
+  }
+}
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
@@ -684,6 +718,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-textarea textarea:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
 .db-textarea textarea {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);