@db-ux/core-components 1.0.0-test-13b991d

package/build/components/header/header.scss

@@ -0,0 +1,246 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@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 "@db-ux/core-foundations/build/styles/colors";
+@use "../../styles/internal/component";
+
+.db-header {
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	min-block-size: component.$min-mobile-header-height;
+	border-block-end: variables.$db-border-height-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
+
+	@include screen-sizes.screen("md") {
+		--db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm};
+	}
+
+	&[data-width="small"] {
+		margin-inline: auto;
+		max-inline-size: screen-sizes.$db-breakpoint-sm;
+	}
+
+	&[data-width="medium"] {
+		margin-inline: auto;
+		max-inline-size: screen-sizes.$db-breakpoint-md;
+	}
+
+	&[data-width="large"] {
+		margin-inline: auto;
+		max-inline-size: screen-sizes.$db-breakpoint-lg;
+	}
+
+	.db-link {
+		display: inline-block;
+	}
+
+	&[data-on-forcing-mobile="true"] {
+		/*
+		We make the header invisible for a short time if the user passes in data-force-mobile property.
+		We do it because otherwise we see the default desktop-navigation for some mil. sec.
+		*/
+		visibility: hidden;
+	}
+
+	// All use-cases where we hide the divider
+	&:has(.db-header-navigation:empty),
+	&:has(.db-brand:empty) {
+		.db-header-navigation-container::before {
+			display: none;
+		}
+	}
+}
+
+.db-header-navigation-bar {
+	display: flex;
+	position: relative;
+	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
+	inline-size: 100%;
+	align-items: center;
+
+	@include screen-sizes.screen("md") {
+		padding: variables.$db-spacing-fixed-md variables.$db-spacing-fixed-lg;
+	}
+}
+
+.db-header-meta-navigation {
+	@extend %db-density-functional;
+
+	@include helpers.divider("top");
+
+	display: flex;
+	flex-direction: column;
+	gap: variables.$db-spacing-fixed-sm;
+	justify-content: flex-end;
+	background-color: colors.$db-adaptive-bg-basic-level-2-default;
+	padding: variables.$db-spacing-fixed-md;
+
+	@include screen-sizes.screen("md") {
+		padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-lg;
+		margin: 0;
+		gap: variables.$db-spacing-fixed-md;
+		flex-direction: row;
+
+		&::before {
+			display: none;
+		}
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	&:empty {
+		display: none;
+	}
+}
+
+.db-header-navigation-container {
+	display: inherit;
+	flex: 1 1 auto;
+	inline-size: 100%;
+	align-items: center;
+	block-size: 100%;
+
+	@include screen-sizes.screen("md") {
+		@include helpers.divider("left");
+
+		&::before {
+			position: inherit;
+			block-size: variables.$db-sizing-md;
+			margin-inline-start: variables.$db-spacing-fixed-lg;
+		}
+	}
+}
+
+.db-header-primary-action {
+	margin-inline-start: auto;
+}
+
+.db-header-brand-container:not(:has(> :nth-child(1))) {
+	display: none;
+}
+
+.db-header-action-container:has(> .db-header-secondary-action:empty) {
+	@include screen-sizes.screen("md") {
+		display: none;
+	}
+}
+
+.db-header-brand-container {
+	min-block-size: variables.$db-sizing-md;
+}
+
+.db-header-action-container {
+	@include helpers.divider("left");
+
+	@include screen-sizes.screen("md") {
+		&::before {
+			margin-inline: variables.$db-spacing-fixed-sm;
+		}
+	}
+
+	&::before {
+		margin-inline: variables.$db-spacing-fixed-xs;
+		position: inherit;
+		block-size: variables.$db-sizing-md;
+	}
+}
+
+.db-header-brand-container,
+.db-header-action-container {
+	align-items: center;
+	block-size: 100%;
+	display: inherit;
+	gap: inherit;
+	flex: 0 1 auto;
+	flex-grow: 0;
+	flex-shrink: 0;
+}
+
+.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 screen-sizes.screen("md") {
+		&::before {
+			display: none;
+		}
+	}
+}
+
+.db-header-drawer-navigation {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	block-size: 100%;
+	overflow: auto;
+	justify-content: space-between;
+}
+
+.db-header-navigation {
+	padding-block: variables.$db-spacing-fixed-md;
+
+	@include screen-sizes.screen("md") {
+		margin-inline: variables.$db-spacing-fixed-lg;
+	}
+}
+
+.db-header-navigation,
+.db-header-secondary-action {
+	display: flex;
+	gap: variables.$db-spacing-fixed-sm;
+	padding-inline: variables.$db-spacing-fixed-md;
+
+	@include screen-sizes.screen("md") {
+		gap: variables.$db-spacing-fixed-xs;
+		padding: 0;
+	}
+}
+
+.db-header-drawer {
+	--db-drawer-content-padding-inline: 0;
+	// 1px for box shadow of header
+	--db-drawer-header-padding-block-end: calc(
+		1px + #{variables.$db-spacing-fixed-xs}
+	);
+
+	padding-block-end: 0;
+
+	.db-drawer-content {
+		display: flex;
+		flex-direction: column;
+		block-size: 100%;
+		overflow: hidden;
+	}
+}
+
+/* Only for Desktop */
+.db-header-meta-navigation,
+.db-header-navigation-container > .db-header-navigation,
+.db-header-action-container > .db-header-secondary-action {
+	display: none;
+
+	@include screen-sizes.screen("md") {
+		display: inherit;
+	}
+}
+
+/* Only for Mobile */
+.db-header-drawer-navigation > .db-header-meta-navigation:not(:empty) {
+	display: inherit;
+}
+
+.db-header-drawer,
+.db-header-burger-menu-container {
+	@include screen-sizes.screen("md") {
+		display: none;
+	}
+}

package/build/components/icon/icon.css

@@ -0,0 +1,24 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-icon {
+  font-size: 0 !important;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* Safari hack */
+}
+.db-icon::before {
+  --db-icon-margin-end: 0;
+}
+@supports (-webkit-hyphens: none) {
+  .db-icon {
+    display: inline-block;
+  }
+  .db-icon::before {
+    block-size: auto;
+  }
+}

package/build/components/icon/icon.scss

@@ -0,0 +1,14 @@
+@use "@db-ux/core-foundations/build/styles/icons";
+
+.db-icon {
+	@include icons.is-icon-text-replace();
+
+	/* Safari hack */
+	@supports (-webkit-hyphens: none) {
+		display: inline-block;
+
+		&::before {
+			block-size: auto;
+		}
+	}
+}

package/build/components/infotext/infotext.css

@@ -0,0 +1,152 @@
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-infotext {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
+  --db-base-line-height: var(--db-type-body-line-height-sm);
+  --db-base-font-size: var(--db-type-body-font-size-sm);
+  line-height: var(--db-type-body-line-height-sm);
+  font-size: var(--db-type-body-font-size-sm);
+}
+
+.db-infotext[data-size=small] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
+  --db-base-line-height: var(--db-type-body-line-height-xs);
+  --db-base-font-size: var(--db-type-body-font-size-xs);
+  line-height: var(--db-type-body-line-height-xs);
+  font-size: var(--db-type-body-font-size-xs);
+}
+
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
+  content: var(--db-icon, attr(data-icon));
+  content: var(--db-icon, attr(data-icon))/"";
+  -webkit-alt: "";
+  alt: "";
+  color: var(--db-icon-color, inherit);
+  display: inline-block;
+  /*** icon - placeholder ***/
+  font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
+  font-size: var(--db-icon-font-size, 1.5rem);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: var(--db-icon-font-weight, normal);
+  line-height: 1;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  speak: none;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  speak: never;
+  text-transform: none;
+  vertical-align: middle;
+  block-size: var(--db-icon-font-size, 1.5rem);
+  inline-size: var(--db-icon-font-size, 1.5rem);
+}
+@media aural {
+  .db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
+    content: none;
+  }
+}
+@media speech {
+  .db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
+    content: none;
+  }
+}
+
+.db-infotext {
+  --db-icon-margin-end: var(--db-spacing-fixed-2xs);
+  display: flex;
+}
+.db-infotext:not([data-icon]) {
+  --db-icon-font-family: var(--db-icon-filled-font-family, "db-ux-filled");
+}
+.db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
+  --db-icon: "information_circle";
+  margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
+}
+.db-infotext[data-semantic=adaptive], .db-infotext:not([data-semantic]) {
+  color: var(--db-adaptive-bg-inverted-contrast-high-default);
+}
+.db-infotext[data-semantic=adaptive]::before, .db-infotext:not([data-semantic])::before {
+  --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-infotext[data-semantic=neutral] {
+  color: var(--db-neutral-bg-inverted-contrast-high-default);
+}
+.db-infotext[data-semantic=neutral]:not([data-icon])::before {
+  --db-icon: "information_circle";
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-infotext[data-semantic=neutral]::before {
+  --db-icon-color: var(
+  	--db-neutral-on-bg-basic-emphasis-70-default
+  );
+}
+.db-infotext[data-semantic=critical] {
+  color: var(--db-critical-bg-inverted-contrast-high-default);
+}
+.db-infotext[data-semantic=critical]:not([data-icon])::before {
+  --db-icon: "exclamation_mark_circle";
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-infotext[data-semantic=critical]::before {
+  --db-icon-color: var(
+  	--db-critical-on-bg-basic-emphasis-70-default
+  );
+}
+.db-infotext[data-semantic=successful] {
+  color: var(--db-successful-bg-inverted-contrast-high-default);
+}
+.db-infotext[data-semantic=successful]:not([data-icon])::before {
+  --db-icon: "check_circle";
+}
+.db-infotext[data-semantic=successful]::before {
+  --db-icon-color: var(
+  	--db-successful-on-bg-basic-emphasis-70-default
+  );
+}
+.db-infotext[data-semantic=warning] {
+  color: var(--db-warning-bg-inverted-contrast-high-default);
+}
+.db-infotext[data-semantic=warning]:not([data-icon])::before {
+  --db-icon: "exclamation_mark_triangle";
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-infotext[data-semantic=warning]::before {
+  --db-icon-color: var(
+  	--db-warning-on-bg-basic-emphasis-70-default
+  );
+}
+.db-infotext[data-semantic=informational] {
+  color: var(--db-informational-bg-inverted-contrast-high-default);
+}
+.db-infotext[data-semantic=informational]:not([data-icon])::before {
+  --db-icon: "information_circle";
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-infotext[data-semantic=informational]::before {
+  --db-icon-color: var(
+  	--db-informational-on-bg-basic-emphasis-70-default
+  );
+}
+.db-infotext:has(> .db-infotext) {
+  margin: 0;
+}
+.db-infotext:has(> .db-infotext)::before {
+  content: none;
+}

package/build/components/infotext/infotext.scss

@@ -0,0 +1,54 @@
+@use "sass:map";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/icons";
+
+.db-infotext {
+	--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
+
+	@extend %db-overwrite-font-size-sm;
+
+	display: flex;
+
+	@include icons.has-no-icon() {
+		@include icons.to-filled-icon();
+		@include icons.set-icon("information_circle");
+	}
+
+	&[data-size="small"] {
+		@extend %db-overwrite-font-size-xs;
+	}
+
+	&[data-semantic="adaptive"],
+	&:not([data-semantic]) {
+		color: colors.$db-adaptive-bg-inverted-contrast-high-default;
+
+		&::before {
+			--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
+		}
+	}
+
+	@each $name, $colors in colors.$variant-colors {
+		&[data-semantic="#{$name}"] {
+			@include icons.variant-icons($name);
+
+			color: var(--db-#{$name}-bg-inverted-contrast-high-default);
+
+			&::before {
+				--db-icon-color: var(
+					--db-#{$name}-on-bg-basic-emphasis-70-default
+				);
+			}
+		}
+	}
+
+	// Workaround for current stencil implementation for form-components
+	&:has(> .db-infotext) {
+		margin: 0;
+
+		&::before {
+			content: none;
+		}
+	}
+}