@db-ux/core-components 4.6.1 → 4.7.0-tabs-34782eb

package/build/components/stack/stack-web-component.css

@@ -1,4 +1,7 @@
 /* Variants for adaptive components like input, select, notification, ... */
+.db-stack:not([hidden]) {
+  display: flex;
+}
 .db-stack {
   gap: var(--db-spacing-fixed-sm);
   justify-content: flex-start;
@@ -6,9 +9,6 @@
   inline-size: 100%;
   overflow: auto;
 }
-.db-stack:not([hidden]) {
-  display: flex;
-}
 .db-stack:is([data-direction=column], :not([data-direction])) {
   flex-direction: column;
 }

package/build/components/stack/stack.css

@@ -1,4 +1,7 @@
 /* Variants for adaptive components like input, select, notification, ... */
+.db-stack:not([hidden]) {
+  display: flex;
+}
 .db-stack {
   gap: var(--db-spacing-fixed-sm);
   justify-content: flex-start;
@@ -6,9 +9,6 @@
   inline-size: 100%;
   overflow: auto;
 }
-.db-stack:not([hidden]) {
-  display: flex;
-}
 .db-stack:is([data-direction=column], :not([data-direction])) {
   flex-direction: column;
 }

package/build/components/switch/switch.css

@@ -101,9 +101,6 @@
 
 .db-switch {
   user-select: none;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* Label position (leading/trailing) */
 }
 .db-switch:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
 .db-switch:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-switch:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
@@ -122,16 +119,16 @@
 .db-switch:has(input:disabled) {
   opacity: var(--db-opacity-md);
 }
+.db-switch:is(label):not([hidden]),
+.db-switch > label:not([hidden]) {
+  display: flex;
+}
 .db-switch:is(label),
 .db-switch > label {
   align-items: flex-start;
   position: relative;
   color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
-.db-switch:is(label):not([hidden]),
-.db-switch > label:not([hidden]) {
-  display: flex;
-}
 .db-switch input {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   place-content: center center;
@@ -196,14 +193,14 @@
   	--db-successful-on-bg-inverted-default
   );
 }
-.db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
-.db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
+.db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
   display: none;
@@ -230,6 +227,9 @@
   	--db-successful-bg-inverted-contrast-low-pressed
   );
 }
+.db-switch {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
   --db-check-element-border-color: var(
   	--db-successful-on-bg-basic-emphasis-70-default
@@ -247,16 +247,16 @@
   	--db-successful-on-bg-inverted-default
   );
 }
-.db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
-.db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext, .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
-.db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
 .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
 .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
   display: flex;
 }
+.db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext, .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
+.db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
 .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
@@ -331,6 +331,9 @@
   	--db-critical-bg-inverted-contrast-low-pressed
   );
 }
+.db-switch {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
 .db-switch:has(input[data-custom-validity=invalid]), .db-switch[data-custom-validity=invalid] {
   --db-check-element-border-color: var(
   	--db-critical-on-bg-basic-emphasis-70-default
@@ -388,14 +391,15 @@
   inline-size: calc(var(--db-icon-font-size) * 2 + 0.125rem);
   block-size: var(--db-icon-font-size);
   box-sizing: content-box;
+}
+.db-switch input:not([hidden]) {
+  display: flex;
+}
+.db-switch input {
   align-items: center;
   /* stylelint-disable-next-line db-ux/use-spacings */
   gap: 0.125rem;
   border-radius: var(--db-border-radius-full);
-  /* positioned at the end of the track: track length - 100% (thumb width) */
-}
-.db-switch input:not([hidden]) {
-  display: flex;
 }
 .db-switch input:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "cross";
@@ -435,6 +439,9 @@
     content: "•"/"";
   }
 }
+.db-switch input {
+  /* positioned at the end of the track: track length - 100% (thumb width) */
+}
 .db-switch input:checked {
   --thumb-offset-x: calc(100% + 0.125rem);
   --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
@@ -500,6 +507,9 @@
   transform: translateX(calc(-100% - 0.125rem));
   transform-origin: center right;
 }
+.db-switch {
+  /* Label position (leading/trailing) */
+}
 .db-switch:not([data-variant=leading]) > label {
   flex-direction: row;
 }

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

@@ -1,193 +1,169 @@
 /* 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 .db-tab-label[data-icon]:not([data-show-icon=false])::before {
+  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", "icon-font-fallback")) !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;
+  overflow: clip;
+  vertical-align: var(--db-icon-vertical-align, middle);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  block-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
+  content: var(--db-icon, attr(data-icon));
+}
+@supports (content: ""/"") {
+  .db-tab-item .db-tab-label[data-icon]:not([data-show-icon=false])::before {
+    content: var(--db-icon, attr(data-icon))/"";
+  }
+}
+@media aural {
+  .db-tab-item .db-tab-label[data-icon]:not([data-show-icon=false])::before {
+    content: none;
+  }
+}
+@media speech {
+  .db-tab-item .db-tab-label[data-icon]:not([data-show-icon=false])::before {
+    content: none;
+  }
+}
+
+[data-density=expressive] .db-tab-item {
+  font: var(--db-type-body-lg);
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-lg);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-lg);
 }
 
-.db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
-  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
-  outline-offset: var(--db-border-width-xs);
-  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
+[data-density=functional] .db-tab-item {
+  font: var(--db-type-body-sm);
+  /* 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-tab-item::after {
+  content: "";
+  position: absolute;
+  border-radius: var(--db-border-radius-xs);
 }
 @media (prefers-reduced-motion: no-preference) {
-  .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
-    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
+  .db-tab-item::after {
+    transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
   }
 }
-.db-tab-item input:not([data-disable-focus=true]):not([type=radio], [role=switch]):focus-visible::before {
-  border-radius: var(--db-border-radius-xs);
+
+db-tab-item,
+dbtabitem {
+  display: contents;
+  vertical-align: top;
 }
 
 .db-tab-item {
   position: relative;
-  list-style-type: "";
-  border-radius: var(--db-border-radius-sm);
-}
-.db-tab-item:not([hidden]) {
-  display: inline-flex;
-}
-.db-tab-item:has(input:disabled) {
-  opacity: var(--db-opacity-md);
-}
-.db-tab-item label {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   padding: var(--db-spacing-fixed-xs);
+  overflow: visible;
   align-items: center;
+  justify-content: center;
   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:not([hidden]) {
-  display: inline-block;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  flex-shrink: 0;
+  z-index: 2;
+  max-inline-size: var(--db-sizing-2xl);
+}
+@media screen and (forced-colors: active) {
+  .db-tab-item {
+    border: var(--db-border-width-xs) solid transparent;
+  }
 }
-.db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)) {
-  cursor: var(--db-overwrite-cursor, pointer);
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-tab-item {
+    transition: background-color var(--db-transition-duration-fast);
+  }
 }
-.db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):has(:not(input:disabled)) {
-  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+.db-tab-item .db-tab-label {
+  max-inline-size: 100%;
 }
-.db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):has(input:disabled) {
-  cursor: initial;
+.db-tab-item .db-tab-label:not([hidden]) {
+  display: block;
 }
-.db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(textarea), .db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input) {
-  cursor: initial;
-}
-.db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
+.db-tab-item .db-tab-label:not([data-icon-trailing])::after {
+  content: attr(data-label);
+  font-weight: 700;
+  display: block;
+  block-size: 0;
+  font-size: 0;
+  line-height: 0;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  visibility: hidden;
 }
-.db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)) {
-  cursor: var(--db-overwrite-cursor, pointer);
+.db-tab-item .db-tab-label[data-icon]:not([data-show-icon=false])::before {
+  margin-inline-end: var(--db-spacing-fixed-xs);
+  vertical-align: middle;
 }
-.db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):has(:not(input:disabled)) {
-  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+.db-tab-item[data-no-text=true] .db-tab-label[data-icon]::before {
+  margin-inline-end: 0;
 }
-.db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):has(input:disabled) {
-  cursor: initial;
+.db-tab-item[data-no-text=true] .db-tab-label::after {
+  content: none;
 }
-.db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(textarea), .db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input) {
-  cursor: initial;
+[data-orientation=vertical] .db-tab-item .db-tab-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled,
-[aria-disabled=true],
-[tabindex="-1"],
-:has(:disabled)):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
+.db-tab-item:not([hidden]) {
+  display: flex;
 }
-.db-tab-item label:has(input:checked) {
-  font-weight: 700;
+[data-density=functional] .db-tab-item {
+  padding: var(--db-spacing-fixed-2xs);
 }
-.db-tab-item label[data-icon] {
-  padding-inline-start: calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + var(--db-icon-font-size));
+[data-density=expressive] .db-tab-item {
+  padding: var(--db-spacing-fixed-sm);
 }
-.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::after {
+  inline-size: 0;
+  block-size: var(--db-border-width-xs);
 }
-.db-tab-item label[data-icon-trailing] {
-  padding-inline-end: calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + var(--db-icon-font-size));
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-tab-item::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) !important;
+  }
 }
-.db-tab-item label[data-icon-trailing]::after {
-  position: absolute;
-  transform: translateY(-50%);
-  inset-block-start: 50%;
-  inset-inline-end: calc(0% + var(--db-spacing-fixed-xs));
+[data-orientation=vertical] .db-tab-item::after {
+  inline-size: var(--db-border-width-xs);
+  block-size: 0;
 }
-.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) + var(--db-icon-font-size)) - var(--db-spacing-fixed-2xs));
-  block-size: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-xs));
+[data-orientation=vertical] .db-tab-item {
+  max-inline-size: 100%;
+  flex-shrink: 1;
 }
-.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
-  --db-icon-margin-end: 0;
+.db-tab-item[aria-selected=true], .db-tab-item[data-active=true] {
+  font-weight: 700;
 }
-.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
-  margin-inline-end: 0;
+.db-tab-item:disabled {
+  opacity: var(--db-opacity-md);
+  cursor: initial;
 }
-.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;
+.db-tab-item:not(:disabled):hover, .db-tab-item:not(:disabled):focus-visible {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }