From 7aae170a868e614556958af78c8da6c7082b0762 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 3 Mar 2026 17:51:31 +0200
Subject: [PATCH 1/4] feat(status-badge): add new TEDI-Ready component #10

---
 .../status-badge/status-badge.component.ts    |   3 +
 .../status-badge/status-badge.component.html  |  35 +++
 .../status-badge/status-badge.component.scss  | 104 ++++++++
 .../status-badge.component.spec.ts            | 134 ++++++++++
 .../status-badge/status-badge.component.ts    | 140 ++++++++++
 .../tags/status-badge/status-badge.stories.ts | 251 ++++++++++++++++++
 6 files changed, 667 insertions(+)
 create mode 100644 tedi/components/tags/status-badge/status-badge.component.html
 create mode 100644 tedi/components/tags/status-badge/status-badge.component.scss
 create mode 100644 tedi/components/tags/status-badge/status-badge.component.spec.ts
 create mode 100644 tedi/components/tags/status-badge/status-badge.component.ts
 create mode 100644 tedi/components/tags/status-badge/status-badge.stories.ts

diff --git a/community/components/tags/status-badge/status-badge.component.ts b/community/components/tags/status-badge/status-badge.component.ts
index a7815cb50..302a9f5a7 100644
--- a/community/components/tags/status-badge/status-badge.component.ts
+++ b/community/components/tags/status-badge/status-badge.component.ts
@@ -21,6 +21,9 @@ export type StatusBadgeStatus =
   | "inactive"
   | "none";
 
+/**
+ * @deprecated Use StatusBadge from TEDI-ready instead. This component will be removed from future versions.
+ */
 @Component({
   selector: "[tedi-status-badge]",
   templateUrl: "./status-badge.component.html",
diff --git a/tedi/components/tags/status-badge/status-badge.component.html b/tedi/components/tags/status-badge/status-badge.component.html
new file mode 100644
index 000000000..597e42885
--- /dev/null
+++ b/tedi/components/tags/status-badge/status-badge.component.html
@@ -0,0 +1,35 @@
+@if (title()) {
+  <abbr
+    [ngClass]="classes()"
+    [attr.id]="uniqueId"
+    [attr.title]="title()"
+    [attr.role]="role()"
+    [attr.aria-live]="ariaLive()"
+  >
+    <ng-container *ngTemplateOutlet="statusBadgeContent"></ng-container>
+  </abbr>
+} @else {
+  <div
+    [ngClass]="classes()"
+    [attr.id]="uniqueId"
+    [attr.role]="role()"
+    [attr.aria-live]="ariaLive()"
+  >
+    <ng-container *ngTemplateOutlet="statusBadgeContent"></ng-container>
+  </div>
+}
+
+<ng-template #statusBadgeContent>
+  @if (icon()) {
+    <tedi-icon
+      class="tedi-status-badge__icon"
+      [name]="icon()"
+      [color]="mapBadgeColorToIconColor()"
+      [size]="16"
+    />
+  }
+
+  @if (text()) {
+    <span class="tedi-status-badge__text">{{ text() }}</span>
+  }
+</ng-template>
diff --git a/tedi/components/tags/status-badge/status-badge.component.scss b/tedi/components/tags/status-badge/status-badge.component.scss
new file mode 100644
index 000000000..529e1d809
--- /dev/null
+++ b/tedi/components/tags/status-badge/status-badge.component.scss
@@ -0,0 +1,104 @@
+$badge-colors: (
+  "neutral",
+  "brand",
+  "accent",
+  "success",
+  "danger",
+  "warning",
+  "transparent"
+);
+$badge-variants: ("filled", "filled-bordered", "bordered");
+$badge-status-colors: ("inactive", "success", "danger", "warning");
+
+.tedi-status-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--tag-default-padding-y) var(--tag-default-padding-x);
+  font-size: var(--body-small-regular-size);
+  font-weight: var(--body-small-regular-weight);
+  line-height: var(--body-small-regular-line-height);
+  color: var(--_status-badge-text);
+  text-decoration: none;
+  background: var(--_status-badge-background);
+  border-radius: var(--tag-default-radius);
+  box-shadow: var(--_status-badge-box-shadow);
+
+  &__text {
+    min-width: fit-content;
+    padding: 0 var(--tag-default-padding-x);
+  }
+
+  &--large {
+    min-width: var(--tag-status-large-min-width);
+    padding: var(--tag-status-large-padding-y) var(--tag-status-large-padding-x);
+  }
+
+  @each $variant in $badge-variants {
+    &.tedi-status-badge--variant-#{$variant} {
+      @each $color in $badge-colors {
+        &.tedi-status-badge--color-#{$color} {
+          --_status-badge-text: var(--status-badge-text-#{$color});
+          --_status-badge-box-shadow: inset
+            0
+            0
+            0
+            1px
+            var(--status-badge-border-#{$color});
+
+          @if $variant == "bordered" {
+            --_status-badge-background: transparent;
+          } @else {
+            --_status-badge-background: var(
+              --status-badge-background-#{$color}
+            );
+          }
+
+          @if $variant == "filled" {
+            --_status-badge-box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+
+  &--status {
+    &::before {
+      position: absolute;
+      top: -0.125rem;
+      right: -0.125rem;
+      z-index: 1;
+      width: var(--status-indicator-sm);
+      height: var(--status-indicator-sm);
+      content: "";
+      background-color: var(--_status-badge--indicator-background);
+      border: 1px solid var(--status-badge-indicator-border);
+      border-radius: 50%;
+    }
+
+    &.tedi-status-badge--large::before {
+      width: var(--status-indicator-lg);
+      height: var(--status-indicator-lg);
+    }
+
+    @each $status in $badge-status-colors {
+      &-#{$status}::before {
+        --_status-badge--indicator-background: var(
+          --status-badge-indicator-#{$status}
+        );
+      }
+    }
+  }
+
+  &__icon {
+    color: inherit;
+  }
+
+  &__icon-only {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--tag-status-icon-padding-y) var(--tag-status-icon-padding-x);
+    line-height: var(--body-small-regular-line-height);
+  }
+}
diff --git a/tedi/components/tags/status-badge/status-badge.component.spec.ts b/tedi/components/tags/status-badge/status-badge.component.spec.ts
new file mode 100644
index 000000000..cb796fc7b
--- /dev/null
+++ b/tedi/components/tags/status-badge/status-badge.component.spec.ts
@@ -0,0 +1,134 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { StatusBadgeComponent } from "./status-badge.component";
+
+describe("StatusBadgeComponent", () => {
+  let fixture: ComponentFixture<StatusBadgeComponent>;
+  let component: StatusBadgeComponent;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StatusBadgeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(StatusBadgeComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it("should create the component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("renders a div if title is not provided", () => {
+    fixture.componentRef.setInput("text", "Text");
+    fixture.detectChanges();
+
+    const div = element.querySelector("div.tedi-status-badge");
+    expect(div).not.toBeNull();
+    expect(element.querySelector("abbr")).toBeNull();
+  });
+
+  it("renders the text when provided", () => {
+    fixture.componentRef.setInput("text", "Text");
+    fixture.detectChanges();
+
+    const span = element.querySelector(".tedi-status-badge__text");
+    expect(span).not.toBeNull();
+    expect(span?.textContent).toBe("Text");
+  });
+
+  it("renders an abbr if title is provided", () => {
+    fixture.componentRef.setInput("title", "Title");
+    fixture.componentRef.setInput("text", "Text");
+    fixture.detectChanges();
+
+    const abbr = element.querySelector("abbr.tedi-status-badge");
+    expect(abbr).not.toBeNull();
+    expect(abbr?.getAttribute("title")).toBe("Title");
+  });
+
+  it("applies classes for color, variant, size, and status", () => {
+    fixture.componentRef.setInput("color", "brand");
+    fixture.componentRef.setInput("variant", "filled-bordered");
+    fixture.componentRef.setInput("size", "large");
+    fixture.componentRef.setInput("status", "success");
+    fixture.detectChanges();
+
+    const badge = element.querySelector(".tedi-status-badge");
+    expect(badge).not.toBeNull();
+
+    expect(badge?.classList.contains("tedi-status-badge--color-brand")).toBe(
+      true,
+    );
+    expect(
+      badge?.classList.contains("tedi-status-badge--variant-filled-bordered"),
+    ).toBe(true);
+    expect(badge?.classList.contains("tedi-status-badge--large")).toBe(true);
+    expect(badge?.classList.contains("tedi-status-badge--status")).toBe(true);
+    expect(badge?.classList.contains("tedi-status-badge--status-success")).toBe(
+      true,
+    );
+  });
+
+  it("computes aria-live based on role", () => {
+    fixture.componentRef.setInput("role", "alert");
+    fixture.detectChanges();
+    expect(component.ariaLive()).toBe("assertive");
+
+    fixture.componentRef.setInput("role", "status");
+    fixture.detectChanges();
+    expect(component.ariaLive()).toBe("polite");
+
+    fixture.componentRef.setInput("role", "");
+    fixture.detectChanges();
+    expect(component.ariaLive()).toBeNull();
+  });
+
+  it("renders icon when icon is provided", () => {
+    fixture.componentRef.setInput("icon", "edit");
+    fixture.detectChanges();
+
+    const icon = element.querySelector("tedi-icon");
+    expect(icon).not.toBeNull();
+  });
+
+  it("adds icon-only class when only icon is present", () => {
+    fixture.componentRef.setInput("icon", "edit");
+    fixture.componentRef.setInput("text", "");
+    fixture.detectChanges();
+
+    const badge = element.querySelector(".tedi-status-badge");
+    expect(badge).not.toBeNull();
+    expect(badge?.classList.contains("tedi-status-badge__icon-only")).toBe(
+      true,
+    );
+  });
+
+  it("should compute mapBadgeColorToIconColor correctly", () => {
+    const colors: Record<string, string> = {
+      neutral: "primary",
+      brand: "brand-dark",
+      accent: "secondary",
+      success: "success",
+      danger: "danger",
+      warning: "warning-dark",
+      transparent: "primary",
+    };
+
+    for (const [color, expectedIconColor] of Object.entries(colors)) {
+      fixture.componentRef.setInput("color", color);
+      fixture.detectChanges();
+
+      expect(component.mapBadgeColorToIconColor()).toBe(expectedIconColor);
+    }
+  });
+
+  it("should include custom class in computed classes", () => {
+    fixture.componentRef.setInput("class", "custom-class");
+    fixture.detectChanges();
+
+    const classes = component.classes();
+    expect(classes).toContain("custom-class");
+  });
+});
diff --git a/tedi/components/tags/status-badge/status-badge.component.ts b/tedi/components/tags/status-badge/status-badge.component.ts
new file mode 100644
index 000000000..3cc35e55e
--- /dev/null
+++ b/tedi/components/tags/status-badge/status-badge.component.ts
@@ -0,0 +1,140 @@
+import { CommonModule, NgClass } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  input,
+  computed,
+  inject,
+} from "@angular/core";
+import { IconComponent, IconColor } from "@tedi-design-system/angular/tedi";
+import { _IdGenerator } from "@angular/cdk/a11y";
+
+export type StatusBadgeColor =
+  | "neutral"
+  | "brand"
+  | "accent"
+  | "success"
+  | "danger"
+  | "warning"
+  | "transparent";
+export type StatusBadgeVariant = "filled" | "filled-bordered" | "bordered";
+export type StatusBadgeSize = "default" | "large";
+export type StatusBadgeStatus = "danger" | "success" | "warning" | "inactive";
+
+@Component({
+  selector: "tedi-status-badge",
+  standalone: true,
+  imports: [IconComponent, CommonModule, NgClass],
+  templateUrl: "./status-badge.component.html",
+  styleUrl: "./status-badge.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StatusBadgeComponent {
+  readonly idGenerator = inject(_IdGenerator);
+  readonly uniqueId = this.idGenerator.getId("tedi-status-badge");
+  /**
+   * The text to be displayed inside the StatusBadge.
+   */
+  text = input<string>("");
+  /**
+   * Additional classes to apply custom styles to the StatusBadge.
+   */
+  class = input<string>();
+  /**
+   * Provides the full text or description when the Badge represents an abbreviation.
+   * This is typically shown as a tooltip on hover.
+   */
+  title = input<string>();
+  /**
+   * ARIA role attribute for accessibility.
+   */
+  role = input<string>();
+  /**
+   * Specifies the color scheme of the StatusBadge.
+   * @default neutral
+   */
+  color = input<StatusBadgeColor>("neutral");
+  /**
+   * Determines the style or visual type of the StatusBadge.
+   * @default filled
+   */
+  variant = input<StatusBadgeVariant>("filled");
+  /**
+   * Specifies the size of the StatusBadge.
+   * @default default
+   */
+  size = input<StatusBadgeSize>("default");
+  /**
+   * StatusBadge status indicator.
+   */
+  status = input<StatusBadgeStatus>();
+  /**
+   * The name of the icon to be displayed inside the StatusBadge. The icon is rendered using the `Icon` component.
+   */
+  icon = input<string>("");
+
+  classes = computed(() => {
+    const classList = ["tedi-status-badge"];
+
+    if (this.color()) {
+      classList.push(`tedi-status-badge--color-${this.color()}`);
+    }
+
+    if (this.variant()) {
+      classList.push(`tedi-status-badge--variant-${this.variant()}`);
+    }
+
+    if (this.status()) {
+      classList.push(
+        "tedi-status-badge--status",
+        `tedi-status-badge--status-${this.status()}`,
+      );
+    }
+
+    if (this.size() === "large") {
+      classList.push("tedi-status-badge--large");
+    }
+
+    const hasText = !!this.text()?.trim();
+    const hasIcon = !!this.icon()?.trim();
+    if (hasIcon && !hasText) {
+      classList.push("tedi-status-badge__icon-only");
+    }
+
+    const customClass = this.class();
+    if (customClass) {
+      classList.push(customClass);
+    }
+
+    return classList;
+  });
+
+  mapBadgeColorToIconColor = computed((): IconColor => {
+    switch (this.color()) {
+      case "brand":
+        return "brand-dark";
+      case "success":
+        return "success";
+      case "accent":
+        return "secondary";
+      case "danger":
+        return "danger";
+      case "warning":
+        return "warning-dark";
+      default:
+        return "primary";
+    }
+  });
+
+  ariaLive = computed(() => {
+    if (this.role() === "alert") {
+      return "assertive";
+    }
+    if (this.role() === "status") {
+      return "polite";
+    }
+    return null;
+  });
+}
diff --git a/tedi/components/tags/status-badge/status-badge.stories.ts b/tedi/components/tags/status-badge/status-badge.stories.ts
new file mode 100644
index 000000000..f9843aa1b
--- /dev/null
+++ b/tedi/components/tags/status-badge/status-badge.stories.ts
@@ -0,0 +1,251 @@
+import {
+  Meta,
+  StoryObj,
+  moduleMetadata,
+  argsToTemplate,
+} from "@storybook/angular";
+import { IconComponent, TextComponent } from "tedi/components/base";
+import { ButtonComponent } from "tedi/components/buttons";
+import { ColComponent, RowComponent } from "tedi/components/helpers";
+import {
+  StatusBadgeColor,
+  StatusBadgeComponent,
+  StatusBadgeSize,
+  StatusBadgeStatus,
+  StatusBadgeVariant,
+} from "./status-badge.component";
+
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.37.57?m=dev&node-id=5784-114506" target="_blank">Figma ↗</a><br />
+ * <a href="https://www.tedi.ee/1ee8444b7/p/764a67-status-badge" target="_blank">Zeroheight ↗</a><br /><br />
+ */
+
+const colors: StatusBadgeColor[] = [
+  "neutral",
+  "brand",
+  "accent",
+  "warning",
+  "danger",
+  "success",
+  "transparent",
+];
+
+const demoColors: Exclude<StatusBadgeColor, "transparent">[] = [
+  "neutral",
+  "brand",
+  "accent",
+  "warning",
+  "danger",
+  "success",
+];
+
+const variants: StatusBadgeVariant[] = [
+  "filled",
+  "filled-bordered",
+  "bordered",
+];
+
+const statuses: StatusBadgeStatus[] = [
+  "inactive",
+  "success",
+  "warning",
+  "danger",
+];
+
+const colorToIconMap: Record<StatusBadgeColor, string> = {
+  neutral: "edit",
+  brand: "send",
+  accent: "sync",
+  warning: "warning",
+  danger: "error",
+  success: "check",
+  transparent: "edit",
+};
+
+const statusToIconMap: Partial<Record<StatusBadgeStatus, string>> = {
+  inactive: "edit",
+  success: "send",
+  warning: "sync",
+  danger: "error",
+};
+
+export default {
+  title: "TEDI-Ready/Components/Tags/StatusBadge",
+  decorators: [
+    moduleMetadata({
+      imports: [
+        StatusBadgeComponent,
+        IconComponent,
+        TextComponent,
+        ButtonComponent,
+        RowComponent,
+        ColComponent,
+      ],
+    }),
+  ],
+  argTypes: {
+    color: {
+      control: "select",
+      description: "Specifies the color scheme of the StatusBadge.",
+      options: colors,
+      table: {
+        category: "inputs",
+        type: { summary: "StatusBadgeColor" },
+        defaultValue: { summary: "neutral" },
+      },
+    },
+    variant: {
+      control: "radio",
+      description: "Determines the style or visual type of the StatusBadge.",
+      options: variants,
+      table: {
+        category: "inputs",
+        type: { summary: "StatusBadgeVariant" },
+        defaultValue: { summary: "filled" },
+      },
+    },
+    text: {
+      control: "text",
+      description: "The text to be displayed inside the StatusBadge.",
+      table: {
+        category: "inputs",
+        type: { summary: "string" },
+      },
+    },
+    icon: {
+      control: "text",
+      description:
+        "The name of the icon to be displayed inside the StatusBadge. The icon is rendered using the `Icon` component.",
+      table: {
+        category: "inputs",
+        type: { summary: "string" },
+      },
+    },
+    title: {
+      control: "text",
+      description:
+        "Provides the full text or description when the Badge represents an abbreviation. This is typically shown as a tooltip on hover.",
+      table: {
+        category: "inputs",
+        type: { summary: "string" },
+      },
+    },
+    role: {
+      control: "text",
+      description: "ARIA role attribute for accessibility.",
+      table: {
+        category: "inputs",
+        type: { summary: "string" },
+      },
+    },
+    size: {
+      control: "radio",
+      description: "Specifies the size of the StatusBadge.",
+      options: ["default", "large"] as StatusBadgeSize[],
+      table: {
+        category: "inputs",
+        type: { summary: "StatusBadgeSize" },
+        defaultValue: { summary: "default" },
+      },
+    },
+    status: {
+      control: "radio",
+      description: "StatusBadge status indicator.",
+      options: statuses,
+      table: {
+        category: "inputs",
+        type: { summary: "StatusBadgeStatus" },
+      },
+    },
+    class: {
+      control: "text",
+      description:
+        "Additional classes to apply custom styles to the StatusBadge.",
+      table: {
+        category: "inputs",
+        type: { summary: "string" },
+      },
+    },
+  },
+} as Meta;
+
+export const Default: StoryObj<StatusBadgeComponent> = {
+  args: {
+    color: "neutral",
+    variant: "filled",
+    text: "Text",
+    size: "default",
+  },
+  render: (args) => ({
+    props: args,
+    template: `<tedi-status-badge ${argsToTemplate(args)} />`,
+  }),
+};
+
+export const Colors: StoryObj<StatusBadgeComponent> = {
+  render: (args) => ({
+    props: { ...args, demoColors, variants, colorToIconMap },
+    template: `
+      <tedi-row [cols]="1" [gapY]="3">
+        <tedi-row cols="6" [gap]="3" *ngFor="let color of demoColors">
+          <tedi-col style="min-width: 5rem;">
+            <p tedi-text modifiers="bold" style="text-transform: capitalize;">{{ color }}</p>
+          </tedi-col>
+          <tedi-col *ngFor="let variant of variants" style="display: flex; gap: var(--layout-grid-gutters-16);">
+            <tedi-status-badge ${argsToTemplate(args)} [text]="'Text'" [color]="color" [variant]="variant" />
+            <tedi-status-badge ${argsToTemplate(args)} [text]="'Text'" [color]="color" [variant]="variant" [icon]="colorToIconMap[color]" />
+            <tedi-status-badge ${argsToTemplate(args)} [color]="color" [variant]="variant" [icon]="colorToIconMap[color]" />
+          </tedi-col>
+        </tedi-row>
+      </tedi-row>
+    `,
+  }),
+};
+
+export const WithIndicator: StoryObj<StatusBadgeComponent> = {
+  render: (args) => ({
+    props: { ...args, color: "neutral", statuses, variants, statusToIconMap },
+    template: `
+    <tedi-row [cols]="1" [gapY]="3">
+      <tedi-row cols="6" [gap]="3" *ngFor="let status of statuses">
+          <tedi-col style="min-width: 5rem;">
+            <p tedi-text modifiers="bold" style="text-transform: capitalize;">{{ status }}</p>
+          </tedi-col>
+          <tedi-col *ngFor="let variant of variants" style="display: flex; gap: var(--layout-grid-gutters-16);">
+            <tedi-status-badge ${argsToTemplate(args)} [text]="'Text'" [status]="status" [variant]="variant" />
+            <tedi-status-badge ${argsToTemplate(args)} [text]="'Text'" [status]="status" [variant]="variant" [icon]="statusToIconMap[status]" />
+            <tedi-status-badge ${argsToTemplate(args)} [status]="status" [variant]="variant" [icon]="statusToIconMap[status]" />
+          </tedi-col>
+      </tedi-row>
+    </tedi-row>
+    `,
+  }),
+};
+
+export const Size: StoryObj<StatusBadgeComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row class="example-list" cols="1" style="overflow: auto;">
+        <tedi-row cols="2" gap="3" alignItems="center" class="padding-14-16 border-bottom">
+          <tedi-col style="min-width: 5rem;">
+            <p tedi-text>Default</p>
+          </tedi-col>
+          <tedi-col style="display: flex; gap: var(--layout-grid-gutters-08);">
+            <tedi-status-badge ${argsToTemplate(args)} [text]="'Draft'" />
+            <tedi-status-badge ${argsToTemplate(args)} [text]="'Draft'" [status]="'success'" />
+          </tedi-col>
+        </tedi-row>
+        <tedi-row cols="2" gap="3" alignItems="center" class="padding-14-16">
+          <tedi-col style="min-width: 5rem;">
+            <p tedi-text>Large</p>
+          </tedi-col>
+          <tedi-col style="display: flex; gap: var(--layout-grid-gutters-08);">
+            <tedi-status-badge ${argsToTemplate(args)} [text]="'Draft'" [size]="'large'" />
+            <tedi-status-badge ${argsToTemplate(args)} [text]="'Draft'" [status]="'success'" [size]="'large'" />
+          </tedi-col>
+        </tedi-row>
+      </tedi-row>
+    `,
+  }),
+};

From c2a07e2171c2acb756a9c446fcbd5edf6424d24d Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 4 Mar 2026 10:15:32 +0200
Subject: [PATCH 2/4] feat(status-badge): update angular.json #10

---
 angular.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/angular.json b/angular.json
index bbe347f17..e3cc6d5bb 100644
--- a/angular.json
+++ b/angular.json
@@ -48,7 +48,8 @@
             "outputDir": "dist/storybook-static",
             "styles": [
               "./src/styles/index",
-              "./node_modules/@tedi-design-system/core/index.scss"
+              "./node_modules/@tedi-design-system/core/index.scss",
+              "./node_modules/@tedi-design-system/core/tedi-storybook-styles.scss"
             ],
             "experimentalZoneless": true
           }

From ba986737eb5753a874152e897c98a38dd0faabf5 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 10 Mar 2026 15:56:03 +0200
Subject: [PATCH 3/4] feat(status-badge): add design review fixes #10

---
 .../tags/status-badge/status-badge.stories.ts |   3 +
 community/components/tags/tag/tag.stories.ts  |   5 +
 .../status-badge/status-badge.component.html  |   7 +-
 .../status-badge/status-badge.component.scss  |   2 +-
 .../status-badge/status-badge.component.ts    |  19 +-
 .../tags/status-badge/status-badge.stories.ts | 174 +++++++++++++-----
 6 files changed, 141 insertions(+), 69 deletions(-)

diff --git a/community/components/tags/status-badge/status-badge.stories.ts b/community/components/tags/status-badge/status-badge.stories.ts
index e8fcf65d9..9f399a269 100644
--- a/community/components/tags/status-badge/status-badge.stories.ts
+++ b/community/components/tags/status-badge/status-badge.stories.ts
@@ -141,6 +141,9 @@ const meta: Meta<StatusBadgeComponent> = {
       type: "figma",
       url: "https://www.figma.com/file/jWiRIXhHRxwVdMSimKX2FF/TEDI-Design-System-(draft)?type=design&node-id=2385-24154&m=dev",
     },
+    status: {
+      type: ["deprecated", "existsInTediReady"],
+    },
   },
 };
 export default meta;
diff --git a/community/components/tags/tag/tag.stories.ts b/community/components/tags/tag/tag.stories.ts
index da4182fd3..4dd004017 100644
--- a/community/components/tags/tag/tag.stories.ts
+++ b/community/components/tags/tag/tag.stories.ts
@@ -63,6 +63,11 @@ export default {
       },
     },
   },
+  parameters: {
+    status: {
+      type: ["deprecated", "existsInTediReady"],
+    },
+  },
 } as Meta<TagComponent>;
 
 type Story = StoryObj<TagComponent>;
diff --git a/tedi/components/tags/status-badge/status-badge.component.html b/tedi/components/tags/status-badge/status-badge.component.html
index 597e42885..936e89337 100644
--- a/tedi/components/tags/status-badge/status-badge.component.html
+++ b/tedi/components/tags/status-badge/status-badge.component.html
@@ -21,12 +21,7 @@
 
 <ng-template #statusBadgeContent>
   @if (icon()) {
-    <tedi-icon
-      class="tedi-status-badge__icon"
-      [name]="icon()"
-      [color]="mapBadgeColorToIconColor()"
-      [size]="16"
-    />
+    <tedi-icon class="tedi-status-badge__icon" [name]="icon()" [size]="16" />
   }
 
   @if (text()) {
diff --git a/tedi/components/tags/status-badge/status-badge.component.scss b/tedi/components/tags/status-badge/status-badge.component.scss
index 529e1d809..6ac56b4c7 100644
--- a/tedi/components/tags/status-badge/status-badge.component.scss
+++ b/tedi/components/tags/status-badge/status-badge.component.scss
@@ -91,7 +91,7 @@ $badge-status-colors: ("inactive", "success", "danger", "warning");
     }
   }
 
-  &__icon {
+  .tedi-status-badge__icon {
     color: inherit;
   }
 
diff --git a/tedi/components/tags/status-badge/status-badge.component.ts b/tedi/components/tags/status-badge/status-badge.component.ts
index 3cc35e55e..09d318ae7 100644
--- a/tedi/components/tags/status-badge/status-badge.component.ts
+++ b/tedi/components/tags/status-badge/status-badge.component.ts
@@ -7,7 +7,7 @@ import {
   computed,
   inject,
 } from "@angular/core";
-import { IconComponent, IconColor } from "@tedi-design-system/angular/tedi";
+import { IconComponent } from "@tedi-design-system/angular/tedi";
 import { _IdGenerator } from "@angular/cdk/a11y";
 
 export type StatusBadgeColor =
@@ -111,23 +111,6 @@ export class StatusBadgeComponent {
     return classList;
   });
 
-  mapBadgeColorToIconColor = computed((): IconColor => {
-    switch (this.color()) {
-      case "brand":
-        return "brand-dark";
-      case "success":
-        return "success";
-      case "accent":
-        return "secondary";
-      case "danger":
-        return "danger";
-      case "warning":
-        return "warning-dark";
-      default:
-        return "primary";
-    }
-  });
-
   ariaLive = computed(() => {
     if (this.role() === "alert") {
       return "assertive";
diff --git a/tedi/components/tags/status-badge/status-badge.stories.ts b/tedi/components/tags/status-badge/status-badge.stories.ts
index f9843aa1b..9db59e673 100644
--- a/tedi/components/tags/status-badge/status-badge.stories.ts
+++ b/tedi/components/tags/status-badge/status-badge.stories.ts
@@ -14,11 +14,11 @@ import {
   StatusBadgeStatus,
   StatusBadgeVariant,
 } from "./status-badge.component";
-
-/**
- * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.37.57?m=dev&node-id=5784-114506" target="_blank">Figma ↗</a><br />
- * <a href="https://www.tedi.ee/1ee8444b7/p/764a67-status-badge" target="_blank">Zeroheight ↗</a><br /><br />
- */
+import {
+  TooltipComponent,
+  TooltipContentComponent,
+  TooltipTriggerComponent,
+} from "tedi/components/overlay/tooltip";
 
 const colors: StatusBadgeColor[] = [
   "neutral",
@@ -69,6 +69,11 @@ const statusToIconMap: Partial<Record<StatusBadgeStatus, string>> = {
   danger: "error",
 };
 
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.37.57?m=dev&node-id=5784-114506" target="_blank">Figma ↗</a><br />
+ * <a href="https://www.tedi.ee/1ee8444b7/p/764a67-status-badge" target="_blank">Zeroheight ↗</a><br /><br />
+ */
+
 export default {
   title: "TEDI-Ready/Components/Tags/StatusBadge",
   decorators: [
@@ -80,6 +85,9 @@ export default {
         ButtonComponent,
         RowComponent,
         ColComponent,
+        TooltipComponent,
+        TooltipTriggerComponent,
+        TooltipContentComponent,
       ],
     }),
   ],
@@ -182,19 +190,82 @@ export const Default: StoryObj<StatusBadgeComponent> = {
   }),
 };
 
+export const Size: StoryObj<StatusBadgeComponent> = {
+  render: () => ({
+    template: `
+      <tedi-row class="example-list" cols="1">
+        <tedi-row
+          [cols]="1"
+          [sm]="{ cols: 2 }"
+          gap="3"
+          alignItems="center"
+          class="padding-14-16 border-bottom"
+        >
+          <tedi-col>
+            <p tedi-text>Default</p>
+          </tedi-col>
+          <tedi-col style="display: flex; flex-wrap: wrap; gap: var(--layout-grid-gutters-08);">
+            <tedi-status-badge [text]="'Draft'" />
+            <tedi-status-badge [text]="'Draft'" [status]="'success'" />
+          </tedi-col>
+        </tedi-row>
+        <tedi-row
+          [cols]="1"
+          [sm]="{ cols: 2 }"
+          gap="3"
+          alignItems="center"
+          class="padding-14-16"
+        >
+          <tedi-col>
+            <p tedi-text>Large</p>
+          </tedi-col>
+          <tedi-col style="display: flex; flex-wrap: wrap; gap: var(--layout-grid-gutters-08);">
+            <tedi-status-badge [text]="'Draft'" [size]="'large'" />
+            <tedi-status-badge [text]="'Draft'" [status]="'success'" [size]="'large'" />
+          </tedi-col>
+        </tedi-row>
+      </tedi-row>
+    `,
+  }),
+};
+
 export const Colors: StoryObj<StatusBadgeComponent> = {
-  render: (args) => ({
-    props: { ...args, demoColors, variants, colorToIconMap },
+  render: () => ({
+    props: { demoColors, variants, colorToIconMap },
     template: `
       <tedi-row [cols]="1" [gapY]="3">
-        <tedi-row cols="6" [gap]="3" *ngFor="let color of demoColors">
-          <tedi-col style="min-width: 5rem;">
+        <tedi-row
+          *ngFor="let color of demoColors"
+          [cols]="1"
+          [sm]="{ cols: 12 }"
+          [gap]="3"
+        >
+          <tedi-col [width]="12" [sm]="{ width: 2 }">
             <p tedi-text modifiers="bold" style="text-transform: capitalize;">{{ color }}</p>
           </tedi-col>
-          <tedi-col *ngFor="let variant of variants" style="display: flex; gap: var(--layout-grid-gutters-16);">
-            <tedi-status-badge ${argsToTemplate(args)} [text]="'Text'" [color]="color" [variant]="variant" />
-            <tedi-status-badge ${argsToTemplate(args)} [text]="'Text'" [color]="color" [variant]="variant" [icon]="colorToIconMap[color]" />
-            <tedi-status-badge ${argsToTemplate(args)} [color]="color" [variant]="variant" [icon]="colorToIconMap[color]" />
+          <tedi-col
+            [width]="12"
+            [sm]="{ width: 10 }"
+            style="display: flex; flex-wrap: wrap; gap: var(--layout-grid-gutters-16);"
+          >
+            <ng-container *ngFor="let variant of variants">
+              <tedi-status-badge
+                [text]="'Text'"
+                [color]="color"
+                [variant]="variant"
+              />
+              <tedi-status-badge
+                [text]="'Text'"
+                [color]="color"
+                [variant]="variant"
+                [icon]="colorToIconMap[color]"
+              />
+              <tedi-status-badge
+                [color]="color"
+                [variant]="variant"
+                [icon]="colorToIconMap[color]"
+              />
+            </ng-container>
           </tedi-col>
         </tedi-row>
       </tedi-row>
@@ -203,18 +274,41 @@ export const Colors: StoryObj<StatusBadgeComponent> = {
 };
 
 export const WithIndicator: StoryObj<StatusBadgeComponent> = {
-  render: (args) => ({
-    props: { ...args, color: "neutral", statuses, variants, statusToIconMap },
+  render: () => ({
+    props: { color: "neutral", statuses, variants, statusToIconMap },
     template: `
     <tedi-row [cols]="1" [gapY]="3">
-      <tedi-row cols="6" [gap]="3" *ngFor="let status of statuses">
-          <tedi-col style="min-width: 5rem;">
-            <p tedi-text modifiers="bold" style="text-transform: capitalize;">{{ status }}</p>
-          </tedi-col>
-          <tedi-col *ngFor="let variant of variants" style="display: flex; gap: var(--layout-grid-gutters-16);">
-            <tedi-status-badge ${argsToTemplate(args)} [text]="'Text'" [status]="status" [variant]="variant" />
-            <tedi-status-badge ${argsToTemplate(args)} [text]="'Text'" [status]="status" [variant]="variant" [icon]="statusToIconMap[status]" />
-            <tedi-status-badge ${argsToTemplate(args)} [status]="status" [variant]="variant" [icon]="statusToIconMap[status]" />
+      <tedi-row
+        *ngFor="let status of statuses"
+        [cols]="1"
+        [sm]="{ cols: 12 }"
+        [gap]="3"
+      >
+        <tedi-col [width]="12" [sm]="{ width: 2 }">
+          <p tedi-text modifiers="bold" style="text-transform: capitalize;">{{ status }}</p>
+        </tedi-col>
+        <tedi-col
+          [width]="12"
+          [sm]="{ width: 10 }"
+          style="display: flex; flex-wrap: wrap; gap: var(--layout-grid-gutters-16);"
+        >
+          <ng-container *ngFor="let variant of variants">
+            <tedi-status-badge
+              [text]="'Text'"
+              [status]="status"
+              [variant]="variant" />
+            <tedi-status-badge
+              [text]="'Text'"
+              [status]="status"
+              [variant]="variant"
+              [icon]="statusToIconMap[status]"
+            />
+            <tedi-status-badge
+              [status]="status"
+              [variant]="variant"
+              [icon]="statusToIconMap[status]"
+            />
+          </ng-container>
           </tedi-col>
       </tedi-row>
     </tedi-row>
@@ -222,30 +316,22 @@ export const WithIndicator: StoryObj<StatusBadgeComponent> = {
   }),
 };
 
-export const Size: StoryObj<StatusBadgeComponent> = {
+export const WithTooltip: StoryObj<StatusBadgeComponent> = {
+  args: {
+    icon: "warning",
+    color: "warning",
+  },
   render: (args) => ({
     props: args,
     template: `
-      <tedi-row class="example-list" cols="1" style="overflow: auto;">
-        <tedi-row cols="2" gap="3" alignItems="center" class="padding-14-16 border-bottom">
-          <tedi-col style="min-width: 5rem;">
-            <p tedi-text>Default</p>
-          </tedi-col>
-          <tedi-col style="display: flex; gap: var(--layout-grid-gutters-08);">
-            <tedi-status-badge ${argsToTemplate(args)} [text]="'Draft'" />
-            <tedi-status-badge ${argsToTemplate(args)} [text]="'Draft'" [status]="'success'" />
-          </tedi-col>
-        </tedi-row>
-        <tedi-row cols="2" gap="3" alignItems="center" class="padding-14-16">
-          <tedi-col style="min-width: 5rem;">
-            <p tedi-text>Large</p>
-          </tedi-col>
-          <tedi-col style="display: flex; gap: var(--layout-grid-gutters-08);">
-            <tedi-status-badge ${argsToTemplate(args)} [text]="'Draft'" [size]="'large'" />
-            <tedi-status-badge ${argsToTemplate(args)} [text]="'Draft'" [status]="'success'" [size]="'large'" />
-          </tedi-col>
-        </tedi-row>
-      </tedi-row>
+      <tedi-tooltip>
+        <tedi-tooltip-trigger>
+          <tedi-status-badge ${argsToTemplate(args)} />
+        </tedi-tooltip-trigger>
+        <tedi-tooltip-content>
+          Icon-only badges should always have a tooltip to provide context and ensure accessibility.
+        </tedi-tooltip-content>
+      </tedi-tooltip>
     `,
   }),
 };

From 1719f77605a353c4061b3750905882cd9a119797 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 10 Mar 2026 16:08:37 +0200
Subject: [PATCH 4/4] feat(status-badge): remove unnecessary test #10

---
 .../status-badge.component.spec.ts            | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/tedi/components/tags/status-badge/status-badge.component.spec.ts b/tedi/components/tags/status-badge/status-badge.component.spec.ts
index cb796fc7b..43eae2407 100644
--- a/tedi/components/tags/status-badge/status-badge.component.spec.ts
+++ b/tedi/components/tags/status-badge/status-badge.component.spec.ts
@@ -105,25 +105,6 @@ describe("StatusBadgeComponent", () => {
     );
   });
 
-  it("should compute mapBadgeColorToIconColor correctly", () => {
-    const colors: Record<string, string> = {
-      neutral: "primary",
-      brand: "brand-dark",
-      accent: "secondary",
-      success: "success",
-      danger: "danger",
-      warning: "warning-dark",
-      transparent: "primary",
-    };
-
-    for (const [color, expectedIconColor] of Object.entries(colors)) {
-      fixture.componentRef.setInput("color", color);
-      fixture.detectChanges();
-
-      expect(component.mapBadgeColorToIconColor()).toBe(expectedIconColor);
-    }
-  });
-
   it("should include custom class in computed classes", () => {
     fixture.componentRef.setInput("class", "custom-class");
     fixture.detectChanges();