@db-ux/core-components 4.3.0 → 4.3.2-consolidation-7549d9f

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @db-ux/core-components
 
+## 4.3.1
+
+### Patch Changes
+
+- fix(angular): issue with form-components not applying value changes because of [attr.value] instead of native [value] binding - [see commit 61ab4a3](https://github.com/db-ux-design-system/core-web/commit/61ab4a3e9a781459b829c74cf23624a23edd9e3f)
+
 ## 4.3.0
 
 ### Minor Changes

package/build/assets/icons/LICENCES.json

@@ -83,6 +83,78 @@
 		"licence": "https://lucide.dev/license#lucide-license",
 		"origin": "plus"
 	},
+	{
+		"name": "eye.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "eye"
+	},
+	{
+		"name": "eye_disabled.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "eye-off"
+	},
+	{
+		"name": "double_chevron_down.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "chevrons-down"
+	},
+	{
+		"name": "double_chevron_up.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "chevrons-up"
+	},
+	{
+		"name": "double_chevron_left.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "chevrons-left"
+	},
+	{
+		"name": "double_chevron_right.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "chevrons-right"
+	},
+	{
+		"name": "copy.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "copy"
+	},
+	{
+		"name": "house.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "house"
+	},
+	{
+		"name": "circle_small.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "circle-small"
+	},
+	{
+		"name": "chat.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "message-square-text"
+	},
+	{
+		"name": "sun.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "sun"
+	},
+	{
+		"name": "moon.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "moon"
+	},
 	{
 		"name": "minus.svg",
 		"type": "lucide",

package/build/assets/icons/chat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-text-icon lucide-message-square-text"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/><path d="M7 11h10"/><path d="M7 15h6"/><path d="M7 7h8"/></svg>

package/build/assets/icons/circle_small.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-small-icon lucide-circle-small"><circle cx="12" cy="12" r="6"/></svg>

package/build/assets/icons/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/build/assets/icons/double_chevron_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-down-icon lucide-chevrons-down"><path d="m7 6 5 5 5-5"/><path d="m7 13 5 5 5-5"/></svg>

package/build/assets/icons/double_chevron_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-left-icon lucide-chevrons-left"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>

package/build/assets/icons/double_chevron_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-right-icon lucide-chevrons-right"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>

package/build/assets/icons/double_chevron_up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-icon lucide-chevrons-up"><path d="m17 11-5-5-5 5"/><path d="m17 18-5-5-5 5"/></svg>

package/build/assets/icons/eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>

package/build/assets/icons/eye_disabled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>

package/build/assets/icons/house.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house-icon lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>

package/build/assets/icons/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon-icon lucide-moon"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/></svg>

package/build/assets/icons/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-icon lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>

package/build/components/accordion-item/accordion-item.css

@@ -62,70 +62,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;

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

@@ -219,70 +219,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")
  */
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;

package/build/components/drawer/drawer.css

@@ -43,70 +43,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;
@@ -153,15 +89,17 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
 }
 
-.db-drawer .db-drawer-container {
+.db-drawer .db-drawer-container:not([data-direction]), .db-drawer .db-drawer-container[data-direction=right] {
+  transform: translateX(110%);
   inset-inline: auto 0;
 }
-.db-drawer [data-rounded=true].db-drawer-container {
+.db-drawer [data-rounded=true].db-drawer-container:not([data-direction]), .db-drawer [data-rounded=true].db-drawer-container[data-direction=right] {
   border-start-start-radius: var(--db-border-radius-sm);
   border-end-start-radius: var(--db-border-radius-sm);
 }
 
 .db-drawer .db-drawer-container[data-direction=left] {
+  transform: translateX(-110%);
   inset-inline: 0 auto;
 }
 .db-drawer [data-rounded=true].db-drawer-container[data-direction=left] {
@@ -176,6 +114,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container[data-direction=up] {
+  transform: translateY(110%);
   inset: auto 0 0;
 }
 .db-drawer [data-rounded=true].db-drawer-container[data-direction=up] {
@@ -184,6 +123,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container[data-direction=down] {
+  transform: translateY(-110%);
   inset: 0 0 auto;
 }
 .db-drawer [data-rounded=true].db-drawer-container[data-direction=down] {
@@ -305,6 +245,11 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-drawer .db-drawer-container[data-rounded=true] {
   box-shadow: var(--db-elevation-md);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-drawer .db-drawer-container {
+    transition: transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
+  }
+}
 .db-drawer .db-drawer-container .db-drawer-header {
   display: none;
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
@@ -364,31 +309,14 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .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);
-  }
-  .db-drawer[open] .db-drawer-container[data-direction=left] {
-    animation: show-left-to-right var(--db-transition-straight-show);
-  }
-  .db-drawer[open] .db-drawer-container[data-direction=up] {
-    animation: show-bottom-to-top var(--db-transition-straight-show);
-  }
-  .db-drawer[open] .db-drawer-container[data-direction=down] {
-    animation: show-top-to-bottom var(--db-transition-straight-show);
-  }
+.db-drawer[open] .db-drawer-container[data-transition=open]:not([data-direction]), .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=right], .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=left] {
+  transform: translateX(0%);
+}
+.db-drawer[open] .db-drawer-container[data-transition=open][data-direction=up], .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=down] {
+  transform: translateY(0%);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
-  .db-drawer[open] .db-drawer-container[hidden]:not([data-direction]), .db-drawer[open] .db-drawer-container[hidden][data-direction=right] {
-    animation: hide-right-to-left var(--db-transition-straight-hide);
-  }
-  .db-drawer[open] .db-drawer-container[hidden][data-direction=left] {
-    animation: hide-left-to-right var(--db-transition-straight-hide);
-  }
-  .db-drawer[open] .db-drawer-container[hidden][data-direction=up] {
-    animation: hide-bottom-to-top var(--db-transition-straight-hide);
-  }
-  .db-drawer[open] .db-drawer-container[hidden][data-direction=down] {
-    animation: hide-top-to-bottom var(--db-transition-straight-hide);
+  .db-drawer[open] .db-drawer-container[data-transition=close] {
+    transition: transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
   }
 }

package/build/components/drawer/drawer.scss

@@ -7,6 +7,7 @@
 @use "../../styles/dialog-init";
 
 %direction-right {
+	transform: translateX(110%);
 	inset-inline: auto 0;
 
 	&[data-rounded="true"] {
@@ -16,6 +17,7 @@
 }
 
 %direction-left {
+	transform: translateX(-110%);
 	inset-inline: 0 auto;
 
 	&[data-rounded="true"] {
@@ -45,6 +47,7 @@
 %direction-up {
 	@extend %full-horizontal;
 
+	transform: translateY(110%);
 	inset: auto 0 0;
 
 	&[data-rounded="true"] {
@@ -56,6 +59,7 @@
 %direction-down {
 	@extend %full-horizontal;
 
+	transform: translateY(-110%);
 	inset: 0 0 auto;
 
 	&[data-rounded="true"] {
@@ -135,7 +139,6 @@ $spacings: (
 
 .db-drawer {
 	.db-drawer-container {
-		@extend %direction-right;
 		@extend %spacing-drawer;
 
 		display: flex;
@@ -191,6 +194,17 @@ $spacings: (
 			box-shadow: variables.$db-elevation-md;
 		}
 
+		@media screen and (prefers-reduced-motion: no-preference) {
+			transition: transform
+				#{variables.$db-transition-duration-extra-slow}
+				#{variables.$db-transition-timing-emotional};
+		}
+
+		&:not([data-direction]),
+		&[data-direction="right"] {
+			@extend %direction-right;
+		}
+
 		&[data-direction="left"] {
 			@extend %direction-left;
 		}
@@ -265,51 +279,24 @@ $spacings: (
 
 	&[open] {
 		.db-drawer-container {
-			@media screen and (prefers-reduced-motion: no-preference) {
+			&[data-transition="open"] {
 				&:not([data-direction]),
-				&[data-direction="right"] {
-					animation: show-right-to-left
-						#{variables.$db-transition-straight-show};
-				}
-
+				&[data-direction="right"],
 				&[data-direction="left"] {
-					animation: show-left-to-right
-						#{variables.$db-transition-straight-show};
-				}
-
-				&[data-direction="up"] {
-					animation: show-bottom-to-top
-						#{variables.$db-transition-straight-show};
+					transform: translateX(0%);
 				}
 
+				&[data-direction="up"],
 				&[data-direction="down"] {
-					animation: show-top-to-bottom
-						#{variables.$db-transition-straight-show};
+					transform: translateY(0%);
 				}
 			}
 
-			&[hidden] {
+			&[data-transition="close"] {
 				@media screen and (prefers-reduced-motion: no-preference) {
-					&:not([data-direction]),
-					&[data-direction="right"] {
-						animation: hide-right-to-left
-							#{variables.$db-transition-straight-hide};
-					}
-
-					&[data-direction="left"] {
-						animation: hide-left-to-right
-							#{variables.$db-transition-straight-hide};
-					}
-
-					&[data-direction="up"] {
-						animation: hide-bottom-to-top
-							#{variables.$db-transition-straight-hide};
-					}
-
-					&[data-direction="down"] {
-						animation: hide-top-to-bottom
-							#{variables.$db-transition-straight-hide};
-					}
+					transition: transform
+						#{variables.$db-transition-duration-slow}
+						#{variables.$db-transition-timing-emotional};
 				}
 			}
 		}

package/build/components/link/link.css

@@ -129,70 +129,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   transition: outline var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
 }
 
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;