@db-ux/core-components 4.12.1 → 4.13.0-shell-f221975

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);
 }