@db-ux/core-components 4.14.0 → 5.0.0

package/build/styles/index.scss

@@ -24,10 +24,12 @@
 @forward "../components/navigation/navigation";
 @forward "../components/popover/popover";
 @forward "../components/tooltip/tooltip";
+@forward "../components/drawer-header/drawer-header";
+@forward "../components/drawer-footer/drawer-footer";
 @forward "../components/tab-item/tab-item";
 @forward "../components/tab-list/tab-list";
-@forward "../components/tabs/tabs";
 @forward "../components/tab-panel/tab-panel";
+@forward "../components/tabs/tabs";
 @forward "../components/switch/switch";
 @forward "../components/stack/stack";
 @forward "../components/custom-select/custom-select";

package/build/styles/internal/_button-components.scss

@@ -76,6 +76,12 @@
 		}
 	}
 
+	&:not([data-no-text="true"]) {
+		#{$selector} {
+			gap: variables.$db-spacing-fixed-xs;
+		}
+	}
+
 	&[data-wrap="false"] {
 		#{$selector} {
 			white-space: nowrap;
@@ -92,10 +98,7 @@
 			&:not([data-no-text="true"]) {
 				// stylelint-disable-next-line db-ux/use-spacings
 				padding: 1px variables.$db-spacing-fixed-sm;
-
-				&::before {
-					margin-inline-end: variables.$db-spacing-fixed-2xs;
-				}
+				gap: variables.$db-spacing-fixed-2xs;
 			}
 
 			// Square icon only buttons

package/build/styles/internal/_component.scss

@@ -6,6 +6,10 @@
 $min-mobile-header-height: calc(
 	#{variables.$db-sizing-md} + 2 * #{variables.$db-spacing-fixed-xs}
 );
+$drawer-content-padding-inline: max(
+	#{variables.$db-spacing-fixed-sm},
+	max(env(safe-area-inset-left), env(safe-area-inset-right))
+);
 $component-border: variables.$db-border-width-3xs solid
 	colors.$db-adaptive-on-bg-basic-emphasis-60-default;
 

package/build/styles/internal/_custom-elements.scss

@@ -8,5 +8,6 @@ $custom-elements: //hygen-insert
 	db-tab-bar, db-tooltip, db-popover, db-textarea, db-navigation,
 	db-accordion-item, db-accordion, db-badge, db-navigation-item, db-tag,
 	db-radio, db-select, db-notification, db-brand, db-button, db-card,
-	db-checkbox, db-divider, db-drawer, db-header, db-icon, db-infotext,
-	db-input, db-link, db-page, db-section, db-tab;
+	db-checkbox, db-divider, db-drawer, db-drawer-footer, db-drawer-header,
+	db-header, db-icon, db-infotext, db-input, db-link, db-page, db-section,
+	db-tab;

package/build/styles/internal/_icon-passing.scss

@@ -1,11 +1,10 @@
 @use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/icons";
 
 $interactive-button-selectors: "label,button,a";
 
 @mixin icon-passing(
 	$inline-start: variables.$db-spacing-fixed-sm,
-	$block-start: calc(50% - 0.5em)
+	$gap: variables.$db-spacing-fixed-xs
 ) {
 	&[data-icon-leading]:not([data-show-icon-leading="false"]),
 	&[data-icon]:not([data-show-icon="false"]) {
@@ -13,7 +12,7 @@ $interactive-button-selectors: "label,button,a";
 			position: absolute;
 			inset-block-start: var(
 				--db-icon-passing-inset-block-start,
-				#{$block-start}
+				calc(50% - 0.5em)
 			);
 			inset-inline-start: var(
 				--db-icon-passing-inset-inline-start,
@@ -28,10 +27,7 @@ $interactive-button-selectors: "label,button,a";
 			/* stylelint-disable-next-line db-ux/use-spacings */
 			padding-inline-start: var(
 				--db-icon-passing-padding-inline-start,
-				calc(
-					#{$inline-start} + #{icons.$default-icon-margin-end} +
-						var(--db-icon-font-size)
-				)
+				calc(#{$inline-start} + #{$gap} + var(--db-icon-font-size, 1lh))
 			);
 		}
 	}
@@ -41,7 +37,10 @@ $interactive-button-selectors: "label,button,a";
 	&[data-icon-trailing]:not([data-show-icon-trailing="false"]) {
 		&::after {
 			position: absolute;
-			inset-block-start: calc(50% - 0.5em);
+			inset-block-start: var(
+				--db-icon-passing-inset-block-start,
+				calc(50% - 0.5em)
+			);
 			inset-inline-end: $inline-end;
 			pointer-events: none;
 			z-index: 1;
@@ -50,8 +49,8 @@ $interactive-button-selectors: "label,button,a";
 		> :is(#{$interactive-button-selectors}),
 		> * > :is(#{$interactive-button-selectors}) {
 			padding-inline-end: calc(
-				#{$inline-end} + #{icons.$default-icon-margin-end} +
-					var(--db-icon-font-size)
+				#{$inline-end} + #{variables.$db-spacing-fixed-xs} +
+					var(--db-icon-font-size, 1lh)
 			);
 		}
 	}