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

package/build/components/switch/switch.scss

@@ -0,0 +1,233 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "../../styles/internal/form-components";
+
+// We need some fixed padding here to avoid layout shifts
+/* stylelint-disable-next-line db-ux/use-spacings */
+$switch-fixed-padding: helpers.px-to-rem(2);
+
+$switch-inactive-thumb-size: calc(
+	#{form-components.$font-size-height} - #{$switch-fixed-padding} * 2
+);
+
+$switch-active-thumb-size: calc(#{form-components.$font-size-height});
+
+$checked-active-transition-size: calc(
+	#{form-components.$font-size-height} - #{$switch-fixed-padding} * 2
+);
+
+%active-transition {
+	&::before {
+		inline-size: calc(
+			#{$switch-active-thumb-size} - #{$switch-fixed-padding} * 2 +
+				#{variables.$db-spacing-fixed-2xs}
+		);
+		margin: 0;
+	}
+
+	&:checked {
+		&::before {
+			block-size: $checked-active-transition-size;
+		}
+	}
+}
+
+.db-switch {
+	@include form-components.set-default-check-element(check);
+
+	user-select: none;
+
+	// This is needed when clicking on the label instead of the input
+	@include helpers.active {
+		> input {
+			@extend %active-transition;
+		}
+	}
+
+	> input {
+		--db-icon-margin-start: 0;
+		--thumb-offset-x: #{$switch-fixed-padding};
+
+		@extend %db-overwrite-font-size-sm;
+
+		@include icons.set-icon("cross", "after");
+
+		appearance: none;
+		inline-size: calc(
+			#{form-components.$font-size-height} * 2 + #{$switch-fixed-padding}
+		);
+		block-size: form-components.$font-size-height;
+		box-sizing: content-box;
+		display: flex;
+		align-items: center;
+		/* stylelint-disable-next-line db-ux/use-spacings */
+		gap: $switch-fixed-padding;
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+		border-radius: variables.$db-border-radius-full;
+
+		&::after {
+			visibility: hidden;
+			align-self: center;
+			aspect-ratio: 1;
+		}
+
+		// thumb
+		&::before {
+			content: "O";
+			text-align: center;
+			align-content: center;
+			aspect-ratio: 1;
+			block-size: $switch-inactive-thumb-size;
+			background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
+			color: colors.$db-adaptive-bg-inverted-contrast-max-default;
+			border-radius: variables.$db-border-radius-full;
+			transform: translateX(var(--thumb-offset-x));
+			margin-inline-end: calc(
+				#{$switch-active-thumb-size} - #{$switch-inactive-thumb-size}
+			);
+
+			@media screen and (prefers-reduced-motion: no-preference) {
+				transition:
+					margin variables.$db-transition-duration-fast
+						variables.$db-transition-timing-emotional,
+					inline-size variables.$db-transition-duration-fast
+						variables.$db-transition-timing-emotional,
+					block-size variables.$db-transition-duration-fast
+						variables.$db-transition-timing-emotional,
+					transform variables.$db-transition-duration-fast
+						variables.$db-transition-timing-emotional;
+			}
+		}
+
+		/* positioned at the end of the track: track length - 100% (thumb width) */
+		&:checked {
+			--thumb-offset-x: calc(100% + #{$switch-fixed-padding});
+
+			@include colors.set-current-colors(
+				colors.$db-adaptive-bg-inverted-contrast-max-default,
+				colors.$db-adaptive-on-bg-inverted-default,
+				colors.$db-adaptive-bg-inverted-contrast-max-hovered,
+				colors.$db-adaptive-bg-inverted-contrast-max-pressed
+			);
+
+			border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+
+			@include helpers.hover {
+				border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-hovered;
+			}
+
+			@include helpers.active {
+				border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-pressed;
+			}
+
+			&::before {
+				block-size: $switch-active-thumb-size;
+				background-color: colors.$db-adaptive-on-bg-inverted-default;
+				color: colors.$db-adaptive-on-bg-inverted-default;
+				margin: 0;
+			}
+		}
+
+		&:focus-visible {
+			// Overwrite default border-radius
+			border-radius: variables.$db-border-radius-full;
+		}
+
+		&[data-aid-icon]:not(:checked)::after {
+			--db-icon-after: attr(data-aid-icon);
+		}
+
+		&[data-aid-icon-after]:checked::after {
+			--db-icon-after: attr(data-aid-icon-after);
+		}
+
+		@media screen and (prefers-reduced-motion: no-preference) {
+			// Overwrite default transition for switch border
+			transition: none;
+		}
+	}
+
+	&[data-hide-label="true"] {
+		gap: 0;
+	}
+
+	&[data-size="small"] {
+		gap: variables.$db-spacing-fixed-2xs;
+
+		> input {
+			@extend %db-overwrite-font-size-xs;
+		}
+	}
+
+	&[data-emphasis="strong"] {
+		> input {
+			--db-check-element-border-color: #{colors.$db-adaptive-bg-basic-transparent-full-default};
+
+			@extend %db-critical-variables;
+
+			background-color: colors.$db-adaptive-bg-inverted-contrast-low-default;
+			color: colors.$db-adaptive-on-bg-inverted-default;
+			border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-default;
+
+			@include helpers.hover {
+				background-color: colors.$db-adaptive-bg-inverted-contrast-low-hovered;
+				border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-hovered;
+			}
+
+			@include helpers.active {
+				background-color: colors.$db-adaptive-bg-inverted-contrast-low-pressed;
+				border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-pressed;
+
+				&::before {
+					block-size: $checked-active-transition-size;
+				}
+			}
+
+			&:not(:checked) {
+				--thumb-offset-x: 0;
+			}
+
+			&:checked {
+				@extend %db-successful-variables;
+
+				&::before {
+					background-color: colors.$db-adaptive-on-bg-inverted-default;
+					color: colors.$db-adaptive-on-bg-inverted-default;
+				}
+			}
+
+			&::before {
+				background-color: colors.$db-adaptive-on-bg-inverted-default;
+				color: colors.$db-adaptive-on-bg-inverted-default;
+				block-size: $switch-active-thumb-size;
+				margin: 0;
+			}
+		}
+	}
+
+	&[data-emphasis="strong"],
+	&[data-visual-aid="true"] {
+		> input {
+			&::after {
+				visibility: visible;
+				block-size: $switch-active-thumb-size;
+			}
+
+			&:checked {
+				&:not([data-aid-icon]) {
+					@include icons.set-icon("check", "after");
+				}
+
+				&::after {
+					transform: translateX(
+						calc(-100% - #{$switch-fixed-padding})
+					);
+					block-size: $switch-active-thumb-size;
+				}
+			}
+		}
+	}
+}

package/build/components/tab-item/tab-item.css

@@ -0,0 +1,160 @@
+/* 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-visually-hidden,
+[data-visually-hidden=true] {
+  clip: rect(0, 0, 0, 0) !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  font-size: 0 !important;
+  all: initial;
+  inset-block-start: 0 !important;
+  block-size: 1px !important;
+  position: absolute !important;
+  inline-size: 1px !important;
+  border-width: 0 !important;
+  border-style: initial !important;
+  border-color: initial !important;
+  border-image: initial !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+}
+
+.db-tab-item input:focus-visible::before {
+  outline: var(--db-border-height-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-80-default));
+  outline-offset: var(--db-border-height-xs);
+  box-shadow: 0 0 0 var(--db-border-height-xs) var(--db-focus-box-shadow-bg-color, transparent);
+}
+.db-tab-item input:not([type=radio], [role=switch]):focus-visible::before {
+  border-radius: var(--db-border-radius-xs);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-tab-item input:focus-visible::before {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
+  }
+}
+
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-tab-item {
+  position: relative;
+  display: inline-flex;
+  list-style-type: "";
+  border-radius: var(--db-border-radius-sm);
+}
+.db-tab-item:has(input:disabled) {
+  opacity: 0.4;
+}
+.db-tab-item label {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+  padding: var(--db-spacing-fixed-xs);
+  align-items: center;
+  display: inline-block;
+  white-space: nowrap;
+  border: 0;
+  border-radius: var(--db-border-radius-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
+  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
+  cursor: initial;
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
+  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+}
+.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
+  cursor: initial;
+}
+.db-tab-item label:has(input:checked) {
+  font-weight: 700;
+}
+.db-tab-item label[data-icon] {
+  padding-inline-start: calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + calc(var(--db-base-font-size) * var(--db-base-line-height)));
+}
+.db-tab-item label[data-icon]::before {
+  position: absolute;
+  transform: translateY(-50%);
+  inset-block-start: 50%;
+  inset-inline-start: calc(0% + var(--db-spacing-fixed-xs));
+}
+.db-tab-item label[data-icon-after] {
+  padding-inline-end: calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + calc(var(--db-base-font-size) * var(--db-base-line-height)));
+}
+.db-tab-item label[data-icon-after]::after {
+  position: absolute;
+  transform: translateY(-50%);
+  inset-block-start: 50%;
+  inset-inline-end: calc(0% + var(--db-spacing-fixed-xs));
+}
+.db-tab-item label:is([data-no-text], [data-no-text=true]) {
+  font-size: 0 !important;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  padding: 0;
+  inline-size: calc(calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + calc(var(--db-base-font-size) * var(--db-base-line-height))) - var(--db-spacing-fixed-2xs));
+  block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) + var(--db-spacing-fixed-xs));
+}
+.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
+  --db-icon-margin-end: 0;
+}
+.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
+  margin-inline-end: 0;
+}
+.db-tab-item input {
+  position: absolute;
+  appearance: none;
+  inline-size: 100%;
+  margin-inline-end: initial;
+  inset: 0;
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+  border-radius: var(--db-border-radius-sm);
+  z-index: -1;
+  /*
+  focus must be set on input:
+  - parent label tag may use before AND after for displaying icons
+  - placed on li.db-tab-item focus would get cut off partially by by overflow hidden (orientation vertical)
+   */
+}
+.db-tab-item input:focus-visible:is(input[type=radio]) {
+  outline: none;
+  box-shadow: none;
+}
+.db-tab-item input:focus-visible::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--db-border-radius-sm);
+  z-index: 10;
+  pointer-events: none;
+}

package/build/components/tab-item/tab-item.scss

@@ -0,0 +1,135 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/component";
+@use "../../styles/internal/db-puls";
+@use "../../styles/internal/form-components";
+
+$with-icon-padding-calc: calc(
+	#{variables.$db-spacing-fixed-xs} + #{variables.$db-spacing-fixed-sm} +
+		#{form-components.$font-size-height}
+);
+
+
+.db-tab-item {
+	position: relative;
+	display: inline-flex;
+	list-style-type: "";
+	border-radius: variables.$db-border-radius-sm;
+
+	&:has(input:disabled) {
+		opacity: component.$default-disabled;
+	}
+
+	label {
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+		padding: variables.$db-spacing-fixed-xs;
+		align-items: center;
+		display: inline-block;
+		white-space: nowrap;
+		border: 0;
+		border-radius: variables.$db-border-radius-sm;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		@include helpers.hover {
+			&:has(:not(input:disabled)) {
+				background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+			}
+
+			&:has(input:disabled) {
+				cursor: initial;
+			}
+		}
+
+		@include helpers.hover {
+			&:has(:not(input:disabled)) {
+				background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+			}
+
+			&:has(input:disabled) {
+				cursor: initial;
+			}
+		}
+
+		&:has(input:checked) {
+			font-weight: 700;
+		}
+
+		&[data-icon] {
+			padding-inline-start: $with-icon-padding-calc;
+
+			&::before {
+				position: absolute;
+				transform: translateY(-50%);
+				inset-block-start: 50%;
+				inset-inline-start: calc(
+					0% + #{variables.$db-spacing-fixed-xs}
+				);
+			}
+		}
+
+		&[data-icon-after] {
+			padding-inline-end: $with-icon-padding-calc;
+
+			&::after {
+				position: absolute;
+				transform: translateY(-50%);
+				inset-block-start: 50%;
+				inset-inline-end: calc(0% + #{variables.$db-spacing-fixed-xs});
+			}
+		}
+
+		&:is([data-no-text], [data-no-text="true"]) {
+			@include icons.is-icon-text-replace();
+
+			padding: 0;
+			inline-size: calc(
+				#{$with-icon-padding-calc} - #{variables.$db-spacing-fixed-2xs}
+			);
+			block-size: calc(
+				#{form-components.$font-size-height} +
+					#{variables.$db-spacing-fixed-xs}
+			);
+
+			&::before {
+				margin-inline-end: 0;
+			}
+		}
+	}
+
+	input {
+		position: absolute;
+		appearance: none;
+		inline-size: 100%;
+		margin-inline-end: initial;
+		inset: 0;
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+		border-radius: variables.$db-border-radius-sm;
+		z-index: -1;
+
+		/*
+		focus must be set on input:
+		- parent label tag may use before AND after for displaying icons
+		- placed on li.db-tab-item focus would get cut off partially by by overflow hidden (orientation vertical)
+		 */
+		&:focus-visible {
+			&:is(input[type="radio"]) {
+				outline: none;
+				box-shadow: none;
+			}
+
+			&::before {
+				@extend %focus-placeholder;
+
+				content: "";
+				position: absolute;
+				inset: 0;
+				border-radius: variables.$db-border-radius-sm;
+				z-index: 10;
+				pointer-events: none;
+			}
+		}
+	}
+}