@db-ux/core-components 4.12.0 → 4.13.0-shell-f221975

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

@@ -0,0 +1,30 @@
+@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

@@ -0,0 +1,258 @@
+.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

@@ -0,0 +1,239 @@
+@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

@@ -0,0 +1,14 @@
+/* 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

@@ -0,0 +1,15 @@
+@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;
+	}
+}