@db-ux/core-components 4.13.1-angular-signal-forms12-ac097f6 → 4.14.0

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

package/build/components/drawer/drawer.css

@@ -222,17 +222,22 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   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-drawer .db-drawer-container .db-drawer-header {
-    /* 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-drawer .db-drawer-container .db-drawer-header::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-drawer .db-drawer-container .db-drawer-header::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-drawer .db-drawer-container .db-drawer-header .db-drawer-header-text {
   margin-block: auto;
   font-weight: 700;

package/build/components/header/header.css

@@ -391,17 +391,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-header-meta-navigation {
-    /* 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-header-meta-navigation::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-header-meta-navigation::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-header-meta-navigation {
   /* stylelint-disable-next-line media-query-no-invalid */
 }
@@ -448,16 +453,19 @@
     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 db-ux/use-border-color */
     /* stylelint-disable-next-line at-rule-empty-line-before */
+    /* jscpd:ignore-end */
   }
 }
 @media (min-width: 64em) and (forced-colors: active) {
-  .db-header-navigation-container:not([data-force-mobile]), .db-header-navigation-container[data-force-mobile=false] {
-    /* 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-header-navigation-container:not([data-force-mobile])::before, .db-header-navigation-container[data-force-mobile=false]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 @media (min-width: 64em) {
@@ -506,17 +514,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-header-action-container {
-    /* 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-header-action-container::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-header-action-container::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-header-action-container {
   /* stylelint-disable-next-line media-query-no-invalid */
 }
@@ -566,17 +579,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-header-secondary-action {
-    /* 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-header-secondary-action::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-header-secondary-action::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-header-secondary-action {
   /* stylelint-disable-next-line media-query-no-invalid */
 }

package/build/components/input/input.css

@@ -1,18 +1,13 @@
 .db-input[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;
 }

package/build/components/link/link.css

@@ -84,8 +84,12 @@
 .db-link a:not([hidden]), .db-link:not([hidden]) {
   display: inline-block;
 }
+.db-link a:not([data-wrap=true]):not([hidden]), .db-link:not([data-wrap=true]):not([hidden]) {
+  display: inline-flex;
+}
 .db-link a:not([data-wrap=true]), .db-link:not([data-wrap=true]) {
-  block-size: var(--db-sizing-sm);
+  block-size: 1lh;
+  align-items: center;
 }
 
 .db-link {
@@ -122,6 +126,9 @@
   opacity: var(--db-opacity-md);
   pointer-events: none;
 }
+.db-link::after {
+  text-decoration: none;
+}
 
 .db-link {
   --db-icon-margin-start: var(--db-spacing-fixed-2xs);

package/build/components/navigation/navigation.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/navigation-item/navigation-item.css

@@ -148,17 +148,16 @@
 }
 .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-navigation-item[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-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) label, .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) button, .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) a, .db-navigation-item[data-icon]:not([data-show-icon=false]) label, .db-navigation-item[data-icon]:not([data-show-icon=false]) button, .db-navigation-item[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-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) > :is(label, button, a),
+.db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) > * > :is(label, button, a), .db-navigation-item[data-icon]:not([data-show-icon=false]) > :is(label, button, a),
+.db-navigation-item[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-navigation-item:not([hidden]) {
   display: inline-flex;
@@ -434,14 +433,19 @@
   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-mobile-navigation-back {
-    /* 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-mobile-navigation-back::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-mobile-navigation-back::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}

package/build/components/notification/notification.css

@@ -843,8 +843,12 @@
 .db-notification a:not([hidden]) {
   display: inline-block;
 }
+.db-notification a:not([data-wrap=true]):not([hidden]) {
+  display: inline-flex;
+}
 .db-notification a:not([data-wrap=true]) {
-  block-size: var(--db-sizing-sm);
+  block-size: 1lh;
+  align-items: center;
 }
 
 .db-notification a[data-variant=brand], .db-notification a {
@@ -881,6 +885,9 @@
   opacity: var(--db-opacity-md);
   pointer-events: none;
 }
+.db-notification a::after {
+  text-decoration: none;
+}
 
 .db-notification {
   grid-template-areas: "content";

package/build/components/radio/radio.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;
 }

package/build/components/select/select.css

@@ -3,19 +3,14 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-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;
 }

package/build/components/switch/switch.css

@@ -4,19 +4,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;
 }

package/build/components/tab-item/tab-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;
 }

package/build/components/tab-list/tab-list.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;
 }

package/build/components/table/table.css

@@ -2,19 +2,14 @@
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-table:not([data-show-caption=true]) caption {
-  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;
 }