@db-ux/core-components 2.4.0-0-af2a02f → 2.4.0

package/build/assets/fonts/generate-eu-fonts.ts

@@ -1,6 +1,6 @@
+import { glob } from 'glob';
 import { exec } from 'node:child_process';
 import { promisify } from 'node:util';
-import { glob } from 'glob';
 
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';

package/build/components/checkbox/checkbox.css

@@ -204,17 +204,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line at-rule-empty-line-before */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-checkbox:has(input:required):is(label)::after,
-.db-checkbox:has(input:required) > label::after, .db-checkbox[data-required=true]:is(label)::after,
-.db-checkbox[data-required=true] > label::after {
+.db-checkbox:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
+.db-checkbox:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-checkbox[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+.db-checkbox[data-required=true]:not([data-hide-asterisk=true]) > label::after {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: 1px;
   content: "*";
 }
 @supports (content: ""/"") {
-  .db-checkbox:has(input:required):is(label)::after,
-  .db-checkbox:has(input:required) > label::after, .db-checkbox[data-required=true]:is(label)::after,
-  .db-checkbox[data-required=true] > label::after {
+  .db-checkbox:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
+  .db-checkbox:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-checkbox[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+  .db-checkbox[data-required=true]:not([data-hide-asterisk=true]) > label::after {
     content: "*"/"";
   }
 }

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

@@ -750,12 +750,6 @@ input[type=radio]:checked) > label {
   inline-size: calc(100% - var(--db-form-component-padding-inline-end) - calc(var(--db-form-has-before) * (var(--db-base-body-icon-font-size-sm) + var(--db-spacing-fixed-sm))) - var(--db-spacing-fixed-sm));
 }
 
-dialog[data-variant], dialog[data-backdrop] {
-  position: fixed;
-  inset: 0;
-  z-index: 9995;
-}
-
 dialog {
   padding: 0;
   margin: 0;
@@ -763,7 +757,12 @@ dialog {
   z-index: 9996;
   color: inherit;
 }
-dialog[data-variant=inside]:not([data-backdrop=none])::before {
+dialog:not([data-position=absolute])[data-variant], dialog:not([data-position=absolute])[data-backdrop] {
+  position: fixed;
+  inset: 0;
+  z-index: 9995;
+}
+dialog:not([data-position=absolute])[data-variant=inside]:not([data-backdrop=none])::before {
   content: "";
   position: fixed;
   inset: 0;
@@ -874,17 +873,17 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
-.db-custom-select:has(summary:required):is(label)::after,
-.db-custom-select:has(summary:required) > label::after, .db-custom-select[data-required=true]:is(label)::after,
-.db-custom-select[data-required=true] > label::after {
+.db-custom-select:has(summary:required):not([data-hide-asterisk=true]):is(label)::after,
+.db-custom-select:has(summary:required):not([data-hide-asterisk=true]) > label::after, .db-custom-select[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+.db-custom-select[data-required=true]:not([data-hide-asterisk=true]) > label::after {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: 1px;
   content: "*";
 }
 @supports (content: ""/"") {
-  .db-custom-select:has(summary:required):is(label)::after,
-  .db-custom-select:has(summary:required) > label::after, .db-custom-select[data-required=true]:is(label)::after,
-  .db-custom-select[data-required=true] > label::after {
+  .db-custom-select:has(summary:required):not([data-hide-asterisk=true]):is(label)::after,
+  .db-custom-select:has(summary:required):not([data-hide-asterisk=true]) > label::after, .db-custom-select[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+  .db-custom-select[data-required=true]:not([data-hide-asterisk=true]) > label::after {
     content: "*"/"";
   }
 }

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

@@ -128,6 +128,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   all: unset;
   padding: var(--db-spacing-fixed-sm);
   overflow-y: auto;
+  overflow-block: auto;
   /* (checkbox height + list-item padding) * 6 items + list padding */
   max-block-size: calc(5.5 * (var(--db-icon-font-size) - 2 * var(--db-border-width-3xs) + 2 * var(--db-spacing-fixed-sm)) + var(--db-spacing-fixed-sm) * 2);
 }

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

@@ -5,6 +5,7 @@
 	all: unset;
 	padding: variables.$db-spacing-fixed-sm;
 	overflow-y: auto;
+	overflow-block: auto;
 
 	&::-webkit-scrollbar-button:single-button:vertical:decrement {
 		border-start-end-radius: 0;

package/build/components/drawer/drawer.css

@@ -124,12 +124,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
  */
-dialog[data-variant], dialog[data-backdrop] {
-  position: fixed;
-  inset: 0;
-  z-index: 9995;
-}
-
 dialog {
   padding: 0;
   margin: 0;
@@ -137,7 +131,12 @@ dialog {
   z-index: 9996;
   color: inherit;
 }
-dialog[data-variant=inside]:not([data-backdrop=none])::before {
+dialog:not([data-position=absolute])[data-variant], dialog:not([data-position=absolute])[data-backdrop] {
+  position: fixed;
+  inset: 0;
+  z-index: 9995;
+}
+dialog:not([data-position=absolute])[data-variant=inside]:not([data-backdrop=none])::before {
   content: "";
   position: fixed;
   inset: 0;
@@ -170,6 +169,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 
 .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
   max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
+  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
   max-inline-size: none;
 }
 
@@ -207,6 +207,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-md));
   overflow-y: auto;
+  overflow-block: auto;
 }
 .db-drawer .db-drawer-container {
   padding-block: var(--db-spacing-fixed-sm);
@@ -220,6 +221,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
   overflow-y: auto;
+  overflow-block: auto;
 }
 .db-drawer [data-spacing=medium].db-drawer-container {
   /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
@@ -236,6 +238,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
   overflow-y: auto;
+  overflow-block: auto;
 }
 .db-drawer [data-spacing=large].db-drawer-container {
   /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
@@ -252,6 +255,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-xl));
   overflow-y: auto;
+  overflow-block: auto;
 }
 .db-drawer [data-spacing=none].db-drawer-container {
   /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
@@ -268,6 +272,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline: var(--db-drawer-content-padding-inline, 0);
   overflow-y: auto;
+  overflow-block: auto;
 }
 
 .db-drawer .db-drawer-container {
@@ -281,6 +286,7 @@ 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)));
+  min-inline-size: var(--db-drawer-min-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);
@@ -333,6 +339,29 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-drawer .db-drawer-container .db-drawer-header:has(.button-close-drawer), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)) {
   display: flex;
 }
+.db-drawer[data-position=absolute] {
+  position: absolute;
+  z-index: 3;
+  inset: 0;
+  block-size: 100%;
+  inline-size: 100%;
+  background-color: transparent;
+}
+.db-drawer[data-position=absolute][open] {
+  display: flex;
+}
+.db-drawer[data-position=absolute]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=right], .db-drawer[data-position=absolute][data-direction=left] {
+  flex-direction: column;
+}
+.db-drawer[data-position=absolute][data-direction=left], .db-drawer[data-position=absolute][data-direction=down] {
+  align-items: start;
+}
+.db-drawer[data-position=absolute]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=right], .db-drawer[data-position=absolute][data-direction=up] {
+  align-items: end;
+}
+.db-drawer[data-position=absolute] .db-drawer-container {
+  position: relative;
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-drawer[open] .db-drawer-container:not([data-direction]), .db-drawer[open] .db-drawer-container[data-direction=right] {
     animation: show-right-to-left var(--db-transition-straight-show);

package/build/components/drawer/drawer.scss

@@ -30,6 +30,10 @@
 			--db-drawer-max-height,
 			calc(100% - #{variables.$db-spacing-fixed-xl})
 		);
+		min-block-size: var(
+			--db-drawer-min-height,
+			calc(100% - #{variables.$db-spacing-fixed-xl})
+		);
 		max-inline-size: none;
 	}
 }
@@ -100,6 +104,7 @@ $spacings: (
 		);
 		// TODO: Evaluate whether we need overflow: hidden and that for only specifically set y here.
 		overflow-y: auto;
+		overflow-block: auto;
 	}
 }
 
@@ -133,6 +138,10 @@ $spacings: (
 				--db-drawer-max-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})
 			);
+			min-inline-size: var(
+				--db-drawer-min-width,
+				calc(100% - #{variables.$db-spacing-fixed-xl})
+			);
 
 			&:not([data-direction]),
 			&[data-direction="right"] {
@@ -194,6 +203,40 @@ $spacings: (
 		}
 	}
 
+	&[data-position="absolute"] {
+		position: absolute;
+		z-index: 3;
+		inset: 0;
+		block-size: 100%;
+		inline-size: 100%;
+		background-color: transparent;
+
+		&[open] {
+			display: flex;
+		}
+
+		&:not([data-direction]),
+		&[data-direction="right"],
+		&[data-direction="left"] {
+			flex-direction: column;
+		}
+
+		&[data-direction="left"],
+		&[data-direction="down"] {
+			align-items: start;
+		}
+
+		&:not([data-direction]),
+		&[data-direction="right"],
+		&[data-direction="up"] {
+			align-items: end;
+		}
+
+		.db-drawer-container {
+			position: relative;
+		}
+	}
+
 	&[open] {
 		.db-drawer-container {
 			@media screen and (prefers-reduced-motion: no-preference) {

package/build/components/input/input.css

@@ -630,17 +630,17 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
-.db-input:has(input:required):is(label)::after,
-.db-input:has(input:required) > label::after, .db-input[data-required=true]:is(label)::after,
-.db-input[data-required=true] > label::after {
+.db-input:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
+.db-input:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-input[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+.db-input[data-required=true]:not([data-hide-asterisk=true]) > label::after {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: 1px;
   content: "*";
 }
 @supports (content: ""/"") {
-  .db-input:has(input:required):is(label)::after,
-  .db-input:has(input:required) > label::after, .db-input[data-required=true]:is(label)::after,
-  .db-input[data-required=true] > label::after {
+  .db-input:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
+  .db-input:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-input[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+  .db-input[data-required=true]:not([data-hide-asterisk=true]) > label::after {
     content: "*"/"";
   }
 }

package/build/components/radio/radio.css

@@ -148,17 +148,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line at-rule-empty-line-before */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-radio:has(input:required):is(label)::after,
-.db-radio:has(input:required) > label::after, .db-radio[data-required=true]:is(label)::after,
-.db-radio[data-required=true] > label::after {
+.db-radio:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
+.db-radio:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-radio[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+.db-radio[data-required=true]:not([data-hide-asterisk=true]) > label::after {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: 1px;
   content: "*";
 }
 @supports (content: ""/"") {
-  .db-radio:has(input:required):is(label)::after,
-  .db-radio:has(input:required) > label::after, .db-radio[data-required=true]:is(label)::after,
-  .db-radio[data-required=true] > label::after {
+  .db-radio:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
+  .db-radio:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-radio[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+  .db-radio[data-required=true]:not([data-hide-asterisk=true]) > label::after {
     content: "*"/"";
   }
 }

package/build/components/select/select.css

@@ -678,17 +678,17 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
-.db-select:has(select:required):is(label)::after,
-.db-select:has(select:required) > label::after, .db-select[data-required=true]:is(label)::after,
-.db-select[data-required=true] > label::after {
+.db-select:has(select:required):not([data-hide-asterisk=true]):is(label)::after,
+.db-select:has(select:required):not([data-hide-asterisk=true]) > label::after, .db-select[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+.db-select[data-required=true]:not([data-hide-asterisk=true]) > label::after {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: 1px;
   content: "*";
 }
 @supports (content: ""/"") {
-  .db-select:has(select:required):is(label)::after,
-  .db-select:has(select:required) > label::after, .db-select[data-required=true]:is(label)::after,
-  .db-select[data-required=true] > label::after {
+  .db-select:has(select:required):not([data-hide-asterisk=true]):is(label)::after,
+  .db-select:has(select:required):not([data-hide-asterisk=true]) > label::after, .db-select[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+  .db-select[data-required=true]:not([data-hide-asterisk=true]) > label::after {
     content: "*"/"";
   }
 }

package/build/components/switch/switch.css

@@ -499,17 +499,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-switch {
   user-select: none;
 }
-.db-switch:has(input:required):is(label)::after,
-.db-switch:has(input:required) > label::after, .db-switch[data-required=true]:is(label)::after,
-.db-switch[data-required=true] > label::after {
+.db-switch:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
+.db-switch:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-switch[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+.db-switch[data-required=true]:not([data-hide-asterisk=true]) > label::after {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: 1px;
   content: "*";
 }
 @supports (content: ""/"") {
-  .db-switch:has(input:required):is(label)::after,
-  .db-switch:has(input:required) > label::after, .db-switch[data-required=true]:is(label)::after,
-  .db-switch[data-required=true] > label::after {
+  .db-switch:has(input:required):not([data-hide-asterisk=true]):is(label)::after,
+  .db-switch:has(input:required):not([data-hide-asterisk=true]) > label::after, .db-switch[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+  .db-switch[data-required=true]:not([data-hide-asterisk=true]) > label::after {
     content: "*"/"";
   }
 }

package/build/components/textarea/textarea.css

@@ -439,17 +439,17 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
-.db-textarea:has(textarea:required):is(label)::after,
-.db-textarea:has(textarea:required) > label::after, .db-textarea[data-required=true]:is(label)::after,
-.db-textarea[data-required=true] > label::after {
+.db-textarea:has(textarea:required):not([data-hide-asterisk=true]):is(label)::after,
+.db-textarea:has(textarea:required):not([data-hide-asterisk=true]) > label::after, .db-textarea[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+.db-textarea[data-required=true]:not([data-hide-asterisk=true]) > label::after {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-inline-start: 1px;
   content: "*";
 }
 @supports (content: ""/"") {
-  .db-textarea:has(textarea:required):is(label)::after,
-  .db-textarea:has(textarea:required) > label::after, .db-textarea[data-required=true]:is(label)::after,
-  .db-textarea[data-required=true] > label::after {
+  .db-textarea:has(textarea:required):not([data-hide-asterisk=true]):is(label)::after,
+  .db-textarea:has(textarea:required):not([data-hide-asterisk=true]) > label::after, .db-textarea[data-required=true]:not([data-hide-asterisk=true]):is(label)::after,
+  .db-textarea[data-required=true]:not([data-hide-asterisk=true]) > label::after {
     content: "*"/"";
   }
 }
@@ -709,6 +709,7 @@ textarea[aria-disabled=true]) {
 }
 .db-textarea textarea {
   overflow-y: scroll;
+  overflow-block: scroll;
   padding-block: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-xs);
 }
 .db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown)))::before {

package/build/components/textarea/textarea.scss

@@ -52,6 +52,7 @@
 		@extend %scrollbar;
 
 		overflow-y: scroll;
+		overflow-block: scroll;
 
 		// we don't have icons in textarea so we can overwrite it here
 		padding-block: variables.$db-spacing-fixed-xs