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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @db-ux/core-components
 
+## 4.7.1
+
+### Patch Changes
+
+- fix(dialog): re-added missing styles to native `dialog` HTML element. We'll most likely remove those later again, and provide a DBDialog component. - [see commit ce1b5a0](https://github.com/db-ux-design-system/core-web/commit/ce1b5a061ad0ef14a0ff415aa3a00fa06f217479)
+
 ## 4.7.0
 
 ### Minor Changes

package/build/components/custom-select/custom-select.css

@@ -617,30 +617,30 @@ input[type=radio]:checked) > label {
   inline-size: calc(100% - var(--db-form-component-padding-inline-end) - calc(var(--db-form-has-before) * (var(--db-base-body-icon-font-size-sm) + var(--db-spacing-fixed-sm))) - var(--db-spacing-fixed-sm));
 }
 
-dialog[class^=db-] {
+dialog {
   padding: 0;
   margin: 0;
   border: 0;
   z-index: 9996;
   color: inherit;
 }
-dialog[class^=db-]:not([data-position=absolute])[data-variant], dialog[class^=db-]:not([data-position=absolute])[data-backdrop] {
+dialog:not([data-position=absolute])[data-variant], dialog:not([data-position=absolute])[data-backdrop] {
   position: fixed;
   inset: 0;
   z-index: 9995;
 }
-dialog[class^=db-]:not([data-position=absolute])[data-variant=inside]:not([data-backdrop=none])::before {
+dialog:not([data-position=absolute])[data-variant=inside]:not([data-backdrop=none])::before {
   content: "";
   position: fixed;
   inset: 0;
 }
-dialog[class^=db-]:not([data-backdrop=none])::backdrop, dialog[class^=db-]:not([data-backdrop=none])::before {
+dialog:not([data-backdrop=none])::backdrop, dialog:not([data-backdrop=none])::before {
   background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
 }
-dialog[class^=db-]:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog[class^=db-]:not([data-backdrop=none])[data-backdrop=invisible]::before {
+dialog:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=invisible]::before {
   background-color: transparent;
 }
-dialog[class^=db-]:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog[class^=db-]:not([data-backdrop=none])[data-backdrop=weak]::before {
+dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=weak]::before {
   background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
 }
 

package/build/components/drawer/drawer.css

@@ -16,30 +16,30 @@
     transform: rotate(1turn);
   }
 }
-dialog[class^=db-] {
+dialog {
   padding: 0;
   margin: 0;
   border: 0;
   z-index: 9996;
   color: inherit;
 }
-dialog[class^=db-]:not([data-position=absolute])[data-variant], dialog[class^=db-]:not([data-position=absolute])[data-backdrop] {
+dialog:not([data-position=absolute])[data-variant], dialog:not([data-position=absolute])[data-backdrop] {
   position: fixed;
   inset: 0;
   z-index: 9995;
 }
-dialog[class^=db-]:not([data-position=absolute])[data-variant=inside]:not([data-backdrop=none])::before {
+dialog:not([data-position=absolute])[data-variant=inside]:not([data-backdrop=none])::before {
   content: "";
   position: fixed;
   inset: 0;
 }
-dialog[class^=db-]:not([data-backdrop=none])::backdrop, dialog[class^=db-]:not([data-backdrop=none])::before {
+dialog:not([data-backdrop=none])::backdrop, dialog:not([data-backdrop=none])::before {
   background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
 }
-dialog[class^=db-]:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog[class^=db-]:not([data-backdrop=none])[data-backdrop=invisible]::before {
+dialog:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=invisible]::before {
   background-color: transparent;
 }
-dialog[class^=db-]:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog[class^=db-]:not([data-backdrop=none])[data-backdrop=weak]::before {
+dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=weak]::before {
   background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
 }
 

package/build/components/drawer/drawer.scss

@@ -38,7 +38,10 @@
 			calc(100% - #{variables.$db-spacing-fixed-xl})
 		);
 		/* stylelint-disable-next-line db-ux/use-sizing */
-		min-block-size: var(--db-drawer-min-height, auto);
+		min-block-size: var(
+			--db-drawer-min-height,
+			auto
+		);
 		max-inline-size: none;
 	}
 }
@@ -168,7 +171,10 @@ $spacings: (
 				calc(100% - #{variables.$db-spacing-fixed-xl})
 			);
 			/* stylelint-disable-next-line db-ux/use-sizing */
-			min-inline-size: var(--db-drawer-min-width, auto);
+			min-inline-size: var(
+				--db-drawer-min-width,
+				auto
+			);
 
 			&:not([data-direction]),
 			&[data-direction="right"] {

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

@@ -277,9 +277,6 @@
   white-space: normal;
   text-align: start;
 }
-.db-navigation-item[data-force-mobile=true]:not([data-width=full]) {
-  inline-size: 100%;
-}
 .db-navigation-item[data-force-mobile=true]:not([data-width=full]) .db-navigation-item-expand-button::after {
   --db-icon-margin-start: auto;
 }
@@ -287,9 +284,6 @@
   /* stylelint-disable-next-line media-query-no-invalid */
 }
 @media (max-width: 63.9375em) {
-  .db-navigation-item:not([data-width=full]) {
-    inline-size: 100%;
-  }
   .db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
     --db-icon-margin-start: auto;
   }
@@ -310,9 +304,7 @@
   }
 }
 .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
-  inset: 0;
-  inline-size: 100%;
-  border-color: transparent;
+  inset-block: 0;
 }
 .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true]:not(.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true]) ~ .db-sub-navigation {
   transform: translateX(110%);
@@ -338,9 +330,7 @@
 }
 @media (max-width: 63.9375em) {
   .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
-    inset: 0;
-    inline-size: 100%;
-    border-color: transparent;
+    inset-block: 0;
   }
   .db-navigation-item .db-navigation-item-expand-button:not(.db-navigation-item .db-navigation-item-expand-button[aria-expanded=true]) ~ .db-sub-navigation {
     transform: translateX(110%);
@@ -399,11 +389,10 @@
 }
 .db-sub-navigation[data-force-mobile=true] {
   padding: var(--db-spacing-fixed-md);
-  inline-size: calc(100% - var(--db-spacing-fixed-xl));
+  inline-size: 100%;
   position: fixed;
   overflow: hidden auto;
-  inset-inline-start: var(--db-spacing-fixed-xl);
-  inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs))) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2);
+  inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + var(--db-spacing-fixed-3xs)) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2 + var(--db-spacing-fixed-3xs));
 }
 .db-sub-navigation {
   /* stylelint-disable-next-line media-query-no-invalid */
@@ -411,11 +400,10 @@
 @media (max-width: 63.9375em) {
   .db-sub-navigation {
     padding: var(--db-spacing-fixed-md);
-    inline-size: calc(100% - var(--db-spacing-fixed-xl));
+    inline-size: 100%;
     position: fixed;
     overflow: hidden auto;
-    inset-inline-start: var(--db-spacing-fixed-xl);
-    inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs))) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2);
+    inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + var(--db-spacing-fixed-3xs)) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2 + var(--db-spacing-fixed-3xs));
   }
 }
 .db-sub-navigation {

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

@@ -34,9 +34,7 @@
 			}
 
 			.db-sub-navigation {
-				inset: 0;
-				inline-size: 100%;
-				border-color: transparent;
+				inset-block: 0;
 			}
 		}
 	}
@@ -106,8 +104,6 @@
 
 	@include screen-sizes.screen("md", "max") {
 		&:not([data-width="full"]) {
-			inline-size: 100%;
-
 			.db-navigation-item-expand-button {
 				&::after {
 					--db-icon-margin-start: auto;
@@ -179,12 +175,19 @@
 
 @mixin sub-navigation-mobile() {
 	padding: variables.$db-spacing-fixed-md;
-	inline-size: calc(100% - #{variables.$db-spacing-fixed-xl});
+	inline-size: 100%;
 	position: fixed;
 	overflow: hidden auto;
-	inset-inline-start: variables.$db-spacing-fixed-xl;
-	inset-block: calc(#{component.$min-mobile-header-height})
-		calc(#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2);
+
+	// additional #{$db-spacing-fixed-3xs} for border
+	inset-block: calc(
+			#{component.$min-mobile-header-height} +
+				#{variables.$db-spacing-fixed-3xs}
+		)
+		calc(
+			#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2 +
+				#{variables.$db-spacing-fixed-3xs}
+		);
 }
 
 .db-sub-navigation {

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

@@ -1,169 +1,201 @@
 /* Variants for adaptive components like input, select, notification, ... */
-.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-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;
 }
 
-[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);
+.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);
 }
 @media (prefers-reduced-motion: no-preference) {
-  .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]):focus-visible::before {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
   }
 }
-
-db-tab-item,
-dbtabitem {
-  display: contents;
-  vertical-align: top;
+.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 {
   position: relative;
+}
+.db-tab-item:not([hidden]) {
+  display: inline-flex;
+}
+.db-tab-item {
+  list-style-type: "";
+  border-radius: var(--db-border-radius-sm);
+}
+.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;
+}
+.db-tab-item label:not([hidden]) {
+  display: inline-block;
+}
+.db-tab-item label {
   white-space: nowrap;
   border: 0;
   border-radius: var(--db-border-radius-sm);
-  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;
-  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+}
+.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);
 }
-@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(input:disabled) {
+  cursor: initial;
 }
-.db-tab-item .db-tab-label {
-  max-inline-size: 100%;
+.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 .db-tab-label:not([hidden]) {
-  display: block;
+.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 {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.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)) {
+  cursor: var(--db-overwrite-cursor, pointer);
 }
-.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(:not(input:disabled)) {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.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)):has(input:disabled) {
+  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(textarea), .db-tab-item label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
 }
-.db-tab-item:not([hidden]) {
-  display: flex;
+.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 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;
 }
-[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]) {
+  /* 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));
 }
-.db-tab-item:disabled {
-  opacity: var(--db-opacity-md);
-  cursor: initial;
+.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
+  margin-inline-end: 0;
 }
-.db-tab-item:not(:disabled):hover, .db-tab-item:not(:disabled):focus-visible {
-  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+.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;
 }