@repobit/dex-system-design 0.25.11 → 0.26.0

package/src/components/awards/awards-flex.css.js

@@ -1,4 +1,5 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export const awardsFlexCSS = css`
   .bd-awardsflex-root {
@@ -8,22 +9,57 @@ export const awardsFlexCSS = css`
     gap: var(--spacing-8);
     width: 100%;
     box-sizing: border-box;
-    padding: var(--spacing-32);
-    border-radius: var(--radius-2xl, 16px);
+    padding-block: var(--spacing-32);
+    border-radius: var(--radius-2xl);
     text-align: center;
     font-family: var(--typography-fontFamily-sans);
     min-height: var(--bd-awardsflex-min-height, 320px);
   }
 
   .bd-awardsflex-root--white {
-    background: var(--color-neutral-0, #fff);
-    border: var(--spacing-2) solid var(--color-blue-50);
-    border-radius: var(--spacing-20);
-    padding: var(--spacing-64) var(--spacing-32) var(--spacing-64) var(--spacing-32);
+    background: var(--color-surface-default);
+    /* --border-width-2, not --spacing-2. Same 2px at a 16px root and not the
+       same thing: --spacing-* is rem and --border-width-* is px, so this edge
+       measured 3px for a reader at a 24px root while every other border in the
+       package held still. A border width is a fixed optical weight, not a
+       distance that should grow with the text it surrounds -- the same
+       argument CLAUDE.md makes for the carousel arrow, running the other way.
+
+       --color-border-container for the colour, and --color-blue-50 was the
+       second half of the same problem: a primitive doing a border role's job.
+       No border role resolves to blue-50 -- the three roles that carry that
+       value are all SURFACES, so adopting one would have been the category
+       error CLAUDE.md names outright. This is the role five other
+       edge-drawing objects in the package already use.
+
+       Measured against the page ground this section sits on:
+
+         --color-blue-50          1.080:1   the primitive, today
+         --color-border-container 1.287:1   the role, and the smallest change
+         --color-border-subtle    1.664:1
+         --status-brand-border    1.727:1   a real BRAND border role
+         --color-border-brand     4.534:1
+
+       --status-brand-border was the interesting alternative, because it keeps
+       the blue and is a legitimate border role. Rejected on two counts: it
+       would make this the only section in the package with a brand-coloured
+       frame, a fresh divergence rather than a fix, and at 1.727:1 it is a far
+       larger visible change than the defect warrants.
+
+       The blue was probably meant to echo the tint variant, whose ground is
+       this same blue-50 -- but that echo does no perceptual work. Looked at on
+       screen, a 1.080:1 edge on white reads as a faint neutral hairline with no
+       blue in it, so what is lost is a relationship nobody can see and what is
+       gained is a line that means something. Visible: the hairline becomes
+       slightly more definite. */
+    border: var(--border-width-2) solid var(--color-border-container);
+    border-radius: var(--radius-2xl);
+    padding-block: var(--spacing-64);
   }
 
-  .bd-awardsflex-root--tint {
-    background: var(--color-blue-50, #eef4ff);
+  /* the tint runs full-bleed on the host; the root inside it is the column */
+  :host([background="tint"]) {
+    background: var(--status-brand-surface);
   }
 
   /* === LAUREL ICON (always centered, above the headline) === */
@@ -31,6 +67,19 @@ export const awardsFlexCSS = css`
     display: flex;
     align-items: center;
     justify-content: center;
+    /* no role: the laurel wreath, same decision as awards.css.js's laurel and
+       as highlight.css.js's deco shapes -- ornament, so an ink role is the
+       wrong family. This div is a currentColor carrier for bd-laurel-icon or a
+       slotted mark.
+       .
+       --color-blue-500 is the brand blue, and a primitive because no blue-500
+       role means ink: they are all surfaces, borders, actions, the indicator
+       underline, or status fills.
+       .
+       This one sits on both grounds the component has. Against the white root,
+       6.18:1 -> 4.53:1; against the tint variant's blue-50 host, 5.72:1 ->
+       4.20:1. Both clear the 3:1 non-text minimum, and a decorative graphic
+       has no minimum at all. */
     color: var(--color-blue-500);
     margin-bottom: var(--spacing-8);
   }
@@ -44,12 +93,11 @@ export const awardsFlexCSS = css`
 }
 
 .bd-awardsflex-headline {
-  color: var(--color-neutral-1000);
   margin: 0;
 }
 
 .bd-awardsflex-subtext {
-  color: var(--color-neutral-600);
+  color: var(--color-text-muted);
   max-width: 640px;
   margin: 0;   /* was: margin: 0 0 var(--spacing-8); */
 }
@@ -114,44 +162,182 @@ export const awardsFlexCSS = css`
   }
 
   .bd-awardsflex-quote-text {
-    font-size: var(--typography-fontSize-sm);
+    /* A pull quote is supporting body copy, and it wraps -- three lines at the
+       widths this renders at. It was asking for the 14px primitive and taking
+       its leading from whatever it sat inside, which was the browser's own. */
+    font-size: var(--typography-body-small-fontSize);
+    font-weight: var(--typography-body-small-fontWeight);
+    line-height: var(--typography-body-small-lineHeight);
+    letter-spacing: var(--typography-body-small-letterSpacing);
+    font-family: var(--typography-body-small-fontFamily);
     font-style: italic;
-    color: var(--color-neutral-800);
+    /* Pull quote: supporting, not primary. */
+    color: var(--color-text-secondary);
     margin: 0;
   }
 
   .bd-awardsflex-quote-source {
+    /* no role: 12px text that no role in the vocabulary describes. The checker
+       recommends body-xsmall here and that recommendation is wrong, which is
+       worth writing down because it has recurred through the NEEDS_ROLE and
+       HAS_ROLE batches: body-xsmall declares fontSize and nothing else, so it
+       matches ANY one-axis 12px declaration trivially, on size alone. It is not
+       an incomplete role waiting to be finished -- tokens.js says it is
+       deliberately size-only, and it exists for bd-p variant="xsmall", which
+       composes it with body-small's weight, leading and tracking. This element
+       is not a bd-p, so borrowing that token would claim a composition it has
+       no half of.
+       .
+       The complete roles at this step do not fit either. label-small,
+       caption-default and caption-small all declare fontFamily-sans, and four
+       of the five sites this argument covers are IBM Plex Mono -- adopting one
+       would change the face. caption-default additionally declares a colour,
+       the only role in the vocabulary that does.
+       .
+       So: the size stays a primitive and says why. The other four sites are
+       .bd-headercode-breadcrumb, .bd-headercode-badge,
+       .bd-terminalmsg-panel-label and .bd-terminalmsg-hint. */
     font-size: var(--typography-fontSize-xs);
-    color: var(--color-neutral-500);
+    /* same as the quick-answer labels: subtle reads at 4.33:1 on this tint. */
+    color: var(--color-text-muted);
     margin: 0;
   }
 
   /* === DOTS === */
+  /* Dots and the pause control share one row; the dots keep their own spacing
+     so the treatment is unchanged when no control is shown. */
+  .bd-awardsflex-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-16);
+  }
+
   .bd-awardsflex-dots {
     display: flex;
-    gap: var(--spacing-8);
+    /* The buttons below carry their own 24px of target, so the space between
+       two dots now comes from the boxes rather than from a gap. Adding one on
+       top would push them apart without making either easier to hit. */
+    gap: 0;
+    margin-top: var(--spacing-8);
+  }
+
+  .bd-awardsflex-autoplay-toggle {
     margin-top: var(--spacing-8);
+    padding: var(--spacing-2) var(--spacing-8);
+    background: transparent;
+    border: var(--border-width-1) solid var(--color-border-default);
+    border-radius: var(--radius-full);
+    color: var(--color-text-muted);
+    font-family: var(--typography-fontFamily-sans);
+    /* no role: four roles sit at this size and each fails differently, so the
+       size stays a primitive. Note the weight is not declared here at all --
+       it inherits 400 -- which is why two of these are about what adopting a
+       role would ADD.
+       .
+       caption-default matches every value exactly, including the colour token:
+       xs / 400 / 1.5 / tracking 0 / sans, and its own colour axis is
+       --color-text-muted, which is what this rule already declares two lines
+       up. It renders as the same pixels. It is declined anyway, because
+       vertical-rhythm.stories.js documents it as "text under an image or a
+       figure" and this is the visible label of a toggle button. A
+       five-axis-plus-colour identity is the most seductive form of choosing a
+       role by its value rather than its meaning -- not an exemption from
+       CLAUDE.md's rule against that, but the case the rule is for.
+       .
+       caption-small carries the same wrong meaning and adds
+       letterSpacing-wide, which has no job on a five-letter word.
+       .
+       label-small is the right family -- "a small label: a badge, a tag, a
+       field hint" -- but the wrong result: it would declare a weight of 500
+       where nothing is declared today, and add wide tracking, making the
+       control bolder and 2.2px wider. This control is deliberately recessive:
+       muted, 2px of vertical padding, sitting beside the carousel dots as
+       chrome whose job is not to compete with the quote cards. Adopting a role
+       should not invert that.
+       .
+       control-label-small is the right meaning -- built for the name of a
+       control -- and fails on the leading. See the line below. */
+    font-size: var(--typography-fontSize-xs);
+    /* no role: and this leading in particular cannot move. The line box is
+       18px, which with 2px of padding and a 1px border makes the button
+       exactly 24px -- the same 24px as the .bd-awardsflex-dot buttons it shares
+       a row with, which are 24 square deliberately for the WCAG 2.5.8 target
+       size the comment further down explains.
+       .
+       control-label-small would take the line box to 15px and the button to
+       21px, misaligning it from the dots. Its tight leading exists for controls
+       whose height is DERIVED from padding + fontSize x lineHeight, the way
+       form-field computes one. This button's height is not derived -- it is
+       matched to a sibling. So the constraint is a pixel alignment between two
+       controls in one row, and nothing else in this file says so: a later pass
+       adopting control-label-small on meaning alone would quietly break the
+       row. */
+    line-height: var(--typography-lineHeight-normal);
+    cursor: pointer;
+  }
+
+  .bd-awardsflex-autoplay-toggle:hover {
+    color: var(--color-text-primary);
+    border-color: var(--color-border-strong);
+  }
+
+  .bd-awardsflex-autoplay-toggle:focus-visible {
+    /* the one focus ring — see Foundations/Focus */
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+    border-radius: var(--focus-outline-radius);
   }
 
+  /* An 8px dot was an 8px target, which is a third of what WCAG 2.5.8 asks and
+     close enough to its neighbour that the 24px circles would have overlapped
+     as well. The button is the target and the dot is only what you see, so the
+     button is 24 square and the dot is drawn inside it at the size it always
+     was. Nothing about the component looks bigger; the part you can hit does. */
   .bd-awardsflex-dot {
+    width: var(--dimension-24);
+    height: var(--dimension-24);
+    display: grid;
+    place-items: center;
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .bd-awardsflex-dot::before {
+    content: "";
     width: var(--spacing-8);
     height: var(--spacing-8);
     border-radius: 50%;
-    border: none;
     background: var(--color-neutral-300);
-    padding: 0;
-    cursor: pointer;
-    transition: background 0.2s ease, transform 0.2s ease;
+    transition: background var(--transition-duration-normal) var(--transition-easing-ease),
+      transform var(--transition-duration-normal) var(--transition-easing-ease);
   }
 
-  .bd-awardsflex-dot.active {
-    background: var(--color-blue-500);
+  .bd-awardsflex-dot.active::before {
+    /* The current slide's mark, and it takes the indicator role now that the
+       role is not named for a shape. --indicator-color IS blue-500, so nothing
+       moves; what changes is that this dot and the tab/nav underlines can no
+       longer drift apart, which is the reason the role exists.
+       .
+       The geometry stays local on purpose: an underline slides its width, a dot
+       scales, so --indicator-underline-height and its transition are not this
+       component's to borrow. */
+    background: var(--indicator-color);
     transform: scale(1.2);
   }
 
-  @media (max-width: 599px) {
+  .bd-awardsflex-dot:focus-visible {
+    /* the one focus ring — see Foundations/Focus. It follows the target, not
+       the dot, so keyboard focus is visible at the size the button really is. */
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+    border-radius: var(--radius-full);
+  }
+
+  @media ${unsafeCSS(below('sm'))} {
     .bd-awardsflex-root {
-      padding: var(--spacing-24);
+      padding-block: var(--spacing-24);
       gap: var(--spacing-8);
       min-height: var(--bd-awardsflex-min-height-mobile, 280px);
     }

package/src/components/awards/awards-flex.js

@@ -8,14 +8,17 @@ import "../icons/pc-mag-business-icon.js";
 import "../icons/pc-mag-icon.js";
 import "../icons/pc-mag-readers-icon.js";
 import "../icons/top-product-icon.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
 import { awardsFlexCSS } from "./awards-flex.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 
 
 const GROUP_SIZE = 3; // how many quote cards are visible per carousel page
 
 export class AwardsFlex extends LitElement {
   static properties = {
-    background   : { type: String },
+    background   : { type: String, reflect: true },
     layout       : { type: String },
     carousel     : { type: Boolean },
     autoplay     : { type: Boolean },
@@ -24,10 +27,12 @@ export class AwardsFlex extends LitElement {
     subtext      : { type: String },
     badges       : { type: Array },
     _slide       : { state: true },
-    _paused      : { state: true }
+    _paused      : { state: true },
+    _userStopped : { state: true },
+    _reduceMotion: { state: true }
   };
 
-  static styles = [tokens, awardsFlexCSS];
+  static styles = [tokens, ensembleCSS, awardsFlexCSS];
 
   constructor() {
     super();
@@ -41,16 +46,31 @@ export class AwardsFlex extends LitElement {
     this.badges = [];
     this._slide = 0;
     this._paused = false;
+    /* Hover/focus pause is transient. A user who presses Stop means it, and
+       must not have it undone by the pointer leaving the carousel — so the two
+       are separate pieces of state. */
+    this._userStopped = false;
+    this._reduceMotion = false;
     this._timer = null;
   }
 
   connectedCallback() {
     super.connectedCallback();
+    /* WCAG 2.2.2: content that moves on its own must be pausable, and under
+       prefers-reduced-motion it should not start at all. Watched rather than
+       read once, so a reader who changes the setting is honoured live. */
+    if (typeof window !== "undefined" && window.matchMedia) {
+      this._motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+      this._reduceMotion = this._motionQuery.matches;
+      this._onMotionChange = () => { this._reduceMotion = this._motionQuery.matches; };
+      this._motionQuery.addEventListener("change", this._onMotionChange);
+    }
     this._maybeStartAutoplay();
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this._motionQuery?.removeEventListener("change", this._onMotionChange);
     this._stopAutoplay();
   }
 
@@ -60,7 +80,9 @@ export class AwardsFlex extends LitElement {
       changed.has("carousel") ||
       changed.has("layout") ||
       changed.has("badges") ||
-      changed.has("_paused")
+      changed.has("_paused") ||
+      changed.has("_userStopped") ||
+      changed.has("_reduceMotion")
     ) {
       // if the badge set shrank, make sure the current slide index is still valid
       if (this._slide >= this._slidesCount) {
@@ -90,7 +112,9 @@ export class AwardsFlex extends LitElement {
       this.carousel &&
       this.layout === "quotes" &&
       this._slidesCount > 1 &&
-      !this._paused;
+      !this._paused &&
+      !this._userStopped &&
+      !this._reduceMotion;
 
     if (!canAutoplay) return;
 
@@ -114,6 +138,15 @@ export class AwardsFlex extends LitElement {
     if (this.autoplay) this._paused = false;
   }
 
+  _toggleAutoplay() {
+    this._userStopped = !this._userStopped;
+  }
+
+  /** True when the carousel is actually able to move on its own. */
+  get _autoplayOffered() {
+    return this.autoplay && this.carousel && this.layout === "quotes" && this._slidesCount > 1;
+  }
+
   _goTo(i) {
     this._slide = i;
   }
@@ -169,9 +202,33 @@ export class AwardsFlex extends LitElement {
     `;
   }
 
+  /**
+   * The pause/stop control WCAG 2.2.2 requires of anything that starts moving
+   * on its own and keeps going. Hovering or focusing the carousel already
+   * paused it, but that is not a mechanism a keyboard or touch user can rely
+   * on, and it cannot express "leave it stopped".
+   *
+   * Its name states the action it performs, which is what a screen reader
+   * announces on focus. It sits beside the dots rather than inside them: that
+   * container is a tablist and a plain button is not a valid child of one.
+   */
+  _renderAutoplayToggle() {
+    if (!this._autoplayOffered) return nothing;
+    const stopped = this._userStopped || this._reduceMotion;
+    return html`
+      <button
+        type="button"
+        class="bd-awardsflex-autoplay-toggle"
+        @click=${this._toggleAutoplay}
+        aria-label=${stopped ? "Play slideshow" : "Pause slideshow"}
+      >${stopped ? "Play" : "Pause"}</button>
+    `;
+  }
+
   _renderDots() {
     if (!this.carousel || this._slidesCount < 2) return nothing;
     return html`
+      <div class="bd-awardsflex-controls">
       <div class="bd-awardsflex-dots" role="tablist" aria-label="Slide navigation">
         ${this._groups.map(
           (_, i) => html`
@@ -185,6 +242,8 @@ export class AwardsFlex extends LitElement {
           `
         )}
       </div>
+      ${this._renderAutoplayToggle()}
+      </div>
     `;
   }
 
@@ -227,7 +286,7 @@ export class AwardsFlex extends LitElement {
   }
 
   render() {
-    const rootClasses = `bd-awardsflex-root bd-awardsflex-root--${this.background} bd-awardsflex-root--${this.layout}`;
+    const rootClasses = `bd-ensemble bd-awardsflex-root bd-awardsflex-root--${this.background} bd-awardsflex-root--${this.layout}`;
 
     return html`
     <section class="${rootClasses}" aria-label="Awards and recognition">
@@ -239,7 +298,7 @@ export class AwardsFlex extends LitElement {
                 ? html`<bd-h as="h3" class="bd-awardsflex-headline">${this.headline}</bd-h>`
                 : nothing}
               ${this.subtext
-                ? html`<bd-p kind="large" class="bd-awardsflex-subtext">${this.subtext}</bd-p>`
+                ? html`<bd-p variant="large" class="bd-awardsflex-subtext">${this.subtext}</bd-p>`
                 : nothing}
             </div>
           `

package/src/components/awards/awards-flex.stories.js

@@ -4,7 +4,7 @@ import "../paragraph/paragraph.js";
 import "./awards-flex.js";
 
 export default {
-  title     : "Components/Awards Flex",
+  title     : "Modules/Awards Flex",
   component : "bd-awards-flex",
   tags      : ["autodocs"],
   parameters: {

package/src/components/awards/{awards-light.stories.js → awards-summary.stories.js}

@@ -3,23 +3,24 @@ import "../heading/heading.js";
 import "../image/image.js";
 import "../link/link.js";
 import "../paragraph/paragraph.js";
-import "./awards-light.js";
 import "./awards.js";
 
 export default {
-  title     : "Components/Awards Section Light",
-  component : "bd-awards-section-light",
+  title     : "Modules/Awards Section — Summary",
+  component : "bd-awards-section",
   tags      : ["autodocs"],
   parameters: {
     layout: "fullscreen",
     docs  : {
       description: {
         component: `
-**AwardsSectionLight** is a lightweight variant of the AwardsSection component that renders only the trust banner and award badges — without the "What's our secret" section or feature cards.
+\`bd-awards-section\` with \`content="summary"\`: the trust banner and award badges only, without the "What's our secret" section or the feature cards.
+
+This was a separate element, \`bd-awards-section-light\`, until P6E.1B. It was a fork of the same component with the same responsibility, so the difference is now stated as content scope rather than as a second custom element.
 
 ### Usage
 \`\`\`html
-<bd-awards-section-light></bd-awards-section-light>
+<bd-awards-section content="summary"></bd-awards-section>
 \`\`\`
 
 ### Attributes
@@ -32,7 +33,7 @@ export default {
 
 ### Badge object shape
 \`\`\`js
-{ id: string, label: string, type: "red" | "dark", format: "svg", src: string }
+{ tag: string, id: string, label: string, type: "red" | "dark" }
 \`\`\`
         `
       }
@@ -58,7 +59,7 @@ export default {
       control    : "object",
       description: "Array of award badge objects",
       table      : {
-        type    : { summary: "Array<{ id, label, type, format, src }>" },
+        type    : { summary: "Array<{ tag, id, label, type }>" },
         category: "Badges"
       }
     }
@@ -74,64 +75,57 @@ const defaultArgs = {
   subtext      : "We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.",
   desktopAwards: [
     {
-      label : "PC MAG\nEDITORS' CHOICE",
-      type  : "red",
-      format: "svg",
-      src   : "/assets/pc-mag.svg",
-      id    : "pc-mag"
+      label: "PC MAG\nEDITORS' CHOICE",
+      type : "red",
+      tag  : "bd-pc-mag-icon",
+      id   : "pc-mag"
     },
     {
-      label : "AV\ncomparatives",
-      type  : "dark",
-      format: "svg",
-      src   : "/assets/av-comparatives.svg",
-      id    : "av-comparatives"
+      label: "AV\ncomparatives",
+      type : "dark",
+      tag  : "bd-av-comparatives-icon",
+      id   : "av-comparatives"
     },
     {
-      label : "Best\nBrands\n2024",
-      type  : "dark",
-      format: "svg",
-      src   : "/assets/best-brands.svg",
-      id    : "best-brands"
+      label: "Best\nBrands\n2024",
+      type : "dark",
+      tag  : "bd-best-brands-icon",
+      id   : "best-brands"
     },
     {
-      label : "PC\nChoice\n2024",
-      type  : "red",
-      format: "svg",
-      src   : "/assets/pc-mag-2024.svg",
-      id    : "pc-mag-2024"
+      label: "PC\nChoice\n2024",
+      type : "red",
+      tag  : "bd-pc-mag-2024-icon",
+      id   : "pc-mag-2024"
     },
     {
-      label : "PC MAG\nREADERS'\nCHOICE",
-      type  : "red",
-      format: "svg",
-      src   : "/assets/pc-mag-readers.svg",
-      id    : "pc-mag-readers"
+      label: "PC MAG\nREADERS'\nCHOICE",
+      type : "red",
+      tag  : "bd-pc-mag-readers-icon",
+      id   : "pc-mag-readers"
     },
     {
-      label : "PC\nBusiness\nChoice",
-      type  : "red",
-      format: "svg",
-      src   : "/assets/pc-mag-business.svg",
-      id    : "pc-mag-business"
+      label: "PC\nBusiness\nChoice",
+      type : "red",
+      tag  : "bd-pc-mag-business-icon",
+      id   : "pc-mag-business"
     },
     {
-      label : "AV\nTEST\nTOP\nPRODUCT",
-      type  : "red",
-      format: "svg",
-      src   : "/assets/top-product.svg",
-      id    : "top-product"
+      label: "AV\nTEST\nTOP\nPRODUCT",
+      type : "red",
+      tag  : "bd-top-product-icon",
+      id   : "top-product"
     }
   ]
 };
 
 const render = (args) => html`
-  <bd-awards-section-light
+  <bd-awards-section content="summary"
     .tagline=${args.tagline}
     .headline=${args.headline}
     .subtext=${args.subtext}
     .desktopAwards=${args.desktopAwards}
-  ></bd-awards-section-light>
+  ></bd-awards-section>
 `;
 
 
@@ -215,25 +209,22 @@ export const FewBadges = {
     ...defaultArgs,
     desktopAwards: [
       {
-        label : "PC MAG\nEDITORS' CHOICE",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/pc-mag.svg",
-        id    : "pc-mag"
+        label: "PC MAG\nEDITORS' CHOICE",
+        type : "red",
+        tag  : "bd-pc-mag-icon",
+        id   : "pc-mag"
       },
       {
-        label : "AV\ncomparatives",
-        type  : "dark",
-        format: "svg",
-        src   : "/assets/av-comparatives.svg",
-        id    : "av-comparatives"
+        label: "AV\ncomparatives",
+        type : "dark",
+        tag  : "bd-av-comparatives-icon",
+        id   : "av-comparatives"
       },
       {
-        label : "AV\nTEST\nTOP\nPRODUCT",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/top-product.svg",
-        id    : "top-product"
+        label: "AV\nTEST\nTOP\nPRODUCT",
+        type : "red",
+        tag  : "bd-top-product-icon",
+        id   : "top-product"
       }
     ]
   },
@@ -256,11 +247,10 @@ export const SingleBadge = {
     ...defaultArgs,
     desktopAwards: [
       {
-        label : "PC MAG\nEDITORS' CHOICE",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/pc-mag.svg",
-        id    : "pc-mag"
+        label: "PC MAG\nEDITORS' CHOICE",
+        type : "red",
+        tag  : "bd-pc-mag-icon",
+        id   : "pc-mag"
       }
     ]
   },