@db-ux/core-components 4.14.0-shell-52d18db → 5.0.0

package/build/styles/index.scss

@@ -7,9 +7,6 @@
 @forward "../components/brand/brand";
 @forward "../components/header/header";
 @forward "../components/page/page";
-@forward "../components/control-panel-brand/control-panel-brand";
-@forward "../components/control-panel-desktop/control-panel-desktop";
-@forward "../components/shell/shell";
 @forward "../components/link/link";
 @forward "../components/section/section";
 @forward "../components/infotext/infotext";
@@ -19,17 +16,16 @@
 @forward "../components/tag/tag";
 @forward "../components/drawer/drawer";
 @forward "../components/select/select";
-@forward "../components/navigation/navigation";
 @forward "../components/navigation-item/navigation-item";
 @forward "../components/textarea/textarea";
 @forward "../components/badge/badge";
 @forward "../components/accordion/accordion";
 @forward "../components/accordion-item/accordion-item";
-@forward "../components/control-panel-navigation/control-panel-navigation";
-@forward "../components/control-panel-navigation-item/control-panel-navigation-item";
-@forward "../components/control-panel-navigation-item-group/control-panel-navigation-item-group";
+@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/tab-panel/tab-panel";
@@ -50,13 +46,3 @@
 @forward "../components/table-header-cell/table-header-cell";
 @forward "../components/table-data-cell/table-data-cell";
 @forward "../components/custom-button/custom-button";
-@forward "../components/control-panel-mobile/control-panel-mobile";
-@forward "../components/control-panel-meta/control-panel-meta";
-@forward "../components/control-panel-primary-actions/control-panel-primary-actions";
-@forward "../components/control-panel-secondary-actions/control-panel-secondary-actions";
-@forward "../components/shell-sub-navigation/shell-sub-navigation";
-@forward "../components/control-panel-flat-icon/control-panel-flat-icon";
-@forward "../components/shell-content/shell-content";
-@forward "../components/drawer-header/drawer-header";
-@forward "../components/drawer-footer/drawer-footer";
-@forward "../components/control-panel-skip-navigation/control-panel-skip-navigation";

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/_custom-elements.scss

@@ -1,37 +1,13 @@
 $custom-elements: //hygen-insert
 
-	db-control-panel-skip-navigation, db-shell-sub-navigation,
-	db-control-panel-flat-icon, db-drawer-footer, db-drawer-header,
-	db-shell-content, db-control-panel-navigation-item-group,
-	db-control-panel-secondary-actions, db-control-panel-primary-actions,
-	db-control-panel-meta, db-control-panel-mobile, db-table-data-cell,
-	db-table-header-cell, db-table-row, db-table-footer, db-table-body,
-	db-table-head, db-table-caption, db-table, db-custom-button,
+	db-table-data-cell, db-table-header-cell, db-table-row, db-table-footer,
+	db-table-body, db-table-head, db-table-caption, db-table, db-custom-button,
 	db-custom-select-list-item, db-custom-select-list,
 	db-custom-select-dropdown, db-custom-select-form-field, db-custom-select,
 	db-stack, db-switch, db-tab-panel, db-tabs, db-tab-list, db-tab-item,
-	db-tab-bar, db-tooltip, db-popover, db-textarea,
-	db-control-panel-navigation, db-accordion-item, db-accordion, db-badge,
-	db-control-panel-navigation-item, db-tag, db-radio, db-select,
-	db-notification, db-control-panel-brand, db-button, db-card, db-checkbox,
-	db-divider, db-drawer, db-control-panel-desktop, db-icon, db-infotext,
-	db-input, db-link, db-shell, db-section, db-tab, db-page, db-header,
-	db-brand, db-navigation, db-navigation-item;
-
-/* Sub components for shell */
-
-@function get-sub-component($selector) {
-	@return "> * > #{$selector} > .#{$selector}, > #{$selector} > .#{$selector}, > .#{$selector}";
-}
-
-$control-panel-desktop: get-sub-component(db-control-panel-desktop);
-$control-panel-flat-icon: get-sub-component(db-control-panel-flat-icon);
-$control-panel-mobile: get-sub-component(db-control-panel-mobile);
-$control-panel-navigation: get-sub-component(db-control-panel-navigation);
-$control-panel-navigation-item: get-sub-component(
-	db-control-panel-navigation-item
-);
-$control-panel-navigation-item-group: get-sub-component(
-	db-control-panel-navigation-item-group
-);
-$shell-sub-navigation: get-sub-component(db-shell-sub-navigation);
+	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-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)
 			);
 		}
 	}

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

@@ -5,9 +5,7 @@
 @use "./component";
 
 %db-link-height {
-	@include helpers.display(inline-flex);
-
-	align-items: center;
+	@include helpers.display(inline-block);
 
 	&:not([data-wrap="true"]) {
 		@include helpers.display(inline-flex);