fix(#3648): remove edge treatment from high emphasis badges

apps/prs/angular/src/routes/bugs/3648/bug3648.component.html

@@ -0,0 +1,60 @@
+<div>
+  <h1>3648 - Badge refinements</h1>
+  <p>
+    <a
+      href="https://github.com/GovAlta/ui-components/issues/3648"
+      target="_blank"
+      rel="noopener"
+    >
+      View on GitHub
+    </a>
+  </p>
+
+  <h2>Strong emphasis badges (edge treatment should be removed)</h2>
+  <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem">
+    <goab-badge type="information" content="Information"></goab-badge>
+    <goab-badge type="success" content="Success"></goab-badge>
+    <goab-badge type="important" content="Important"></goab-badge>
+    <goab-badge type="emergency" content="Emergency"></goab-badge>
+    <goab-badge type="archived" content="Archived"></goab-badge>
+    <goab-badge type="default" content="Default"></goab-badge>
+    <goab-badge type="sky" content="Sky"></goab-badge>
+    <goab-badge type="prairie" content="Prairie"></goab-badge>
+    <goab-badge type="lilac" content="Lilac"></goab-badge>
+    <goab-badge type="pasture" content="Pasture"></goab-badge>
+    <goab-badge type="sunset" content="Sunset"></goab-badge>
+    <goab-badge type="dawn" content="Dawn"></goab-badge>
+  </div>
+
+  <h2>Strong emphasis, large size</h2>
+  <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem">
+    <goab-badge type="information" content="Information" size="large"></goab-badge>
+    <goab-badge type="success" content="Success" size="large"></goab-badge>
+    <goab-badge type="important" content="Important" size="large"></goab-badge>
+    <goab-badge type="emergency" content="Emergency" size="large"></goab-badge>
+    <goab-badge type="archived" content="Archived" size="large"></goab-badge>
+    <goab-badge type="default" content="Default" size="large"></goab-badge>
+    <goab-badge type="sky" content="Sky" size="large"></goab-badge>
+    <goab-badge type="prairie" content="Prairie" size="large"></goab-badge>
+    <goab-badge type="lilac" content="Lilac" size="large"></goab-badge>
+    <goab-badge type="pasture" content="Pasture" size="large"></goab-badge>
+    <goab-badge type="sunset" content="Sunset" size="large"></goab-badge>
+    <goab-badge type="dawn" content="Dawn" size="large"></goab-badge>
+  </div>
+
+  <h2>Subtle emphasis badges (reference, no changes needed)</h2>
+  <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem">
+    <goab-badge type="information" content="Information" emphasis="subtle"></goab-badge>
+    <goab-badge type="success" content="Success" emphasis="subtle"></goab-badge>
+    <goab-badge type="important" content="Important" emphasis="subtle"></goab-badge>
+    <goab-badge type="emergency" content="Emergency" emphasis="subtle"></goab-badge>
+    <goab-badge type="archived" content="Archived" emphasis="subtle"></goab-badge>
+    <goab-badge type="default" content="Default" emphasis="subtle"></goab-badge>
+    <goab-badge type="sky" content="Sky" emphasis="subtle"></goab-badge>
+    <goab-badge type="prairie" content="Prairie" emphasis="subtle"></goab-badge>
+    <goab-badge type="lilac" content="Lilac" emphasis="subtle"></goab-badge>
+    <goab-badge type="pasture" content="Pasture" emphasis="subtle"></goab-badge>
+    <goab-badge type="sunset" content="Sunset" emphasis="subtle"></goab-badge>
+    <goab-badge type="dawn" content="Dawn" emphasis="subtle"></goab-badge>
+  </div>
+</div>

apps/prs/angular/src/routes/bugs/3648/bug3648.component.ts

@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+import { GoabBadge } from "@abgov/angular-components";
+
+@Component({
+  standalone: true,
+  selector: "abgov-bug3648",
+  templateUrl: "./bug3648.component.html",
+  imports: [GoabBadge],
+})
+export class Bug3648Component {}

apps/prs/angular/src/routes/bugs/3648/bug3648.route.json

@@ -0,0 +1,6 @@
+{
+  "title": "Badge edge treatment",
+  "path": "bugs/3648",
+  "id": "3648",
+  "type": "bug"
+}

apps/prs/react/src/app/routes/bugs/bug3648.route.ts

@@ -0,0 +1,9 @@
+import { Bug3648Route } from "../../../routes/bugs/bug3648";
+import type { PrRouteDefinition } from "../../route-manifest";
+export default {
+  type: "bug",
+  id: "3648",
+  path: "bugs/3648",
+  title: "Badge edge treatment",
+  component: Bug3648Route,
+} satisfies PrRouteDefinition;

apps/prs/react/src/routes/bugs/bug3648.tsx

@@ -0,0 +1,106 @@
+import {
+  GoabBlock,
+  GoabText,
+  GoabDivider,
+  GoabDetails,
+  GoabLink,
+  GoabBadge,
+} from "@abgov/react-components";
+
+export function Bug3648Route() {
+  return (
+    <div>
+      <GoabText tag="h1" mt="m">
+        Bug #3648: Badge refinements
+      </GoabText>
+
+      <GoabBlock>
+        <GoabLink trailingIcon="open">
+          <a
+            href="https://github.com/GovAlta/ui-components/issues/3648"
+            target="_blank"
+            rel="noopener"
+          >
+            View on GitHub
+          </a>
+        </GoabLink>
+
+        <GoabDetails heading="Issue Description">
+          <GoabText tag="p">
+            High emphasis badges have a visible edge treatment that contrasts with the
+            badge background. This is likely an inner shadow or similar, not an actual CSS
+            border. Figma has no such treatment. Remove it from high emphasis badges.
+          </GoabText>
+        </GoabDetails>
+      </GoabBlock>
+
+      <GoabDivider mt="l" mb="l" />
+
+      <GoabText tag="h2">Test Cases</GoabText>
+
+      <GoabText tag="h3">
+        High emphasis (strong) badges - inspect for edge treatment
+      </GoabText>
+      <GoabText tag="p">
+        Each of these should have NO visible edge/border/shadow. Inspect to see what CSS
+        creates the visible edge (box-shadow on line 224 of Badge.svelte uses
+        --goa-badge-border token).
+      </GoabText>
+      <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap", marginTop: "1rem" }}>
+        <GoabBadge type="information" content="Information" />
+        <GoabBadge type="success" content="Success" />
+        <GoabBadge type="important" content="Important" />
+        <GoabBadge type="emergency" content="Emergency" />
+        <GoabBadge type="archived" content="Archived" />
+        <GoabBadge type="default" content="Default" />
+        <GoabBadge type="sky" content="Sky" />
+        <GoabBadge type="prairie" content="Prairie" />
+        <GoabBadge type="lilac" content="Lilac" />
+        <GoabBadge type="pasture" content="Pasture" />
+        <GoabBadge type="sunset" content="Sunset" />
+        <GoabBadge type="dawn" content="Dawn" />
+      </div>
+
+      <GoabDivider mt="l" mb="l" />
+
+      <GoabText tag="h3">Strong emphasis, large size</GoabText>
+      <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap", marginTop: "1rem" }}>
+        <GoabBadge type="information" content="Information" size="large" />
+        <GoabBadge type="success" content="Success" size="large" />
+        <GoabBadge type="important" content="Important" size="large" />
+        <GoabBadge type="emergency" content="Emergency" size="large" />
+        <GoabBadge type="archived" content="Archived" size="large" />
+        <GoabBadge type="default" content="Default" size="large" />
+        <GoabBadge type="sky" content="Sky" size="large" />
+        <GoabBadge type="prairie" content="Prairie" size="large" />
+        <GoabBadge type="lilac" content="Lilac" size="large" />
+        <GoabBadge type="pasture" content="Pasture" size="large" />
+        <GoabBadge type="sunset" content="Sunset" size="large" />
+        <GoabBadge type="dawn" content="Dawn" size="large" />
+      </div>
+
+      <GoabDivider mt="l" mb="l" />
+
+      <GoabText tag="h3">Subtle emphasis badges (reference, no changes needed)</GoabText>
+      <GoabText tag="p">
+        These use their own box-shadow tokens for the edge and should remain unchanged.
+      </GoabText>
+      <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap", marginTop: "1rem" }}>
+        <GoabBadge type="information" content="Information" emphasis="subtle" />
+        <GoabBadge type="success" content="Success" emphasis="subtle" />
+        <GoabBadge type="important" content="Important" emphasis="subtle" />
+        <GoabBadge type="emergency" content="Emergency" emphasis="subtle" />
+        <GoabBadge type="archived" content="Archived" emphasis="subtle" />
+        <GoabBadge type="default" content="Default" emphasis="subtle" />
+        <GoabBadge type="sky" content="Sky" emphasis="subtle" />
+        <GoabBadge type="prairie" content="Prairie" emphasis="subtle" />
+        <GoabBadge type="lilac" content="Lilac" emphasis="subtle" />
+        <GoabBadge type="pasture" content="Pasture" emphasis="subtle" />
+        <GoabBadge type="sunset" content="Sunset" emphasis="subtle" />
+        <GoabBadge type="dawn" content="Dawn" emphasis="subtle" />
+      </div>
+    </div>
+  );
+}
+
+export default Bug3648Route;

libs/react-components/specs/badge.browser.spec.tsx

@@ -0,0 +1,56 @@
+import { render } from "vitest-browser-react";
+import { GoabBadge } from "../src";
+import { expect, describe, it, vi } from "vitest";
+
+describe("Badge V2 Emphasis", () => {
+  it("should have an explicit box-shadow none rule on strong emphasis", async () => {
+    const result = render(
+      <GoabBadge testId="badge-strong" type="information" content="Strong" emphasis="strong" />,
+    );
+
+    const badge = result.getByTestId("badge-strong");
+
+    await vi.waitFor(() => {
+      const el = badge.element();
+      expect(el).toBeTruthy();
+      expect(el.classList.contains("v2")).toBe(true);
+      expect(el.classList.contains("badge-strong")).toBe(true);
+
+      // Verify the shadow DOM stylesheet has an explicit box-shadow: none rule for strong
+      const root = el.getRootNode() as ShadowRoot;
+      const sheet = root.adoptedStyleSheets?.[0] ?? root.querySelector("style")?.sheet;
+      const rules = Array.from(sheet?.cssRules ?? []);
+      const strongRule = rules.find(
+        (r) => r instanceof CSSStyleRule && r.selectorText?.includes("badge-strong"),
+      ) as CSSStyleRule | undefined;
+      expect(strongRule).toBeTruthy();
+      expect(strongRule!.style.boxShadow).toBe("none");
+    });
+  });
+
+  it("should render subtle emphasis with correct classes and shadow rule", async () => {
+    const result = render(
+      <GoabBadge testId="badge-subtle" type="information" content="Subtle" emphasis="subtle" />,
+    );
+
+    const badge = result.getByTestId("badge-subtle");
+
+    await vi.waitFor(() => {
+      const el = badge.element();
+      expect(el).toBeTruthy();
+      expect(el.classList.contains("v2")).toBe(true);
+      expect(el.classList.contains("badge-subtle")).toBe(true);
+      expect(el.classList.contains("badge-information")).toBe(true);
+
+      // Verify the shadow DOM stylesheet contains the box-shadow rule for subtle badges
+      const root = el.getRootNode() as ShadowRoot;
+      const sheet = root.adoptedStyleSheets?.[0] ?? root.querySelector("style")?.sheet;
+      const rules = Array.from(sheet?.cssRules ?? []);
+      const subtleRule = rules.find(
+        (r) => r instanceof CSSStyleRule && r.selectorText?.includes("badge-subtle") && r.selectorText?.includes("badge-information"),
+      ) as CSSStyleRule | undefined;
+      expect(subtleRule).toBeTruthy();
+      expect(subtleRule!.style.boxShadow).toContain("--goa-badge-info-subtle-border");
+    });
+  });
+});

libs/web-components/src/components/badge/Badge.spec.ts

@@ -115,6 +115,36 @@ describe("GoABadgeComponent", () => {
     });
   });
 
+  describe("V2 Emphasis", () => {
+    it(`should apply strong emphasis class in v2`, async () => {
+      const baseElement = render(GoABadge, {
+        testid: "badge-test",
+        type: "information",
+        content: "Strong",
+        version: "2",
+        emphasis: "strong",
+      });
+      const badge = await baseElement.findByTestId("badge-test");
+
+      expect(badge).toHaveClass("v2");
+      expect(badge).toHaveClass("badge-strong");
+    });
+
+    it(`should apply subtle emphasis class in v2`, async () => {
+      const baseElement = render(GoABadge, {
+        testid: "badge-test",
+        type: "information",
+        content: "Subtle",
+        version: "2",
+        emphasis: "subtle",
+      });
+      const badge = await baseElement.findByTestId("badge-test");
+
+      expect(badge).toHaveClass("v2");
+      expect(badge).toHaveClass("badge-subtle");
+    });
+  });
+
   describe("Custom Icon Type", () => {
     it(`should render custom icon type when icontype is provided`, async () => {
       const result = render(GoABadge, {
@@ -159,7 +189,7 @@ describe("GoABadgeComponent", () => {
       });
       const badge = await result.findByTestId("badge-test");
       const goaIcon = result.container.querySelector("goa-icon");
-      
+
       expect(goaIcon).toBeNull(); // No icon should be rendered
       expect(badge).toContainHTML("No Icon");
       expect(badge).toHaveClass("badge-success");

libs/web-components/src/components/badge/Badge.svelte

@@ -77,7 +77,11 @@
   type BadgeType = (typeof Types)[number];
   type BadgeSize = (typeof badgeSizes)[number];
   type BadgeVersion = (typeof versions)[number];
-  type BadgeJustifyContent = "center" | "flex-start" | "flex-end" | "space-between";
+  type BadgeJustifyContent =
+    | "center"
+    | "flex-start"
+    | "flex-end"
+    | "space-between";
 
   /** Defines the context and colour of the badge. */
   export let type: BadgeType;
@@ -384,6 +388,10 @@
     padding-bottom: 0;
   }
 
+  .v2.badge-strong {
+    box-shadow: none;
+  }
+
   /* Version 2: Default Colours */
   .v2.badge-default {
     background-color: var(--goa-badge-default-color-bg);