@db-ux/core-components 4.13.1-angular-signal-forms13-577b861 → 4.14.0-shell-52d18db

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

@@ -2,19 +2,14 @@
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-custom-button input {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }
@@ -166,17 +161,16 @@
 }
 .db-custom-button[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-custom-button[data-icon]:not([data-show-icon=false])::before {
   position: absolute;
-  inset-block-start: calc(50% - 0.5em);
-  inset-inline-start: var(--db-icon-passing-inline-start, var(--db-spacing-fixed-sm));
+  inset-block-start: var(--db-icon-passing-inset-block-start, calc(50% - 0.5em));
+  inset-inline-start: var(--db-icon-passing-inset-inline-start, var(--db-spacing-fixed-sm));
   pointer-events: none;
   z-index: 1;
 }
-.db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) label, .db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) button, .db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) a, .db-custom-button[data-icon]:not([data-show-icon=false]) label, .db-custom-button[data-icon]:not([data-show-icon=false]) button, .db-custom-button[data-icon]:not([data-show-icon=false]) a {
-  --db-padding-inline-start: calc(
-  	var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + 1lh
-  );
+.db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) > :is(label, button, a),
+.db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) > * > :is(label, button, a), .db-custom-button[data-icon]:not([data-show-icon=false]) > :is(label, button, a),
+.db-custom-button[data-icon]:not([data-show-icon=false]) > * > :is(label, button, a) {
   /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: var(--db-padding-inline-start);
+  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size)));
 }
 .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false])::after {
   position: absolute;
@@ -185,7 +179,8 @@
   pointer-events: none;
   z-index: 1;
 }
-.db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) label, .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) button, .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) a {
+.db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) > :is(label, button, a),
+.db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) > * > :is(label, button, a) {
   padding-inline-end: calc(var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size));
 }
 .db-custom-button:has(:is(input, button):disabled,
@@ -194,7 +189,7 @@
 }
 .db-custom-button[data-no-text=true] {
   --db-icon-margin-end: 0;
-  --db-icon-passing-inline-start: calc(50% - 0.5em);
+  --db-icon-passing-inset-inline-start: calc(50% - 0.5em);
 }
 .db-custom-button label:has(input:checked) {
   color: var(--db-adaptive-on-bg-inverted-default);

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

@@ -49,7 +49,7 @@ $icon-padding-custom-button: calc(
 
 	&[data-no-text="true"] {
 		--db-icon-margin-end: 0;
-		--db-icon-passing-inline-start: calc(50% - 0.5em);
+		--db-icon-passing-inset-inline-start: calc(50% - 0.5em);
 	}
 
 	label:has(input:checked) {

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

@@ -3,19 +3,14 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-custom-select[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }
@@ -1030,18 +1025,24 @@ summary[aria-disabled=true]) {
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost],
-  .db-custom-select > .db-button[data-icon=cross][data-variant=ghost] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost]::after,
+  .db-custom-select > .db-button[data-icon=cross][data-variant=ghost]::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost]::after,
+.db-custom-select > .db-button[data-icon=cross][data-variant=ghost]::after {
+  /* jscpd:ignore-end */
+}
+.db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost]::after,
 .db-custom-select > .db-button[data-icon=cross][data-variant=ghost]::after {
   position: absolute;
   inset-inline-end: calc(-1 * var(--db-spacing-fixed-xs) - var(--db-border-width-3xs));
@@ -1054,7 +1055,7 @@ summary[aria-disabled=true]) {
   flex-wrap: wrap;
 }
 .db-custom-select[data-selected-type=tag] .db-custom-select-form-field > button {
-  align-self: start;
+  align-self: flex-start;
 }
 .db-custom-select > details[open] > summary[data-force-mobile=true]::before {
   position: fixed;

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

@@ -102,7 +102,7 @@
 			}
 
 			> button {
-				align-self: start;
+				align-self: flex-start;
 			}
 		}
 	}

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

@@ -3,19 +3,14 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }
@@ -249,18 +244,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-checkbox),
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-checkbox) {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-checkbox)::after,
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-checkbox)::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-checkbox)::after,
+.db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-checkbox)::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button), .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input),
 .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button),
 .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-input) {
@@ -280,18 +281,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input),
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-input) {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input)::after,
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-input)::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-input)::after,
+.db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-input)::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button),
 .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button) {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
@@ -306,18 +313,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button),
-  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button) {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)::after,
+  .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)::after,
+.db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button),
 .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button) {
   /* stylelint-disable-next-line media-query-no-invalid */

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

@@ -1,18 +1,13 @@
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

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

@@ -1,18 +1,13 @@
 .db-custom-select-list > legend, .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

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

@@ -3,19 +3,14 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }
@@ -47,17 +42,22 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-divider=true] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-divider=true]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-divider=true]::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-custom-select-list-item:not([hidden]) {
   display: flex;
@@ -95,17 +95,22 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-custom-select-list-item[data-divider=true]:not(:last-of-type) {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-custom-select-list-item[data-divider=true]:not(:last-of-type)::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-custom-select-list-item[data-divider=true]:not(:last-of-type)::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-custom-select-list-item > label {
   --db-icon-margin-start: auto;
   --db-check-element-label-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

package/build/components/divider/divider.css

@@ -22,17 +22,22 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider:not([data-variant=vertical]) {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider:not([data-variant=vertical])::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider:not([data-variant=vertical])::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-divider:not([data-variant=vertical])[data-width=full] {
   inline-size: 100%;
 }
@@ -48,17 +53,22 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider[data-variant=vertical] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider[data-variant=vertical]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider[data-variant=vertical]::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-divider[data-variant=vertical]:is(:not([data-margin]), [data-margin=small]) {
   margin: 0 var(--db-spacing-fixed-sm);
 }