@db-ux/core-components 2.0.10-popover-d7e8b9a → 2.1.1

package/build/components/badge/badge.css

@@ -142,7 +142,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-vibrant-default);
   color: var(--db-adaptive-on-bg-vibrant-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
@@ -205,7 +206,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   font-weight: 700;
 }
 .db-badge:not([data-semantic]):not([data-emphasis]), .db-badge:not([data-semantic])[data-emphasis=weak], .db-badge[data-semantic=adaptive]:not([data-emphasis]), .db-badge[data-semantic=adaptive][data-emphasis=weak] {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-adaptive-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-basic-level-3-default);
   color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -214,7 +218,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
 }
 .db-badge:not([data-semantic])[data-emphasis=strong], .db-badge[data-semantic=adaptive][data-emphasis=strong] {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-vibrant-default);
   color: var(--db-adaptive-on-bg-vibrant-default);
 }
@@ -222,7 +227,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
 }
 .db-badge[data-semantic=neutral]:not([data-emphasis]), .db-badge[data-semantic=neutral][data-emphasis=weak] {
-  border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-neutral-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-neutral-bg-basic-level-3-default);
   color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }
@@ -230,7 +238,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }
 .db-badge[data-semantic=neutral][data-emphasis=strong] {
-  border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-neutral-bg-vibrant-default);
   color: var(--db-neutral-on-bg-vibrant-default);
 }
@@ -238,7 +247,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-neutral-on-bg-vibrant-default);
 }
 .db-badge[data-semantic=critical]:not([data-emphasis]), .db-badge[data-semantic=critical][data-emphasis=weak] {
-  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-critical-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-critical-bg-basic-level-3-default);
   color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
@@ -246,7 +258,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
 .db-badge[data-semantic=critical][data-emphasis=strong] {
-  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-critical-bg-vibrant-default);
   color: var(--db-critical-on-bg-vibrant-default);
 }
@@ -254,7 +267,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-critical-on-bg-vibrant-default);
 }
 .db-badge[data-semantic=successful]:not([data-emphasis]), .db-badge[data-semantic=successful][data-emphasis=weak] {
-  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-successful-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-successful-bg-basic-level-3-default);
   color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
@@ -262,7 +278,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
 .db-badge[data-semantic=successful][data-emphasis=strong] {
-  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-successful-bg-vibrant-default);
   color: var(--db-successful-on-bg-vibrant-default);
 }
@@ -270,7 +287,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-successful-on-bg-vibrant-default);
 }
 .db-badge[data-semantic=warning]:not([data-emphasis]), .db-badge[data-semantic=warning][data-emphasis=weak] {
-  border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-warning-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-warning-bg-basic-level-3-default);
   color: var(--db-warning-on-bg-basic-emphasis-80-default);
 }
@@ -278,7 +298,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-warning-on-bg-basic-emphasis-80-default);
 }
 .db-badge[data-semantic=warning][data-emphasis=strong] {
-  border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-warning-bg-vibrant-default);
   color: var(--db-warning-on-bg-vibrant-default);
 }
@@ -286,7 +307,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-warning-on-bg-vibrant-default);
 }
 .db-badge[data-semantic=informational]:not([data-emphasis]), .db-badge[data-semantic=informational][data-emphasis=weak] {
-  border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(
+  	--db-informational-on-bg-basic-emphasis-70-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-informational-bg-basic-level-3-default);
   color: var(--db-informational-on-bg-basic-emphasis-80-default);
 }
@@ -294,7 +318,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-informational-on-bg-basic-emphasis-80-default);
 }
 .db-badge[data-semantic=informational][data-emphasis=strong] {
-  border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-informational-bg-vibrant-default);
   color: var(--db-informational-on-bg-vibrant-default);
 }

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

@@ -778,6 +778,40 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   opacity: 0.32;
 }
 
+[data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=top]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vy=bottom], [data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vy=bottom] {
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (min-width: 45em) {
+  [data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-force-mobile]):not([data-outside-vy=top]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vy=bottom]:not([data-force-mobile]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vy=bottom]:not([data-force-mobile]), [data-placement^=top].db-custom-select [data-force-mobile=false].db-custom-select-dropdown:not([data-outside-vy=top]), .db-custom-select:not([data-placement]) [data-force-mobile=false].db-custom-select-dropdown[data-outside-vy=bottom], [data-placement^=bottom].db-custom-select [data-force-mobile=false].db-custom-select-dropdown[data-outside-vy=bottom] {
+    inset-block-end: 100%;
+    margin-block-start: var(--db-spacing-fixed-md);
+  }
+}
+
+[data-placement^=top].db-custom-select, .db-custom-select:not([data-placement]), [data-placement^=bottom].db-custom-select {
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (min-width: 45em) {
+  [data-placement^=top].db-custom-select:not([data-force-mobile])[data-placement$=end] .db-custom-select-dropdown:not([data-outside-vx=right]), .db-custom-select:not([data-force-mobile])[data-placement$=end]:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vx=right]), [data-placement^=bottom].db-custom-select:not([data-force-mobile])[data-placement$=end] .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end][data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end].db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vx=right]), [data-force-mobile=false][data-placement$=end][data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vx=right]) {
+    inset-inline-end: 0;
+  }
+  [data-placement^=top].db-custom-select:not([data-force-mobile]) .db-custom-select-dropdown[data-outside-vx=right], .db-custom-select:not([data-force-mobile]):not([data-placement]) .db-custom-select-dropdown[data-outside-vx=right], [data-placement^=bottom].db-custom-select:not([data-force-mobile]) .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false][data-placement^=top].db-custom-select .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false].db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vx=right], [data-force-mobile=false][data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vx=right] {
+    inset-inline-end: 0;
+  }
+}
+
+.db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom]) {
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (min-width: 45em) {
+  .db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom]):not([data-force-mobile]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown:not([data-outside-vy=bottom])[data-force-mobile=false], [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom]):not([data-force-mobile]), [data-placement^=bottom].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=bottom])[data-force-mobile=false] {
+    inset-block-start: 100%;
+    margin-block-end: var(--db-spacing-fixed-md);
+  }
+}
 .db-custom-select {
   --db-form-component-padding-inline-end: calc(
   	calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs)) + var(--db-sizing-sm) +

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

@@ -7,6 +7,53 @@
 @use "../../styles/internal/select-components";
 @use "../../styles/dialog-init";
 
+%custom-select-placement-top {
+	@include screen-sizes.screen("sm") {
+		inset-block-end: 100%;
+		margin-block-start: variables.$db-spacing-fixed-md;
+	}
+}
+
+%custom-select-placement-vertical {
+	@include screen-sizes.screen("sm") {
+		&[data-placement$="end"] {
+			.db-custom-select-dropdown:not([data-outside-vx="right"]) {
+				inset-inline-end: 0;
+			}
+		}
+
+		.db-custom-select-dropdown[data-outside-vx="right"] {
+			inset-inline-end: 0;
+		}
+	}
+}
+
+%custom-select-placement {
+	&:not([data-placement]),
+	&[data-placement^="bottom"] {
+		@extend %custom-select-placement-vertical;
+
+		.db-custom-select-dropdown:not([data-outside-vy="bottom"]) {
+			@include screen-sizes.screen("sm") {
+				inset-block-start: 100%;
+				margin-block-end: variables.$db-spacing-fixed-md;
+			}
+		}
+
+		.db-custom-select-dropdown[data-outside-vy="bottom"] {
+			@extend %custom-select-placement-top;
+		}
+	}
+
+	&[data-placement^="top"] {
+		@extend %custom-select-placement-vertical;
+
+		.db-custom-select-dropdown:not([data-outside-vy="top"]) {
+			@extend %custom-select-placement-top;
+		}
+	}
+}
+
 .db-custom-select {
 	--db-form-component-padding-inline-end: calc(
 		#{select-components.$select-icon-padding} + #{variables.$db-sizing-sm} +
@@ -20,6 +67,7 @@
 
 	@extend %select-icon;
 	@extend %select-placeholder;
+	@extend %custom-select-placement;
 
 	position: relative;
 

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

@@ -64,14 +64,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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);
 }
-.db-custom-select-list-item:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(> label > input:focus-within) {
-  border-radius: var(--db-border-radius-xs);
-}
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-within) {
     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-within) {
+  border-radius: var(--db-border-radius-xs);
+}
 
 /**
 	Generates 3 types of placeholders, e.g:

package/build/components/drawer/drawer.css

@@ -282,6 +282,18 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-drawer .db-drawer-container:not([data-width=full]) {
   max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
 }
+.db-drawer .db-drawer-container:not([data-width=full]):not([data-direction]), .db-drawer .db-drawer-container:not([data-width=full])[data-direction=right] {
+  border-inline-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-drawer .db-drawer-container:not([data-width=full])[data-direction=left] {
+  border-inline-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-drawer .db-drawer-container:not([data-width=full])[data-direction=up] {
+  border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+.db-drawer .db-drawer-container:not([data-width=full])[data-direction=down] {
+  border-block-end: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
 .db-drawer .db-drawer-container[data-rounded=true] {
   box-shadow: var(--db-elevation-md);
 }

package/build/components/drawer/drawer.scss

@@ -133,6 +133,23 @@ $spacings: (
 				--db-drawer-max-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})
 			);
+
+			&:not([data-direction]),
+			&[data-direction="right"] {
+				border-inline-start: component.$component-border;
+			}
+
+			&[data-direction="left"] {
+				border-inline-end: component.$component-border;
+			}
+
+			&[data-direction="up"] {
+				border-block-start: component.$component-border;
+			}
+
+			&[data-direction="down"] {
+				border-block-end: component.$component-border;
+			}
 		}
 
 		&[data-rounded="true"] {

package/build/components/input/input.css

@@ -445,12 +445,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::file-selector-button {
+.db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::-webkit-calendar-picker-indicator, .db-input input::-webkit-search-cancel-button, .db-input input::file-selector-button {
   font: var(--db-type-body-sm);
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  .db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::file-selector-button {
+  .db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::-webkit-calendar-picker-indicator, .db-input input::-webkit-search-cancel-button, .db-input input::file-selector-button {
     /* Those variables are only for components to calculate heights and change icons */
     --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
     --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
@@ -863,24 +863,26 @@ input[type=time]) {
 input:focus-visible)::after {
   opacity: 1;
 }
-.db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
-  --db-icon-after: "calendar";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
-  content: var(--db-icon-after, attr(data-icon-after));
-}
-@supports (content: ""/"") {
+@supports selector(::-webkit-calendar-picker-indicator) {
   .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+    --db-icon-after: "calendar";
+    margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
+    content: var(--db-icon-after, attr(data-icon-after));
+  }
+  @supports (content: ""/"") {
+    .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
+      content: var(--db-icon-after, attr(data-icon-after))/"";
+    }
   }
-}
-.db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
-  --db-icon-after: "clock";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
-  content: var(--db-icon-after, attr(data-icon-after));
-}
-@supports (content: ""/"") {
   .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+    --db-icon-after: "clock";
+    margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
+    content: var(--db-icon-after, attr(data-icon-after));
+  }
+  @supports (content: ""/"") {
+    .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
+      content: var(--db-icon-after, attr(data-icon-after))/"";
+    }
   }
 }
 .db-input:has(input[type=file]) input {
@@ -894,6 +896,10 @@ input:focus-visible)::after {
   padding: 0 var(--db-spacing-fixed-xs);
   margin-inline-end: var(--db-spacing-fixed-xs);
 }
+.db-input[data-variant=floating] input::-webkit-calendar-picker-indicator, .db-input[data-variant=floating] input::-webkit-search-cancel-button {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  margin-block-end: var(--db-base-body-icon-font-size-2xs);
+}
 .db-input input {
   position: relative;
 }
@@ -903,6 +909,19 @@ input:focus-visible)::after {
   block-size: var(--db-icon-font-size, 1.5rem);
   padding: 0;
   cursor: pointer;
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  margin-block-start: var(--db-border-width-3xs);
+  border-radius: var(--db-border-radius-xs);
+}
+.db-input input::-webkit-calendar-picker-indicator:focus-visible, .db-input input::-webkit-search-cancel-button:focus-visible {
+  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
+  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 screen and (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;

package/build/components/input/input.scss

@@ -67,15 +67,19 @@ $icon-padding: calc(
 		}
 	}
 
-	&:has(input[type="date"]),
-	&:has(input[type="week"]),
-	&:has(input[type="datetime-local"]),
-	&:has(input[type="month"]) {
-		@include icons.set-icon("calendar", "after");
-	}
+	// This @supports should exclude Mozilla Firefox
+	// TODO: Reevaluate after Mozilla is supporting week and month input types
+	@supports selector(::-webkit-calendar-picker-indicator) {
+		&:has(input[type="date"]),
+		&:has(input[type="week"]),
+		&:has(input[type="datetime-local"]),
+		&:has(input[type="month"]) {
+			@include icons.set-icon("calendar", "after");
+		}
 
-	&:has(input[type="time"]) {
-		@include icons.set-icon("clock", "after");
+		&:has(input[type="time"]) {
+			@include icons.set-icon("clock", "after");
+		}
 	}
 
 	&:has(input[type="file"]) {
@@ -105,16 +109,35 @@ $icon-padding: calc(
 		}
 	}
 
+	&[data-variant="floating"] {
+		input {
+			&::-webkit-calendar-picker-indicator,
+			&::-webkit-search-cancel-button {
+				/* stylelint-disable-next-line db-ux/use-spacings */
+				margin-block-end: var(--db-base-body-icon-font-size-2xs);
+			}
+		}
+	}
+
 	input {
 		position: relative;
 
 		&::-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;
 			padding: 0;
 			cursor: pointer;
+			/* stylelint-disable-next-line db-ux/use-spacings */
+			margin-block-start: variables.$db-border-width-3xs;
+			border-radius: variables.$db-border-radius-xs;
+
+			&:focus-visible {
+				@include helpers.get-focus-placeholder;
+			}
 		}
 
 		&::-webkit-search-cancel-button {