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

package/build/components/control-panel-desktop/control-panel-desktop.scss

@@ -1,30 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "@db-ux/core-foundations/build/styles/density";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "../../styles/internal/component";
-@use "../../styles/internal/control-panel-desktop";
-
-.db-control-panel-desktop {
-	background-color: colors.$db-adaptive-bg-basic-level-1-default;
-	display: grid;
-	position: relative;
-	min-block-size: component.$min-mobile-header-height;
-	grid-area: control-panel;
-
-	&[data-orientation="vertical"] {
-		@extend %control-panel-desktop-vertical-orientation;
-	}
-
-	&[data-orientation="horizontal"] {
-		@extend %control-panel-desktop-horizontal-orientation;
-	}
-
-	.db-link {
-		display: inline-block;
-	}
-
-	.db-control-panel-navigation {
-		grid-area: navigation;
-	}
-}

package/build/components/control-panel-flat-icon/control-panel-flat-icon.css

@@ -1,258 +0,0 @@
-.db-visually-hidden,
-[data-visually-hidden=true] {
-  position: absolute !important;
-  inset-block-start: 0 !important;
-  inline-size: 1px !important;
-  block-size: 1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-  padding: 0 !important;
-  pointer-events: none !important;
-}
-
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* Variants for adaptive components like input, select, notification, ... */
-.db-control-panel-flat-icon .db-control-panel-navigation-item a {
-  font: var(--db-type-body-3xs);
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
-}
-
-/* Sub components for shell */
-.db-control-panel-flat-icon .db-control-panel-navigation-item a::after {
-  content: "";
-  position: absolute;
-  border-radius: var(--db-border-radius-xs);
-  background: linear-gradient(135deg, var(--db-pride-red, var(--db-brand-on-bg-basic-emphasis-70-default)) 16.7%, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 33.4%, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 50.1%, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 66.8%, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 83.5%, var(--db-pride-violet, var(--db-brand-on-bg-basic-emphasis-70-default)) 0);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-control-panel-flat-icon .db-control-panel-navigation-item a::after {
-    transition: block-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), inline-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
-  }
-}
-
-.db-control-panel-flat-icon {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (48em < width) {
-  .db-control-panel-flat-icon {
-    inline-size: fit-content;
-    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-    position: var(--db-tooltip-parent-position, relative);
-  }
-  [data-emphasis=strong].db-control-panel-flat-icon {
-    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
-  }
-  .db-control-panel-flat-icon::after {
-    content: "";
-    background-color: var(--db-divider-bg-color);
-    position: absolute;
-    /* jscpd:ignore-start */
-    inline-size: var(--db-border-width-3xs);
-    inset-inline-end: 0;
-    inset-block: 0;
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    /* jscpd:ignore-end */
-  }
-  .db-control-panel-flat-icon .db-tooltip {
-    --db-show-popover-visibility: visible;
-  }
-  .db-control-panel-flat-icon .db-control-panel-navigation {
-    inline-size: fit-content;
-    padding: var(--db-spacing-fixed-sm) calc(var(--db-spacing-fixed-sm) + env(safe-area-inset-left));
-  }
-  .db-control-panel-flat-icon .db-control-panel-navigation > menu {
-    flex-direction: column;
-  }
-  .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item a {
-    inline-size: 100%;
-    block-size: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: inline;
-    text-align: center;
-  }
-  .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item a::after {
-    block-size: 0;
-    inline-size: var(--db-border-width-xs);
-    transform: translate(0, -50%);
-    inset-block: var(--indicator-vertical-inset-block-start, 50%) auto;
-    inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
-  }
-  .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item:has([aria-current=page]) a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item:has([data-active=true]) a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item[aria-current=page] a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item[data-active=true] a::after {
-    block-size: var(--indicator-vertical-block-size, 100%);
-    inline-size: var(--db-border-width-xs);
-  }
-  [data-no-text=true].db-control-panel-flat-icon .db-control-panel-navigation .db-control-panel-navigation-item {
-    aspect-ratio: 1;
-    inline-size: var(--db-sizing-md);
-  }
-  [data-no-text=true].db-control-panel-flat-icon .db-control-panel-navigation .db-control-panel-navigation-item::before {
-    --db-icon-passing-inset-inline-start: calc(50% - 0.5em);
-  }
-  [data-no-text=true].db-control-panel-flat-icon .db-control-panel-navigation .db-control-panel-navigation-item a {
-    padding: 0;
-    overflow: hidden;
-    text-indent: 100%;
-    white-space: nowrap;
-  }
-  .db-control-panel-flat-icon:not([data-no-text=true]) .db-control-panel-navigation-item {
-    --db-icon-passing-padding-inline-start: var(--db-spacing-fixed-3xs);
-    block-size: 2lh;
-    inline-size: var(--db-sizing-lg);
-  }
-  .db-control-panel-flat-icon:not([data-no-text=true]) .db-control-panel-navigation-item::before {
-    --db-icon-passing-inset-block-start: calc(
-    	2 * var(--db-icon-passing-padding-inline-start)
-    );
-  }
-  .db-control-panel-flat-icon:not([data-no-text=true]) .db-control-panel-navigation-item a {
-    padding-inline-end: var(--db-icon-passing-padding-inline-start);
-    padding-block: calc(50% - 2 * var(--db-icon-passing-padding-inline-start)) 0;
-  }
-}
-@media (48em < width) and (forced-colors: active) {
-  .db-control-panel-flat-icon::after {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
-  }
-}
-@media (48em < width) and (forced-colors: active), print and (48em < width) {
-  .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item:has([aria-current=page]) a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item:has([data-active=true]) a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item[aria-current=page] a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item[data-active=true] a::after {
-    border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  }
-}
-.db-control-panel-flat-icon {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-
-.db-control-panel-flat-icon {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (width <= 48em) {
-  .db-control-panel-flat-icon {
-    --db-control-panel-flat-icon-mobile: 1;
-    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-    position: var(--db-tooltip-parent-position, relative);
-  }
-  [data-emphasis=strong].db-control-panel-flat-icon {
-    --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
-  }
-  .db-control-panel-flat-icon::before {
-    content: "";
-    background-color: var(--db-divider-bg-color);
-    position: absolute;
-    /* jscpd:ignore-start */
-    block-size: var(--db-border-width-3xs);
-    inset-block-start: 0;
-    inset-inline: 0;
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    /* stylelint-disable-next-line at-rule-empty-line-before */
-    /* jscpd:ignore-end */
-  }
-  .db-control-panel-flat-icon .db-control-panel-navigation {
-    padding-block: var(--db-spacing-fixed-xs) calc(var(--db-spacing-fixed-xs) + env(safe-area-inset-bottom));
-  }
-  .db-control-panel-flat-icon .db-control-panel-navigation > menu {
-    flex-direction: row;
-    justify-content: space-evenly;
-    inline-size: 100%;
-    max-inline-size: var(--db-container-md);
-  }
-  .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item a {
-    position: relative;
-  }
-  .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item a::after {
-    block-size: var(--db-border-width-xs);
-    inline-size: 0;
-    transform: translate(-50%, 0);
-    inset-inline-start: 50%;
-    inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
-  }
-  .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item:has([aria-current=page]) a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item:has([data-active=true]) a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item[aria-current=page] a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item[data-active=true] a::after {
-    block-size: var(--db-border-width-xs);
-    inline-size: 100%;
-  }
-  [data-no-text=true].db-control-panel-flat-icon .db-control-panel-navigation .db-control-panel-navigation-item {
-    --db-icon-passing-padding-inline-start: 0;
-  }
-  [data-no-text=true].db-control-panel-flat-icon .db-control-panel-navigation .db-control-panel-navigation-item::before {
-    --db-icon-passing-inset-inline-start: calc(50% - 0.5em);
-  }
-  [data-no-text=true].db-control-panel-flat-icon .db-control-panel-navigation .db-control-panel-navigation-item a {
-    overflow: hidden;
-    text-indent: 100%;
-    white-space: nowrap;
-    padding: 0;
-    inline-size: var(--db-sizing-md);
-  }
-  [data-no-text=true].db-control-panel-flat-icon .db-control-panel-navigation .db-control-panel-navigation-item .db-tooltip {
-    --db-show-popover-visibility: visible;
-  }
-  .db-control-panel-flat-icon:not([data-no-text=true]) .db-control-panel-navigation-item {
-    --db-icon-passing-padding-inline-start: var(--db-spacing-fixed-3xs);
-    --nav-icon-size: var(--db-icon-font-size);
-  }
-  .db-control-panel-flat-icon:not([data-no-text=true]) .db-control-panel-navigation-item::before {
-    --db-icon-passing-inset-block-start: 0;
-  }
-  .db-control-panel-flat-icon:not([data-no-text=true]) .db-control-panel-navigation-item a {
-    padding-inline-end: var(--db-spacing-fixed-3xs);
-    padding-block: var(--nav-icon-size) 0;
-    inline-size: var(--db-sizing-lg);
-    justify-content: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: inline;
-    text-align: center;
-  }
-}
-@media (width <= 48em) and (forced-colors: active) {
-  .db-control-panel-flat-icon::before {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
-  }
-}
-@media (width <= 48em) and (forced-colors: active), print and (width <= 48em) {
-  .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item:has([aria-current=page]) a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item:has([data-active=true]) a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item[aria-current=page] a::after, .db-control-panel-flat-icon .db-control-panel-navigation > menu .db-control-panel-navigation-item[data-active=true] a::after {
-    border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  }
-}
-.db-control-panel-flat-icon {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-
-.db-control-panel-flat-icon {
-  grid-area: control-panel;
-  /* Hide navigation-item-group and navigation-items without icon */
-}
-.db-control-panel-flat-icon .db-control-panel-navigation-item-group,
-.db-control-panel-flat-icon .db-control-panel-navigation-item:not([data-icon]) {
-  display: none;
-}
-.db-control-panel-flat-icon .db-control-panel-navigation {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.db-control-panel-flat-icon .db-control-panel-navigation > menu {
-  display: flex;
-  gap: var(--db-spacing-fixed-sm);
-}
-.db-control-panel-flat-icon .db-control-panel-navigation-item {
-  justify-content: center;
-  align-items: center;
-}
-.db-control-panel-flat-icon .db-control-panel-navigation-item a {
-  min-block-size: var(--db-sizing-md);
-  min-inline-size: var(--db-sizing-md);
-}
-.db-control-panel-flat-icon:not([data-no-text=true]) .db-control-panel-navigation-item::before {
-  --db-icon-passing-inset-inline-start: calc(50% - 0.5em);
-}

package/build/components/control-panel-flat-icon/control-panel-flat-icon.scss

@@ -1,239 +0,0 @@
-@use "sass:string";
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/fonts";
-@use "@db-ux/core-foundations/build/styles/screen-sizes";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "@db-ux/core-foundations/build/styles/density";
-@use "../../styles/internal/form-components";
-@use "../../styles/internal/navigation-item";
-@use "../../styles/internal/indicator";
-
-%control-panel-flat-icon-desktop {
-	@include screen-sizes.screen-min-max(
-		(
-			min: "sm"
-		)
-	) {
-		inline-size: fit-content;
-
-		@include helpers.divider("right", after);
-
-		.db-tooltip {
-			// We show tooltip for desktop always
-			--db-show-popover-visibility: visible;
-		}
-
-		.db-control-panel-navigation {
-			inline-size: fit-content;
-			padding: variables.$db-spacing-fixed-sm
-				calc(
-					#{variables.$db-spacing-fixed-sm} +
-						env(safe-area-inset-left)
-				);
-
-			> menu {
-				flex-direction: column;
-
-				.db-control-panel-navigation-item {
-					a {
-						inline-size: 100%;
-						block-size: 100%;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						display: inline;
-						text-align: center;
-
-						@include indicator.set-indicator-vertical;
-					}
-
-					@include navigation-item.active-navigation-item {
-						a {
-							@include indicator.show-indicator-vertical;
-						}
-					}
-				}
-			}
-		}
-
-		&[data-no-text="true"] {
-			.db-control-panel-navigation {
-				.db-control-panel-navigation-item {
-					aspect-ratio: 1;
-					inline-size: variables.$db-sizing-md;
-
-					&::before {
-						--db-icon-passing-inset-inline-start: calc(50% - 0.5em);
-					}
-
-					a {
-						padding: 0;
-
-						@include helpers.a11y-visually-hidden-text;
-					}
-				}
-			}
-		}
-
-		&:not([data-no-text="true"]) {
-			.db-control-panel-navigation-item {
-				--db-icon-passing-padding-inline-start: #{variables.$db-spacing-fixed-3xs};
-
-				block-size: 2lh;
-				inline-size: variables.$db-sizing-lg;
-
-				&::before {
-					--db-icon-passing-inset-block-start: calc(
-						2 * var(--db-icon-passing-padding-inline-start)
-					);
-				}
-
-				a {
-					// stylelint-disable-next-line db-ux/use-spacings
-					padding-inline-end: var(
-						--db-icon-passing-padding-inline-start
-					);
-					padding-block: calc(
-							50% - 2 *
-								var(--db-icon-passing-padding-inline-start)
-						)
-						0;
-				}
-			}
-		}
-	}
-}
-
-%control-panel-flat-icon-mobile {
-	@include screen-sizes.screen-min-max(
-		(
-			max: "sm"
-		)
-	) {
-		--db-control-panel-flat-icon-mobile: 1;
-
-		@include helpers.divider("top");
-
-		.db-control-panel-navigation {
-			padding-block: variables.$db-spacing-fixed-xs
-				calc(
-					#{variables.$db-spacing-fixed-xs} +
-						env(safe-area-inset-bottom)
-				);
-
-			> menu {
-				flex-direction: row;
-				justify-content: space-evenly;
-				inline-size: 100%;
-				max-inline-size: variables.$db-container-md;
-
-				.db-control-panel-navigation-item {
-					a {
-						position: relative;
-
-						@include indicator.set-indicator-horizontal;
-					}
-
-					@include navigation-item.active-navigation-item {
-						a {
-							@include indicator.show-indicator-horizontal;
-						}
-					}
-				}
-			}
-		}
-
-		&[data-no-text="true"] {
-			.db-control-panel-navigation {
-				.db-control-panel-navigation-item {
-					--db-icon-passing-padding-inline-start: 0;
-
-					&::before {
-						--db-icon-passing-inset-inline-start: calc(50% - 0.5em);
-					}
-
-					a {
-						@include helpers.a11y-visually-hidden-text;
-
-						padding: 0;
-						inline-size: variables.$db-sizing-md;
-					}
-
-					.db-tooltip {
-						// We show tooltip for collapsed state
-						--db-show-popover-visibility: visible;
-					}
-				}
-			}
-		}
-
-		&:not([data-no-text="true"]) {
-			.db-control-panel-navigation-item {
-				--db-icon-passing-padding-inline-start: #{variables.$db-spacing-fixed-3xs};
-				--nav-icon-size: #{form-components.$font-size-height};
-
-				&::before {
-					--db-icon-passing-inset-block-start: 0;
-				}
-
-				a {
-					padding-inline-end: variables.$db-spacing-fixed-3xs;
-					// stylelint-disable-next-line db-ux/use-spacings
-					padding-block: var(--nav-icon-size) 0;
-					inline-size: variables.$db-sizing-lg;
-					justify-content: center;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-					display: inline;
-					text-align: center;
-				}
-			}
-		}
-	}
-}
-
-.db-control-panel-flat-icon {
-	@extend %control-panel-flat-icon-mobile;
-	@extend %control-panel-flat-icon-desktop;
-
-	grid-area: control-panel;
-
-	/* Hide navigation-item-group and navigation-items without icon */
-	.db-control-panel-navigation-item-group,
-	.db-control-panel-navigation-item:not([data-icon]) {
-		display: none;
-	}
-
-	.db-control-panel-navigation {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		> menu {
-			display: flex;
-			gap: variables.$db-spacing-fixed-sm;
-		}
-	}
-
-	.db-control-panel-navigation-item {
-		justify-content: center;
-		align-items: center;
-
-		a {
-			@extend %db-overwrite-font-size-3xs;
-			@extend %indicator;
-
-			min-block-size: variables.$db-sizing-md;
-			min-inline-size: variables.$db-sizing-md;
-		}
-	}
-
-	&:not([data-no-text="true"]) {
-		.db-control-panel-navigation-item {
-			&::before {
-				--db-icon-passing-inset-inline-start: calc(50% - 0.5em);
-			}
-		}
-	}
-}

package/build/components/control-panel-meta/control-panel-meta.css

@@ -1,14 +0,0 @@
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* Variants for adaptive components like input, select, notification, ... */
-.db-control-panel-meta {
-  display: flex;
-  flex-flow: row wrap;
-  background-color: var(--db-adaptive-bg-basic-level-2-default);
-  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-lg);
-  gap: var(--db-spacing-fixed-md);
-  grid-area: meta;
-}
-.db-control-panel-meta:empty {
-  display: none;
-}

package/build/components/control-panel-meta/control-panel-meta.scss

@@ -1,15 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/colors";
-
-.db-control-panel-meta {
-	display: flex;
-	flex-flow: row wrap;
-	background-color: colors.$db-adaptive-bg-basic-level-2-default;
-	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-lg;
-	gap: variables.$db-spacing-fixed-md;
-	grid-area: meta;
-
-	&:empty {
-		display: none;
-	}
-}