@db-ux/core-components 4.0.2 → 4.0.4

package/CHANGELOG.md

@@ -1,15 +1,27 @@
 # @db-ux/core-components
 
+## 4.0.4
+
+### Patch Changes
+
+- fix: hide-animation for drawer - [see commit d4a73fa](https://github.com/db-ux-design-system/core-web/commit/d4a73fa9faba38b6f20fda6f7c85d5c6617793fe)
+
+## 4.0.3
+
+### Patch Changes
+
+- chore: generate Amazon Q rule file with [`@db-ux/agent-cli` node package](https://www.npmjs.com/package/@db-ux/agent-cli) - [see commit b61c8b1](https://github.com/db-ux-design-system/core-web/commit/b61c8b14992f5a5b3615c6bff74018d5682aa0cc)
+
 ## 4.0.2
 
 ### Patch Changes
 
-- chore: update instructions files for better copilot outputs - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e):
+- chore: update instructions files for better copilot outputs - [see commit e4bc905](https://github.com/db-ux-design-system/core-web/commit/e4bc90508479387371d816d5776f9f568aa5fb82):
   - fix: add some missing variables
 
-- fix(card): Remove the obsolete but harmful declaration regarding wrapping button and link styles. - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e)
+- fix(card): Remove the obsolete but harmful declaration regarding wrapping button and link styles. - [see commit 34c78df](https://github.com/db-ux-design-system/core-web/commit/34c78dffd4f43b0ac740574358b426a562e05cd0)
 
-- Set border of select, textarea, custom select and input to corresponding color when in/valid state is set. - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e)
+- Set border of select, textarea, custom select and input to corresponding color when in/valid state is set. - [see commit 2a02263](https://github.com/db-ux-design-system/core-web/commit/2a022632f8fea7445e77fb632f109d6cd093e2d3)
 
 ## 4.0.1
 
@@ -52,18 +64,18 @@ _version bump_
 
 ### Patch Changes
 
-- 0c20c00: fix: color mode for textarea resizer control set by color-mode-switch documentation UI component
-- 0c20c00: refactor: enabling `hidden` HTML attribute in every context in which we need to set overwriting styling declarations (`display`)
+- fix: color mode for textarea resizer control set by color-mode-switch documentation UI component - [see commit 354e270](https://github.com/db-ux-design-system/core-web/commit/354e27029a4378288a97ed5e31b75c11758f0c01)
+- refactor: enabling `hidden` HTML attribute in every context in which we need to set overwriting styling declarations (`display`) - [see commit 4826455](https://github.com/db-ux-design-system/core-web/commit/4826455637590b6ae780afb93abb9effe9380342)
   - @db-ux/core-foundations@3.1.17
 
 ## 3.1.16
 
 ### Patch Changes
 
-- a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode:
+- a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode - [see commit 6d60bab](https://github.com/db-ux-design-system/core-web/commit/6d60bab2eb87f16a9ffa942085bffd658564769c):
   - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
   - Now, all options are accessible via keyboard regardless of group boundaries.
-- a28eb71: fix: JS framework core-components packages are missing `@db-ux` dependencies
+- fix: JS framework core-components packages are missing `@db-ux` dependencies - [see commit 49df866](https://github.com/db-ux-design-system/core-web/commit/49df866e753a9459f5acdca4ad1e19141b477471)
   - @db-ux/core-foundations@3.1.16
 
 ## 3.1.15

package/agent/Best-Practise_Common-AI-Mistakes.md

@@ -0,0 +1,15 @@
+# Best Practise / Common AI mistakes
+
+## `DBButton` or `db-button`
+
+- available variants are `outlined`, `brand`, `filled`, `ghost`
+- always use variant `outlined` as default
+- use variant `brand` as CTA or primary action
+- if `noText`/`no-text` property is used add a `DBTooltip` or `db-tooltip` inside the Button
+- always add a `type` as property as best practise
+- there is no `size=large` button
+
+## `DBStack` or `db-stack`
+
+- there is no property `gap="fix-md"`, available values are `small`, `medium`, etc.
+- there is no property `direction="horizontal"`, available values are `row`, `column`, etc.

package/agent/_instructions.md

@@ -1,14 +1,3 @@
-## Common AI mistakes
+## Best Practise / Common AI mistakes
 
-### `DBButton` or `db-button`
-
-- available variants are `outlined`, `brand`, `filled`, `ghost`
-- always use variant `outlined` as default
-- use variant `brand` as CTA or primary action
-- if `noText`/`no-text` property is used add a `DBTooltip` or `db-tooltip` inside the Button
-- always add a `type` as property as best practise
-
-### `DBStack` or `db-stack`
-
-- there is no property `gap="fix-md"`, available values are `small`, `medium`, etc.
-- there is no property `direction="horizontal"`, available values are `row`, `column`, etc.
+- always read this file if you use Components: `**agent-path**/agent/Best-Practise_Common-AI-Mistakes.md`

package/build/components/brand/brand.scss

@@ -1,11 +1,11 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/fonts";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 
 .db-brand {
 	@extend %db-overwrite-font-size-md;
-	@include display.display(flex);
+	@include helpers.display(flex);
 
 	gap: variables.$db-spacing-fixed-sm;
 	align-items: center;

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

@@ -141,10 +141,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-custom-select-list > ul {
   all: unset;
-  flex-direction: column;
-}
-.db-custom-select-list > ul:not([hidden]) {
   display: flex;
+  flex-direction: column;
 }
 .db-custom-select-list > ul:has(span) {
   --db-custom-select-list-item-group-padding: 1;

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

@@ -1,6 +1,6 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "../../styles/internal/form-components";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 
 .db-custom-select-list {
 	all: unset;
@@ -27,9 +27,7 @@
 
 	> ul {
 		all: unset;
-
-		@include display.display(flex);
-
+		display: flex;
 		flex-direction: column;
 
 		&:has(span) {

package/build/components/drawer/drawer.css

@@ -278,6 +278,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container {
+  display: flex;
   flex-direction: column;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   block-size: 100%;
@@ -285,9 +286,6 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   position: fixed;
   box-shadow: var(--db-elevation-md);
 }
-.db-drawer .db-drawer-container:not([hidden]) {
-  display: flex;
-}
 .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)));
@@ -308,12 +306,10 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   box-shadow: var(--db-elevation-md);
 }
 .db-drawer .db-drawer-container .db-drawer-header {
+  display: none;
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
   position: var(--db-tooltip-parent-position, relative);
 }
-.db-drawer .db-drawer-container .db-drawer-header:not([hidden]) {
-  display: none;
-}
 .db-drawer .db-drawer-container .db-drawer-header[data-emphasis=strong] {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }
@@ -342,7 +338,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-drawer .db-drawer-container .db-drawer-header .button-close-drawer button {
   margin-inline-start: auto;
 }
-.db-drawer .db-drawer-container .db-drawer-header:has(.button-close-drawer):not([hidden]), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)):not([hidden]) {
+.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] {
@@ -353,7 +349,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   inline-size: 100%;
   background-color: transparent;
 }
-.db-drawer[data-position=absolute][open]:not([hidden]) {
+.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] {

package/build/components/drawer/drawer.scss

@@ -137,8 +137,8 @@ $spacings: (
 	.db-drawer-container {
 		@extend %direction-right;
 		@extend %spacing-drawer;
-		@include helpers.display(flex);
 
+		display: flex;
 		flex-direction: column;
 		background-color: colors.$db-adaptive-bg-basic-level-1-default;
 		block-size: 100%;
@@ -204,7 +204,8 @@ $spacings: (
 		}
 
 		.db-drawer-header {
-			@include helpers.display(none);
+			display: none;
+
 			@include helpers.divider("bottom");
 
 			.db-drawer-header-text {
@@ -223,7 +224,7 @@ $spacings: (
 
 			&:has(.button-close-drawer),
 			&:has(:not(.db-drawer-header-text:empty)) {
-				@include helpers.display(flex);
+				display: flex;
 			}
 		}
 	}
@@ -237,7 +238,7 @@ $spacings: (
 		background-color: transparent;
 
 		&[open] {
-			@include helpers.display(flex);
+			display: flex;
 		}
 
 		&:not([data-direction]),

package/build/components/icon/icon.scss

@@ -1,12 +1,12 @@
 @use "@db-ux/core-foundations/build/styles/icons";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 
 .db-icon {
 	@include icons.is-icon-text-replace;
 
 	/* Safari hack */
 	@supports (-webkit-hyphens: none) {
-		@include display.display(inline-block);
+		@include helpers.display(inline-block);
 
 		&::before {
 			block-size: auto;

package/build/components/infotext/infotext.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "@db-ux/core-foundations/build/styles/fonts";
 @use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/icons";
 
@@ -9,7 +9,7 @@
 	--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
 
 	@extend %db-overwrite-font-size-sm;
-	@include display.display(flex);
+	@include helpers.display(flex);
 
 	@include icons.has-no-icon {
 		@include icons.to-filled-icon;

package/build/components/navigation/navigation.css

@@ -200,6 +200,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 .db-navigation > menu {
+  display: flex;
   flex-direction: column;
   padding: 0;
   margin: 0;
@@ -207,9 +208,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   /* stylelint-disable-next-line media-query-no-invalid */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-navigation > menu:not([hidden]) {
-  display: flex;
-}
 @media screen and (min-width: 64em) {
   .db-navigation > menu:not([data-force-mobile]), .db-navigation > menu[data-force-mobile=false] {
     flex-direction: row;

package/build/components/navigation/navigation.scss

@@ -1,7 +1,7 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/screen-sizes";
 @use "../../styles/internal/component";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/form-components";
 @use "../../styles/internal/db-puls";
 
@@ -15,8 +15,7 @@
 	}
 
 	> menu {
-		@include display.display(flex);
-
+		display: flex;
 		flex-direction: column;
 		padding: 0;
 		margin: 0;
@@ -102,7 +101,7 @@
 	&[data-force-close="true"] {
 		> menu menu {
 			@include screen-sizes.screen("md") {
-				@include display.display(none);
+				@include helpers.display(none);
 			}
 		}
 	}

package/build/components/notification/notification-grid-non-overlay.scss

@@ -1,8 +1,6 @@
-@use "@db-ux/core-foundations/build/styles/helpers/display";
-
 %grid-layout-variant-not-overlay {
 	span {
-		@include display.display(none);
+		display: none;
 	}
 
 	// has link

package/build/components/notification/notification.css

@@ -1162,7 +1162,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   grid-template-areas: "icon head timestamp close" "icon content content content";
 }
 
-.db-notification:not([data-variant=overlay]) span:not([hidden]) {
+.db-notification:not([data-variant=overlay]) span {
   display: none;
 }
 .db-notification:has(a):not([data-link-variant=inline]):not([data-variant=overlay]) {

package/build/components/notification/notification.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "@db-ux/core-foundations/build/styles/density";
 @use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/icons";
 @use "@db-ux/core-foundations/build/styles/screen-sizes";
@@ -28,7 +28,7 @@
 	@extend %component-border;
 	@extend %grid-layout-default;
 	@extend %ugly-line-height-workarounds;
-	@include display.display(grid);
+	@include helpers.display(grid);
 
 	padding: variables.$db-spacing-fixed-md;
 	gap: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;

package/build/components/page/page.css

@@ -8,6 +8,41 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Transitions */
 /* Screen sizes */
 /* Container sizes */
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
 .db-page-document {
   block-size: 100%;
   overflow: hidden;

package/build/components/page/page.scss

@@ -1,5 +1,5 @@
 @use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 
 .db-page-document {
 	block-size: 100%;
@@ -8,7 +8,7 @@
 
 @mixin header-footer-style {
 	> :is(.db-header, .db-footer, header, footer) {
-		@include display.display(flex);
+		@include helpers.display(flex);
 
 		flex: 0 1 auto;
 		flex-grow: 0;
@@ -36,7 +36,7 @@
 		block-size: 100%;
 		min-block-size: 100%;
 
-		@include display.display(flex);
+		@include helpers.display(flex);
 
 		flex-direction: column;
 
@@ -46,7 +46,7 @@
 		}
 
 		> .db-main {
-			@include display.display(flex);
+			@include helpers.display(flex);
 
 			flex-direction: column;
 			overflow: auto;

package/build/components/popover/popover.scss

@@ -1,12 +1,12 @@
 @use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/popover-component";
 @use "../../styles/internal/component";
 
 .db-popover {
 	position: relative;
 
-	@include display.display(flex);
+	@include helpers.display(flex);
 
 	block-size: fit-content;
 	inline-size: fit-content;

package/build/components/select/select.css

@@ -943,6 +943,6 @@ select[aria-disabled=true]) {
 .db-select optgroup {
   background-color: var(--db-adaptive-bg-basic-level-3-default);
 }
-.db-select:has(> select option:checked:not(.placeholder)) [id$=-placeholder]:not([hidden]) {
+.db-select:has(> select option:checked:not(.placeholder)) [id$=-placeholder] {
   display: none;
 }

package/build/components/select/select.scss

@@ -6,7 +6,6 @@
 @use "../../styles/internal/form-components";
 @use "../../styles/internal/component";
 @use "../../styles/internal/select-components";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
 
 .db-select-placeholder {
 	@extend %select-absolute-placeholder;
@@ -47,7 +46,7 @@
 
 	&:has(> select option:checked:not(.placeholder)) {
 		[id$="-placeholder"] {
-			@include display.display(none);
+			display: none;
 		}
 	}
 }

package/build/components/tab-list/tab-list.css

@@ -301,11 +301,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   position: relative;
 }
 .db-tab-list > ul {
+  display: flex;
   gap: var(--db-spacing-fixed-sm);
   scroll-behavior: smooth;
   padding: 0;
   margin: 0;
 }
-.db-tab-list > ul:not([hidden]) {
-  display: flex;
-}

package/build/components/tab-list/tab-list.scss

@@ -1,5 +1,4 @@
 @use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
 @use "../../styles/internal/scrollbar";
 
 .db-tab-list {
@@ -9,8 +8,8 @@
 
 	> ul {
 		@extend %scrollbar;
-		@include display.display(flex);
 
+		display: flex;
 		gap: variables.$db-spacing-fixed-sm;
 		scroll-behavior: smooth;
 		padding: 0;

package/build/components/tab-panel/tab-panel.css

@@ -8,6 +8,41 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Transitions */
 /* Screen sizes */
 /* Container sizes */
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
 .db-tab-panel:not([hidden]) {
   display: none;
 }

package/build/components/tab-panel/tab-panel.scss

@@ -1,6 +1,6 @@
 @use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 
 .db-tab-panel {
-	@include display.display(none);
+	@include helpers.display(none);
 }

package/build/components/tabs/tabs.scss

@@ -2,7 +2,7 @@
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "../../styles/internal/form-components";
 @use "../../styles/internal/db-puls";
-@use "@db-ux/core-foundations/build/styles/helpers/display";
+@use "@db-ux/core-foundations/build/styles/helpers";
 
 $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
@@ -13,7 +13,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 			&:has([id$="-tab-#{$index}"]:checked) {
 				~ dbtabpanel > [id$="-tab-panel-#{$index}"],
 				~ db-tab-panel > [id$="-tab-panel-#{$index}"] {
-					@include display.display(block);
+					@include helpers.display(block);
 				}
 			}
 		}
@@ -75,7 +75,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	$db-tabs-z-index-button: 22;
 
 	@extend %angular-workaround;
-	@include display.display(flex);
+	@include helpers.display(flex);
 
 	inline-size: 100%;
 	position: relative;
@@ -91,7 +91,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 		@each $index in $max-tabs {
 			&:has([id$="-tab-#{$index}"]:checked)
 				~ [id$="-tab-panel-#{$index}"] {
-				@include display.display(block);
+				@include helpers.display(block);
 			}
 		}
 	}