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

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

@@ -0,0 +1,239 @@
+/* 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 */
+.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;
+}
+
+/* Variants for adaptive components like input, select, notification, ... */
+@keyframes show-right-to-left {
+  from {
+    transform: translateX(110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-right-to-left {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(110%);
+  }
+}
+@keyframes show-left-to-right {
+  from {
+    transform: translateX(-110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-left-to-right {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-110%);
+  }
+}
+@keyframes show-bottom-to-top {
+  from {
+    transform: translateY(110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-bottom-to-top {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(110%);
+  }
+}
+@keyframes show-top-to-bottom {
+  from {
+    transform: translateY(-110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-top-to-bottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(-110%);
+  }
+}
+@keyframes accordion-open {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+@keyframes popover-animation {
+  0% {
+    opacity: 0;
+    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
+  }
+}
+.db-accordion-item summary:not([data-hide-icon-after=true])::after {
+  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-accordion-item summary:not([data-hide-icon-after=true])::after {
+    content: none;
+  }
+}
+@media speech {
+  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
+    content: none;
+  }
+}
+
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-accordion-item summary {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+  --db-base-line-height: var(--db-type-body-line-height-md);
+  --db-base-font-size: var(--db-type-body-font-size-md);
+  line-height: var(--db-type-body-line-height-md);
+  font-size: var(--db-type-body-font-size-md);
+}
+
+.db-accordion-item summary:not([data-hide-icon-after=true])::after {
+  --db-icon-after: "chevron_down";
+  content: var(--db-icon-after, attr(data-icon-after));
+  content: var(--db-icon-after, attr(data-icon-after))/"";
+  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
+}
+.db-accordion-item summary::after {
+  pointer-events: none;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-accordion-item summary::after {
+    transition: transform var(--db-transition-straight-emotional);
+  }
+}
+
+.db-accordion-item {
+  position: relative;
+  inline-size: 100%;
+  border-radius: var(--db-border-radius-sm);
+  list-style-type: "";
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-accordion-item > details[open] summary + div {
+    animation: accordion-open var(--db-transition-straight-emotional) normal both;
+  }
+}
+.db-accordion-item > details[open] summary::after {
+  transform: rotate(-180deg);
+}
+.db-accordion-item > details[aria-disabled=true] {
+  pointer-events: none;
+  opacity: 0.4;
+}
+.db-accordion-item summary + div {
+  padding: var(--db-spacing-fixed-md);
+  padding-block-end: var(--db-spacing-fixed-lg);
+}
+.db-accordion-item summary {
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--db-spacing-fixed-md);
+  gap: var(--db-spacing-fixed-md);
+  border-radius: var(--db-border-radius-sm);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
+}
+.db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-accordion-item summary:active:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
+}
+.db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item summary:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-accordion-item summary::-webkit-details-marker {
+  display: none;
+}
+.db-accordion-item summary::after {
+  inset-inline-end: var(--db-spacing-fixed-sm);
+}
+.db-accordion-item summary:focus-visible {
+  border-radius: var(--db-border-radius-xs);
+}

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

@@ -0,0 +1,73 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/animation";
+@use "../../styles/internal/form-components";
+@use "../../styles/internal/component";
+
+
+.db-accordion-item {
+	position: relative;
+	inline-size: 100%;
+	border-radius: variables.$db-border-radius-sm;
+	list-style-type: "";
+
+	> details {
+		&[open] {
+			summary + div {
+				@media screen and (prefers-reduced-motion: no-preference) {
+					animation: accordion-open
+						#{variables.$db-transition-straight-emotional} normal
+						both;
+				}
+			}
+
+			summary::after {
+				transform: form-components.$dropdown-icon-transform;
+			}
+		}
+
+		&[aria-disabled="true"] {
+			pointer-events: none;
+			opacity: component.$default-disabled;
+		}
+	}
+
+	summary + div {
+		padding: variables.$db-spacing-fixed-md;
+		padding-block-end: variables.$db-spacing-fixed-lg;
+	}
+
+	summary {
+		@extend %dropdown-icon;
+		@extend %db-overwrite-font-size-md;
+
+		background-color: colors.$db-adaptive-bg-basic-level-1-default;
+		list-style: none;
+		display: flex;
+		justify-content: space-between;
+		padding: variables.$db-spacing-fixed-md;
+		gap: variables.$db-spacing-fixed-md;
+		border-radius: variables.$db-border-radius-sm;
+
+		@include helpers.hover {
+			background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
+		}
+
+		@include helpers.active {
+			background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
+		}
+
+		&::-webkit-details-marker {
+			display: none;
+		}
+
+		&::after {
+			inset-inline-end: variables.$db-spacing-fixed-sm;
+		}
+
+		&:focus-visible {
+			border-radius: variables.$db-border-radius-xs;
+		}
+	}
+}

package/build/components/badge/badge.css

@@ -0,0 +1,253 @@
+/* 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 */
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-badge[data-size=medium], .db-badge[data-size=medium] > *,
+.db-badge[data-size=medium] .db-icon {
+  /* 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-badge, .db-badge > *,
+.db-badge .db-icon {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
+  --db-base-line-height: var(--db-type-body-line-height-2xs);
+  --db-base-font-size: var(--db-type-body-font-size-2xs);
+  line-height: var(--db-type-body-line-height-2xs);
+  font-size: var(--db-type-body-font-size-2xs);
+}
+
+.db-badge {
+  font-weight: 700;
+  white-space: nowrap;
+  justify-content: center;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Variants for adaptive components like input, select, notification, ... */
+.db-badge {
+  border: var(--db-border-height-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+
+.db-badge {
+  border-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
+}
+.db-badge::before, .db-badge::after {
+  --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
+}
+
+.db-badge[data-emphasis=strong] {
+  border-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
+  background-color: var(--db-adaptive-bg-inverted-contrast-high-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+}
+.db-badge[data-emphasis=strong]::before, .db-badge[data-emphasis=strong]::after {
+  --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
+}
+
+.db-badge[data-emphasis=origin] {
+  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  background-color: var(--db-adaptive-origin-default);
+  color: var(--db-adaptive-on-origin-default);
+}
+.db-badge[data-emphasis=origin]::before, .db-badge[data-emphasis=origin]::after {
+  --db-icon-color: var(--db-adaptive-on-origin-default);
+}
+
+.db-badge[data-placement^=corner] {
+  position: absolute;
+  transform: translate(var(--badge-transform-x), var(--badge-transform-y));
+}
+[data-placement$=right].db-badge[data-placement^=corner] {
+  --badge-transform-x: 50%;
+  inset-inline-end: 0;
+}
+[data-placement$=left].db-badge[data-placement^=corner] {
+  --badge-transform-x: -50%;
+  inset-inline-start: 0;
+}
+[data-placement*=top].db-badge[data-placement^=corner] {
+  --badge-transform-y: -50%;
+  inset-block-start: 0;
+}
+[data-placement*=center].db-badge[data-placement^=corner] {
+  --badge-transform-y: -50%;
+  inset-block-start: 50%;
+}
+[data-placement*=bottom].db-badge[data-placement^=corner] {
+  --badge-transform-y: 50%;
+  inset-block-end: 0;
+}
+
+.db-badge {
+  --badge-size: var(--db-spacing-fixed-xs);
+  border-radius: var(--db-border-radius-full);
+  padding-inline: var(--db-spacing-fixed-2xs);
+  block-size: fit-content;
+  inline-size: fit-content;
+}
+.db-badge[data-semantic=neutral] {
+  border-color: var(--db-neutral-on-bg-basic-emphasis-60-default);
+  background-color: var(--db-neutral-bg-basic-level-1-default);
+  color: var(--db-neutral-on-bg-basic-emphasis-80-default);
+}
+.db-badge[data-semantic=neutral]::before, .db-badge[data-semantic=neutral]::after {
+  --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-80-default);
+}
+.db-badge[data-semantic=neutral][data-emphasis=strong] {
+  border-color: var(--db-neutral-on-bg-basic-emphasis-80-default);
+  background-color: var(--db-neutral-bg-inverted-contrast-high-default);
+  color: var(--db-neutral-on-bg-inverted-default);
+}
+.db-badge[data-semantic=neutral][data-emphasis=strong]::before, .db-badge[data-semantic=neutral][data-emphasis=strong]::after {
+  --db-icon-color: var(--db-neutral-on-bg-inverted-default);
+}
+.db-badge[data-semantic=neutral][data-emphasis=origin] {
+  border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
+  background-color: var(--db-neutral-origin-default);
+  color: var(--db-neutral-on-origin-default);
+}
+.db-badge[data-semantic=neutral][data-emphasis=origin]::before, .db-badge[data-semantic=neutral][data-emphasis=origin]::after {
+  --db-icon-color: var(--db-neutral-on-origin-default);
+}
+.db-badge[data-semantic=critical] {
+  border-color: var(--db-critical-on-bg-basic-emphasis-60-default);
+  background-color: var(--db-critical-bg-basic-level-1-default);
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
+.db-badge[data-semantic=critical]::before, .db-badge[data-semantic=critical]::after {
+  --db-icon-color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
+.db-badge[data-semantic=critical][data-emphasis=strong] {
+  border-color: var(--db-critical-on-bg-basic-emphasis-80-default);
+  background-color: var(--db-critical-bg-inverted-contrast-high-default);
+  color: var(--db-critical-on-bg-inverted-default);
+}
+.db-badge[data-semantic=critical][data-emphasis=strong]::before, .db-badge[data-semantic=critical][data-emphasis=strong]::after {
+  --db-icon-color: var(--db-critical-on-bg-inverted-default);
+}
+.db-badge[data-semantic=critical][data-emphasis=origin] {
+  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+  background-color: var(--db-critical-origin-default);
+  color: var(--db-critical-on-origin-default);
+}
+.db-badge[data-semantic=critical][data-emphasis=origin]::before, .db-badge[data-semantic=critical][data-emphasis=origin]::after {
+  --db-icon-color: var(--db-critical-on-origin-default);
+}
+.db-badge[data-semantic=successful] {
+  border-color: var(--db-successful-on-bg-basic-emphasis-60-default);
+  background-color: var(--db-successful-bg-basic-level-1-default);
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-badge[data-semantic=successful]::before, .db-badge[data-semantic=successful]::after {
+  --db-icon-color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-badge[data-semantic=successful][data-emphasis=strong] {
+  border-color: var(--db-successful-on-bg-basic-emphasis-80-default);
+  background-color: var(--db-successful-bg-inverted-contrast-high-default);
+  color: var(--db-successful-on-bg-inverted-default);
+}
+.db-badge[data-semantic=successful][data-emphasis=strong]::before, .db-badge[data-semantic=successful][data-emphasis=strong]::after {
+  --db-icon-color: var(--db-successful-on-bg-inverted-default);
+}
+.db-badge[data-semantic=successful][data-emphasis=origin] {
+  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+  background-color: var(--db-successful-origin-default);
+  color: var(--db-successful-on-origin-default);
+}
+.db-badge[data-semantic=successful][data-emphasis=origin]::before, .db-badge[data-semantic=successful][data-emphasis=origin]::after {
+  --db-icon-color: var(--db-successful-on-origin-default);
+}
+.db-badge[data-semantic=warning] {
+  border-color: var(--db-warning-on-bg-basic-emphasis-60-default);
+  background-color: var(--db-warning-bg-basic-level-1-default);
+  color: var(--db-warning-on-bg-basic-emphasis-80-default);
+}
+.db-badge[data-semantic=warning]::before, .db-badge[data-semantic=warning]::after {
+  --db-icon-color: var(--db-warning-on-bg-basic-emphasis-80-default);
+}
+.db-badge[data-semantic=warning][data-emphasis=strong] {
+  border-color: var(--db-warning-on-bg-basic-emphasis-80-default);
+  background-color: var(--db-warning-bg-inverted-contrast-high-default);
+  color: var(--db-warning-on-bg-inverted-default);
+}
+.db-badge[data-semantic=warning][data-emphasis=strong]::before, .db-badge[data-semantic=warning][data-emphasis=strong]::after {
+  --db-icon-color: var(--db-warning-on-bg-inverted-default);
+}
+.db-badge[data-semantic=warning][data-emphasis=origin] {
+  border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
+  background-color: var(--db-warning-origin-default);
+  color: var(--db-warning-on-origin-default);
+}
+.db-badge[data-semantic=warning][data-emphasis=origin]::before, .db-badge[data-semantic=warning][data-emphasis=origin]::after {
+  --db-icon-color: var(--db-warning-on-origin-default);
+}
+.db-badge[data-semantic=informational] {
+  border-color: var(--db-informational-on-bg-basic-emphasis-60-default);
+  background-color: var(--db-informational-bg-basic-level-1-default);
+  color: var(--db-informational-on-bg-basic-emphasis-80-default);
+}
+.db-badge[data-semantic=informational]::before, .db-badge[data-semantic=informational]::after {
+  --db-icon-color: var(--db-informational-on-bg-basic-emphasis-80-default);
+}
+.db-badge[data-semantic=informational][data-emphasis=strong] {
+  border-color: var(--db-informational-on-bg-basic-emphasis-80-default);
+  background-color: var(--db-informational-bg-inverted-contrast-high-default);
+  color: var(--db-informational-on-bg-inverted-default);
+}
+.db-badge[data-semantic=informational][data-emphasis=strong]::before, .db-badge[data-semantic=informational][data-emphasis=strong]::after {
+  --db-icon-color: var(--db-informational-on-bg-inverted-default);
+}
+.db-badge[data-semantic=informational][data-emphasis=origin] {
+  border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
+  background-color: var(--db-informational-origin-default);
+  color: var(--db-informational-on-origin-default);
+}
+.db-badge[data-semantic=informational][data-emphasis=origin]::before, .db-badge[data-semantic=informational][data-emphasis=origin]::after {
+  --db-icon-color: var(--db-informational-on-origin-default);
+}
+.db-badge:has(.db-icon) {
+  padding: var(--db-spacing-fixed-3xs);
+}
+.db-badge[data-size=medium] {
+  --badge-size: var(--db-spacing-fixed-sm);
+  padding-inline: var(--db-spacing-fixed-xs);
+}
+.db-badge[data-size=medium]:has(.db-icon) {
+  padding: var(--db-spacing-fixed-2xs);
+}
+.db-badge:empty,
+.db-badge > span:empty {
+  block-size: var(--badge-size);
+  inline-size: var(--badge-size);
+  padding: 0;
+}
+.db-badge[data-placement^=corner][data-label]::before {
+  content: attr(data-label);
+  position: fixed;
+  font-size: 0;
+}
+
+[data-has-badge=true] {
+  position: relative;
+}

package/build/components/badge/badge.scss

@@ -0,0 +1,107 @@
+@use "sass:map";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "../../styles/internal/button-components";
+@use "../../styles/internal/tag-components";
+@use "../../styles/internal/component";
+
+%absolute-badge {
+	position: absolute;
+	transform: translate(var(--badge-transform-x), var(--badge-transform-y));
+
+	&[data-placement$="right"] {
+		--badge-transform-x: 50%;
+
+		inset-inline-end: 0;
+	}
+
+	&[data-placement$="left"] {
+		--badge-transform-x: -50%;
+
+		inset-inline-start: 0;
+	}
+
+	&[data-placement*="top"] {
+		--badge-transform-y: -50%;
+
+		inset-block-start: 0;
+	}
+
+	&[data-placement*="center"] {
+		--badge-transform-y: -50%;
+
+		inset-block-start: 50%;
+	}
+
+	&[data-placement*="bottom"] {
+		--badge-transform-y: 50%;
+
+		inset-block-end: 0;
+	}
+}
+
+.db-badge {
+	--badge-size: #{variables.$db-spacing-fixed-xs};
+
+	@extend %component-border;
+	@extend %db-overwrite-font-size-2xs;
+	@extend %default-button;
+
+	@include tag-components.get-tag-colors();
+
+	border-radius: variables.$db-border-radius-full;
+	padding-inline: variables.$db-spacing-fixed-2xs;
+	block-size: fit-content;
+	inline-size: fit-content;
+
+	&:has(.db-icon) {
+		padding: variables.$db-spacing-fixed-3xs;
+	}
+
+	> *,
+	.db-icon {
+		@extend %db-overwrite-font-size-2xs;
+	}
+
+	&[data-size="medium"] {
+		--badge-size: #{variables.$db-spacing-fixed-sm};
+
+		@extend %db-overwrite-font-size-sm;
+
+		padding-inline: variables.$db-spacing-fixed-xs;
+
+		&:has(.db-icon) {
+			padding: variables.$db-spacing-fixed-2xs;
+		}
+
+		> *,
+		.db-icon {
+			@extend %db-overwrite-font-size-sm;
+		}
+	}
+
+	&:empty,
+	> span:empty {
+		block-size: var(--badge-size);
+		inline-size: var(--badge-size);
+		padding: 0;
+	}
+
+	&[data-placement^="corner"] {
+		@extend %absolute-badge;
+
+		&[data-label] {
+			&::before {
+				content: attr(data-label);
+				position: fixed;
+				font-size: 0;
+			}
+		}
+	}
+}
+
+// Global styles
+
+[data-has-badge="true"] {
+	position: relative;
+}