@db-ux/core-components 1.0.0 → 1.0.1

package/build/components/accordion/accordion.css

@@ -22,9 +22,9 @@ The spacings are not part of the styling of the accordion items themselves.
 .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item,
 .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item,
 .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item {
+  margin-block-start: calc(2 * var(--db-spacing-fixed-sm));
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
   position: relative;
-  margin-block-start: calc(2 * var(--db-spacing-fixed-sm));
 }
 .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item[data-emphasis=strong],
 .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item[data-emphasis=strong], .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item[data-emphasis=strong],

package/build/components/accordion/accordion.scss

@@ -22,11 +22,11 @@ The spacings are not part of the styling of the accordion items themselves.
 	&[data-variant="divider"],
 	&:not([data-variant]) {
 		@include accordion-subsequent-item-selector() {
-			@include helpers.divider($position: "top");
-
 			// One space each before and after the divider results in a double spacing
 			margin-block-start: calc(2 * #{variables.$db-spacing-fixed-sm});
 
+			@include helpers.divider($position: "top");
+
 			// Moves the divider to the vertical center of the double spacing
 			&::before {
 				inset-block-start: calc(-1 * #{variables.$db-spacing-fixed-sm});

package/build/components/divider/divider.css

@@ -19,9 +19,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   margin: 0;
 }
 .db-divider:not([data-variant=vertical]) {
+  block-size: var(--db-border-height-3xs);
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
   position: relative;
-  block-size: var(--db-border-height-3xs);
 }
 .db-divider:not([data-variant=vertical])[data-emphasis=strong] {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
@@ -45,9 +45,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: 100%;
 }
 .db-divider[data-variant=vertical] {
+  inline-size: var(--db-border-height-3xs);
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
   position: relative;
-  inline-size: var(--db-border-height-3xs);
 }
 .db-divider[data-variant=vertical][data-emphasis=strong] {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);

package/build/components/divider/divider.scss

@@ -19,20 +19,20 @@
 	}
 
 	&:not([data-variant="vertical"]) {
-		@include helpers.divider();
-
 		block-size: variables.$db-border-height-3xs;
 
+		@include helpers.divider();
+
 		&[data-width="full"] {
 			inline-size: 100%;
 		}
 	}
 
 	&[data-variant="vertical"] {
-		@include helpers.divider("left");
-
 		inline-size: variables.$db-border-height-3xs;
 
+		@include helpers.divider("left");
+
 		&:is(:not([data-margin]), [data-margin="small"]) {
 			margin: 0 variables.$db-spacing-fixed-sm;
 		}

package/build/components/drawer/drawer.css

@@ -157,7 +157,10 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container {
-  padding-block: var(--db-spacing-fixed-sm);
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+}
+.db-drawer [data-spacing=small].db-drawer-container {
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
 }
 .db-drawer [data-spacing=small].db-drawer-container {
   padding-block: var(--db-spacing-fixed-xs);
@@ -172,6 +175,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-md));
   overflow-y: auto;
 }
+.db-drawer .db-drawer-container {
+  padding-block: var(--db-spacing-fixed-sm);
+}
 .db-drawer .db-drawer-container .db-drawer-header {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-sm));
@@ -182,6 +188,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
   overflow-y: auto;
 }
+.db-drawer [data-spacing=medium].db-drawer-container {
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+}
 .db-drawer [data-spacing=medium].db-drawer-container {
   padding-block: var(--db-spacing-fixed-sm);
 }
@@ -195,6 +204,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
   overflow-y: auto;
 }
+.db-drawer [data-spacing=large].db-drawer-container {
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+}
 .db-drawer [data-spacing=large].db-drawer-container {
   padding-block: var(--db-spacing-fixed-md);
 }
@@ -208,6 +220,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-xl));
   overflow-y: auto;
 }
+.db-drawer [data-spacing=none].db-drawer-container {
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+}
 .db-drawer [data-spacing=none].db-drawer-container {
   padding-block: 0;
 }
@@ -238,9 +253,9 @@ 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: relative;
-  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);

package/build/components/drawer/drawer.scss

@@ -76,7 +76,10 @@ $spacings: (
 );
 
 @mixin get-spacing($spacing) {
-	padding-block: map.get($spacing, "block");
+	/* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+	& {
+		padding-block: map.get($spacing, "block");
+	}
 
 	.db-drawer-header {
 		// We need this variable to overwrite it inside the header
@@ -149,10 +152,10 @@ $spacings: (
 		}
 
 		.db-drawer-header {
-			@include helpers.divider("bottom");
-
 			display: none;
 
+			@include helpers.divider("bottom");
+
 			.db-drawer-header-text {
 				margin-block: auto;
 				font-weight: 700;

package/build/components/header/header.css

@@ -401,14 +401,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-header-meta-navigation {
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-  position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--db-spacing-fixed-sm);
   justify-content: flex-end;
   background-color: var(--db-adaptive-bg-basic-level-2-default);
   padding: var(--db-spacing-fixed-md);
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
   /* stylelint-disable at-rule-empty-line-before */
   /* stylelint-enable at-rule-empty-line-before */
   /* stylelint-disable-next-line media-query-no-invalid */
@@ -566,12 +566,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-header-secondary-action {
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-  position: relative;
   flex: 0 1 auto;
   flex-grow: 0;
   flex-shrink: 0;
   padding-block-start: var(--db-spacing-fixed-xs);
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
   /* stylelint-disable at-rule-empty-line-before */
   /* stylelint-enable at-rule-empty-line-before */
   /* stylelint-disable-next-line media-query-no-invalid */

package/build/components/header/header.scss

@@ -69,8 +69,6 @@
 .db-header-meta-navigation {
 	@extend %db-density-functional;
 
-	@include helpers.divider("top");
-
 	display: flex;
 	flex-direction: column;
 	gap: variables.$db-spacing-fixed-sm;
@@ -78,6 +76,8 @@
 	background-color: colors.$db-adaptive-bg-basic-level-2-default;
 	padding: variables.$db-spacing-fixed-md;
 
+	@include helpers.divider("top");
+
 	@include screen-sizes.screen("md") {
 		padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-lg;
 		margin: 0;
@@ -162,13 +162,13 @@
 }
 
 .db-header-secondary-action {
-	@include helpers.divider("top");
-
 	flex: 0 1 auto;
 	flex-grow: 0;
 	flex-shrink: 0;
 	padding-block-start: variables.$db-spacing-fixed-xs;
 
+	@include helpers.divider("top");
+
 	@include screen-sizes.screen("md") {
 		&::before {
 			display: none;

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

@@ -454,13 +454,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 
 .db-mobile-navigation-back {
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-  position: relative;
   display: flex;
   font-weight: normal;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   padding-block-end: var(--db-spacing-fixed-md);
   margin-block-end: var(--db-spacing-fixed-md);
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
 }
 .db-mobile-navigation-back[data-emphasis=strong] {
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);

package/build/components/navigation-item/navigation-item.scss

@@ -23,14 +23,14 @@
 	// show/hide sub-navigation by click
 	&[aria-expanded="true"] {
 		~ .db-sub-navigation {
+			visibility: visible;
+
 			@media screen and (prefers-reduced-motion: no-preference) {
 				transition: visibility 0ms linear 0ms;
 				animation: show-right-to-left
 					#{variables.$db-transition-straight-show};
 			}
 
-			visibility: visible;
-
 			.db-sub-navigation {
 				inset-block: 0;
 			}
@@ -118,10 +118,10 @@
 			@extend %sub-navi-handler-desktop;
 			@extend %navigation-item;
 
+			font-weight: inherit;
+
 			// default icon for navigation
 			@include icons.set-icon("chevron_right", "after");
-
-			font-weight: inherit;
 		}
 	}
 
@@ -300,11 +300,11 @@
 }
 
 .db-mobile-navigation-back {
-	@include helpers.divider("bottom");
-
 	display: flex;
 	font-weight: normal;
 	background-color: colors.$db-adaptive-bg-basic-level-1-default;
 	padding-block-end: variables.$db-spacing-fixed-md;
 	margin-block-end: variables.$db-spacing-fixed-md;
+
+	@include helpers.divider("bottom");
 }

package/build/components/popover/popover.css

@@ -256,7 +256,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   box-shadow: var(--db-elevation-md);
   display: none;
-  z-index: 1;
+  z-index: 1337;
   white-space: nowrap;
 }
 .db-popover > article[data-width=fixed] {

package/build/components/select/select.css

@@ -439,11 +439,11 @@ select:is(input, textarea):not(:placeholder-shown),
   --db-form-component-padding-inline-end: calc(
   	calc(var(--db-base-font-size) * var(--db-base-line-height)) + var(--db-spacing-fixed-sm)
   );
+  min-inline-size: calc(4 * var(--db-sizing-md) + var(--db-form-has-before) * var(--db-sizing-md));
   --db-form-has-before: 0;
   position: relative;
   display: flex;
   flex-direction: column;
-  min-inline-size: calc(4 * var(--db-sizing-md) + var(--db-form-has-before) * var(--db-sizing-md));
 }
 .db-select[data-variant=floating] label {
   opacity: 0.69;

package/build/components/select/select.scss

@@ -26,13 +26,13 @@ $has-before-padding: calc(
 	// shared from form-components
 	@extend %select-icon;
 
-	@include form-components.set-default-form-component(select);
-
 	min-inline-size: calc(
 		4 * #{variables.$db-sizing-md} + var(--db-form-has-before) *
 			#{variables.$db-sizing-md}
 	);
 
+	@include form-components.set-default-form-component(select);
+
 	select {
 		text-indent: $has-before-padding;
 	}

package/build/components/switch/switch.css

@@ -863,15 +863,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-bg-inverted-contrast-low-pressed);
   border-color: var(--db-adaptive-on-bg-basic-emphasis-70-pressed);
 }
+.db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true])::before {
+  block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) - 0.125rem * 2);
+}
 .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
 .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true])::before {
-  block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) - 0.125rem * 2);
-}
 .db-switch[data-emphasis=strong] > input:not(:checked) {
   --thumb-offset-x: 0;
 }

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

@@ -70,33 +70,33 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
   cursor: pointer;
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
   background-color: var(--db-adaptive-bg-basic-transparent-hovered);
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
   cursor: initial;
 }
-.db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
-}
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+}
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
   background-color: var(--db-adaptive-bg-basic-transparent-hovered);
 }
 .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
   cursor: initial;
 }
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
 .db-tab-item label:has(input:checked) {
   font-weight: 700;
 }

package/build/components/tooltip/tooltip.css

@@ -272,7 +272,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   box-shadow: var(--db-elevation-md);
   display: none;
-  z-index: 1;
+  z-index: 1337;
   white-space: nowrap;
 }
 [data-width=fixed].db-tooltip {