@db-ux/core-components 2.3.1 → 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/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;
 }
 
@@ -286,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);
@@ -338,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;
 	}
 }
@@ -134,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"] {
@@ -195,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: "*"/"";
   }
 }