@repobit/dex-system-design 0.25.0 → 0.25.2

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.25.2](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.1...@repobit/dex-system-design@0.25.2) (2026-10-01)
+
+### Bug Fixes
+
+* **DEX-1014:** anchor nav component adjustments
+* **DEX-1014:** anchor nav component adjustments
+
+
+## [0.25.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.0...@repobit/dex-system-design@0.25.1) (2026-09-25)
+
+### Bug Fixes
+
+* **DEX-1014:** announcement banner component
+* **DEX-1014:** announcement banner component
+
+
 ## [0.25.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.20...@repobit/dex-system-design@0.25.0) (2026-09-25)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.25.0",
+  "version": "0.25.2",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -76,8 +76,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.37",
-    "@repobit/dex-store-elements": "2.1.7",
+    "@repobit/dex-store": "1.6.39",
+    "@repobit/dex-store-elements": "2.1.9",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "1e626106ffdf4df5443c8da6fa45fa4dae48a2c7"
+  "gitHead": "14ac669a586110a33a6f8d470e6d9ce8c11a4bd7"
 }

package/src/components/ai-guardian-demo.stories.js

@@ -93,7 +93,7 @@ function aiGuardianBody() {
         aria-label="Page sections"
         cta-label="Download BETA Today"
         cta-href="#download"
-        sticky-top="65px"
+        sticky-top="76px"
         .items=${[
           { title: "Overview" },
           { title: "Compatibility" },
@@ -500,7 +500,7 @@ function skillScannerBody() {
     <div style="max-width: 1200px; margin: 0 auto;">
       <bd-anchor-nav
         aria-label="Skill Scanner sections"
-        sticky-top="65px"
+        sticky-top="76px"
         .items=${[
           { title: "Install" },
           { title: "Overview" },
@@ -958,7 +958,7 @@ function vpnBody() {
     <div style="max-width: 1200px; margin: 0 auto;">
       <bd-anchor-nav
         aria-label="VPN for AI Agents sections"
-        sticky-top="65px"
+        sticky-top="76px"
         .items=${[
           { title: "Overview" },
           { title: "Protection" },
@@ -1444,7 +1444,7 @@ Interactive demo: sticky top-level product nav (\`AI Guardian\` / \`Skill Scanne
 navigation — clicking a tab intercepts the anchor click and swaps local state instead
 of following the href (which has no route in Storybook and would 404).
 
-Both/all anchor-nav bars use \`sticky-top="65px"\` so they pin themselves *below*
+Both/all anchor-nav bars use \`sticky-top="76px"\` so they pin themselves *below*
 the sticky page-switcher instead of overlapping it once scrolled. That value
 is an estimate — measure bd-page-switcher's real rendered height in DevTools
 and adjust if the bars still overlap or leave a gap.

package/src/components/anchor/anchor-nav.css.js

@@ -7,6 +7,8 @@ export const anchorNavStyles = css`
     background: var(--color-neutral-0);
     --bd-accesibility-focus: var(--color-blue-500);
     --anchor-nav-max-width: 1290px;
+    border-top: var(--border-width-1) solid var(--color-neutral-100);
+    border-bottom: var(--border-width-1) solid var(--color-neutral-100);
   }
 
   :host(.is-sticky) {
@@ -28,8 +30,6 @@ export const anchorNavStyles = css`
     padding: var(--spacing-0);
     width: 100%;
     box-sizing: border-box;
-    border-top: var(--border-width-1) solid var(--color-neutral-100);
-    border-bottom: var(--border-width-1) solid var(--color-neutral-100);
   }
 
   .bd-anchor-nav__inner {
@@ -46,7 +46,6 @@ export const anchorNavStyles = css`
     box-sizing: border-box;
   }
 
-  
   .anchor-link:focus-visible,
   .bd-anchor-nav__cta:focus-visible,
   .bd-anchor-nav__dropdown-toggle:focus-visible,
@@ -115,17 +114,17 @@ export const anchorNavStyles = css`
     text-decoration: none !important;
   }
 
-
-  .anchor-indicator {
+   .anchor-indicator {
     position: absolute;
     left: 0;
-    bottom: calc(-1 * var(--spacing-14));
+    top: 0;
     width: 0;
     height: var(--border-width-3);
     background-color: var(--color-blue-500);
     transform: translateX(0);
     transition:
       transform var(--transition-duration-slow) var(--transition-easing-ease-out),
+      top var(--transition-duration-slow) var(--transition-easing-ease-out),
       width var(--transition-duration-slow) var(--transition-easing-ease-out);
     pointer-events: none;
   }

package/src/components/anchor/anchor-nav.js

@@ -34,10 +34,6 @@ class BdAnchorNav extends LitElement {
     ctaHref           : { type: String, attribute: "cta-href" },
     items             : { type: Array },
     maxWidth          : { type: String, attribute: "max-width" },
-    // How far from the viewport top this nav sticks once pinned — set this
-    // to the rendered height of whatever sticky element sits above it (e.g.
-    // a page-switcher), so the two don't stack on top of each other at
-    // top:0. Accepts any CSS length, e.g. "64px", "4rem".
     stickyTop         : { type: String, attribute: "sticky-top" }
   };
 
@@ -67,10 +63,8 @@ class BdAnchorNav extends LitElement {
     this._stickyPlaceholder          = null;
     this._onStickyScroll             = null;
     this._handleResize               = this._handleResize.bind(this);
-    // sliding underline indicator: false until the first successful
-    // measurement + placement, so it doesn't visibly animate in from the
-    // left edge on first paint.
     this._indicatorReady             = false;
+    this._indicatorResizeObserver    = null;
   }
 
   connectedCallback() {
@@ -93,6 +87,7 @@ class BdAnchorNav extends LitElement {
     document.removeEventListener("pointerdown", this._onDocumentPointerDown, true);
     document.removeEventListener("keydown", this._onKeydown, true);
     this._destroySticky();
+    this._indicatorResizeObserver?.disconnect();
   }
 
   updated(changedProperties) {
@@ -100,17 +95,11 @@ class BdAnchorNav extends LitElement {
 
     if (changedProperties.has("stickyTop")) {
       this.style.setProperty("--sticky-top", this.stickyTop || "0px");
-      // the scroll-spy offset (how far to scroll past the sticky bar when
-      // clicking a link) depends on this too, since the nav's own visible
-      // top now sits lower than the viewport top while stuck.
       this._runScrollSpy();
     }
 
     if (changedProperties.has("activeId") || changedProperties.has("items")) {
-      // wait a frame so the .active class has actually painted before
-      // measuring its box — requestAnimationFrame is enough here, no need
-      // for updateComplete since nothing else in render() depends on this.
-      requestAnimationFrame(() => this._updateIndicator());
+      requestAnimationFrame(() => this._updateIndicator("updated"));
     }
 
     if (!changedProperties.has("activeId")) return;
@@ -128,13 +117,23 @@ class BdAnchorNav extends LitElement {
     }
     queueMicrotask(() => this._runScrollSpy());
     this._handleMobileFullWidth();
-    requestAnimationFrame(() => this._updateIndicator());
+    requestAnimationFrame(() => this._updateIndicator("firstUpdated"));
+
+    const links = this.renderRoot?.querySelector(".anchor-links--desktop");
+    if (links && "ResizeObserver" in window) {
+      this._indicatorResizeObserver = new ResizeObserver(() => {
+        console.log("[anchor-nav] ResizeObserver fired", {
+          isSticky : this.classList.contains("is-sticky"),
+          navRect  : this.getBoundingClientRect(),
+          linksRect: links.getBoundingClientRect()
+        });
+        this._updateIndicator("ResizeObserver");
+      });
+      this._indicatorResizeObserver.observe(links);
+      this._indicatorResizeObserver.observe(this);
+    }
   }
 
-  // Positions the sliding underline under the currently active desktop
-  // link. Reads offsetLeft/offsetWidth directly off the active bd-link —
-  // as a flex item it's block-level regardless of its own :host display,
-  // so these are reliable without any extra math against a bounding rect.
   _updateIndicator() {
     const indicator = this.renderRoot?.querySelector(".anchor-indicator");
     const activeLink = this.renderRoot?.querySelector(
@@ -144,14 +143,13 @@ class BdAnchorNav extends LitElement {
 
     const left  = activeLink.offsetLeft;
     const width = activeLink.offsetWidth;
+    const top   = activeLink.offsetTop + activeLink.offsetHeight + 14;
 
     if (!this._indicatorReady) {
-      // first placement: skip the transition so it doesn't slide in from
-      // the left edge on initial paint, then re-enable it next frame.
       indicator.style.transition = "none";
       indicator.style.transform  = `translateX(${left}px)`;
+      indicator.style.top        = `${top}px`;
       indicator.style.width      = `${width}px`;
-      // force a style flush before removing the transition override
       void indicator.offsetWidth;
       indicator.style.transition = "";
       this._indicatorReady = true;
@@ -159,12 +157,13 @@ class BdAnchorNav extends LitElement {
     }
 
     indicator.style.transform = `translateX(${left}px)`;
+    indicator.style.top       = `${top}px`;
     indicator.style.width     = `${width}px`;
   }
 
   _handleResize() {
     this._handleMobileFullWidth();
-    this._updateIndicator();
+    this._updateIndicator("windowResize");
   }
 
   _handleMobileFullWidth() {
@@ -190,14 +189,16 @@ class BdAnchorNav extends LitElement {
     this.style.setProperty("--sticky-top", this.stickyTop || "0px");
 
     this._onStickyScroll = () => {
-      const parent     = this.parentElement;
+      const parent = this.parentElement;
       if (!parent) return;
 
       const parentRect = parent.getBoundingClientRect();
       const navHeight  = this._stickyPlaceholder
         ? this._stickyPlaceholder.offsetHeight
         : this.offsetHeight;
-      const stickyTopPx = parseLengthToPx(this.stickyTop) || 0;
+      const stickyTopPx = parseLengthToPx(
+        this.style.getPropertyValue("--sticky-top") || this.stickyTop
+      ) || 0;
 
       if (this._stickyOriginalTop === null) {
         const rect = this.getBoundingClientRect();
@@ -217,8 +218,8 @@ class BdAnchorNav extends LitElement {
           }
           this.classList.add("is-sticky");
         }
-        this.style.setProperty("--sticky-left",  `${parentRect.left}px`);
-        this.style.setProperty("--sticky-width", `${parentRect.width}px`);
+        this.style.setProperty("--sticky-left",  "0px");
+        this.style.setProperty("--sticky-width", `${document.documentElement.clientWidth}px`);
       } else {
         if (this.classList.contains("is-sticky")) {
           this.classList.remove("is-sticky");
@@ -232,6 +233,15 @@ class BdAnchorNav extends LitElement {
       }
     };
 
+    this._onStickyResize = () => {
+      this._stickyOriginalTop = null;
+      if (this.classList.contains("is-sticky")) {
+        this.style.setProperty("--sticky-left",  "0px");
+        this.style.setProperty("--sticky-width", `${document.documentElement.clientWidth}px`);
+      }
+      this._onStickyScroll();
+    };
+
     this._onStickyResize = () => {
       this._stickyOriginalTop = null;
       if (this.classList.contains("is-sticky")) {

package/src/components/announcement-banner/announcement-banner.css.js

@@ -20,22 +20,21 @@ background: linear-gradient(87.6deg, var(--color-blue-500) 0%, var(--color-blue-
     gap: var(--spacing-96);
   }
 
-  .bd-announcementbanner-title {
-    display: block;
-    margin: 0;
-    color: var(--color-neutral-0, #fff);
-    line-height: var(--typography-lineHeight-tight, 1.15);
-    flex: 1 1 320px;
-    max-width: 560px;
-  }
-
+  .bd-announcementbanner-left,
   .bd-announcementbanner-side {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--spacing-16);
-    flex: 1 1 280px;
-    max-width: 360px;
+    flex: 1 1 320px;
+    max-width: 560px;
+  }
+
+  .bd-announcementbanner-title {
+    display: block;
+    margin: 0;
+    color: var(--color-neutral-0, #fff);
+    line-height: var(--typography-lineHeight-tight, 1.15);
   }
 
   .bd-announcementbanner-icon {
@@ -45,6 +44,15 @@ background: linear-gradient(87.6deg, var(--color-blue-500) 0%, var(--color-blue-
     margin-bottom: var(--spacing-4);
   }
 
+  /* Collapses to nothing when the corresponding slot has no assigned
+     content — see _onSlotChange in announcement-banner.js. */
+  .bd-announcementbanner-icon[hidden],
+  .bd-announcementbanner-buttons[hidden] {
+    display: none;
+  }
+
+  /* Left and right icon slots share the exact same sizing/style — the
+     left column is a mirror of the right one, not a different layout. */
   .bd-announcementbanner-icon ::slotted(*) {
     display: block;
     max-width: 160px;
@@ -57,6 +65,14 @@ background: linear-gradient(87.6deg, var(--color-blue-500) 0%, var(--color-blue-
     color: rgba(255, 255, 255, 0.65);
   }
 
+  .bd-announcementbanner-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-12);
+    margin-top: var(--spacing-4);
+  }
+
   @media (max-width: 699px) {
     .bd-announcementbanner-container {
       padding: var(--spacing-28) var(--spacing-24);
@@ -64,10 +80,26 @@ background: linear-gradient(87.6deg, var(--color-blue-500) 0%, var(--color-blue-
       align-items: flex-start;
     }
 
-    .bd-announcementbanner-title,
+    .bd-announcementbanner-left,
     .bd-announcementbanner-side {
       max-width: none;
       flex-basis: auto;
     }
   }
+
+    /* When left-icon is present, the left title shrinks to match the
+     default right-column description size — visual emphasis moves to
+     the right side instead. */
+  .bd-announcementbanner-title--small {
+    margin: 0;
+  }
+
+  /* Mirror case: the right description grows to the default title size
+     when it's the "big" side. */
+  .bd-announcementbanner-description--large {
+    display: block;
+    margin: 0;
+    color: var(--color-neutral-0, #fff);
+    line-height: var(--typography-lineHeight-tight, 1.15);
+  }
 `;

package/src/components/announcement-banner/announcement-banner.js

@@ -5,48 +5,108 @@ import "../paragraph/paragraph.js";
 import announcementBannerCSS from "./announcement-banner.css.js";
 
 /**
- * Simple two-column banner on a blue gradient — a title on the left, an
- * icon + description on the right. No buttons; for
- * partnership/announcement callouts (e.g. "Bitdefender joined the Global
- * Anti-Scam Alliance"), not calls to action. See bd-cta-banner for the
- * centred, button-driven variant.
+ * Simple two-column banner on a blue gradient. Two layout modes:
+ *
+ * - No left-icon (default): big title on the left, icon + small
+ *   description on the right — for partnership/announcement callouts.
+ * - With left-icon: the left column becomes the "small" side (icon +
+ *   small title, mirroring how the default right side looks) and the
+ *   right column becomes the "big" side (large description text) — i.e.
+ *   visual emphasis flips to the right when a left icon is present.
  *
  *   <bd-announcement-banner
  *     title="Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member"
-= *     description="Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
+ *     description="Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
  *   >
- *     <bd-gasa-icon slot="icon" width="140" height="40" color="#fff"></bd-gasa-icon>
+ *     <bd-picture slot="left-icon" ...></bd-picture>
+ *     <bd-button-link slot="left-buttons" ...>Learn more</bd-button-link>
  *   </bd-announcement-banner>
  */
 class BdAnnouncementBanner extends LitElement {
   static properties = {
-    title      : { type: String },
-    description: { type: String }
+    title           : { type: String },
+    description     : { type: String },
+    _hasLeftIcon    : { state: true },
+    _hasLeftButtons : { state: true },
+    _hasRightIcon   : { state: true },
+    _hasRightButtons: { state: true }
   };
 
   static styles = [tokens, announcementBannerCSS];
 
   constructor() {
     super();
-    this.title = "";
+    this.title       = "";
     this.description = "";
+    this._hasLeftIcon     = false;
+    this._hasLeftButtons  = false;
+    this._hasRightIcon    = false;
+    this._hasRightButtons = false;
+  }
+
+  // Each optional slot's wrapper is only rendered with real layout
+  // (gap/margin) when it actually has assigned content — checked via
+  // slotchange rather than CSS :empty, since a <slot> with no assigned
+  // nodes still isn't :empty as a DOM matter the same way a plain element
+  // is, and this keeps the collapse logic in one predictable place.
+  _onSlotChange(stateKey, event) {
+    const hasContent = event.target.assignedNodes({ flatten: true }).length > 0;
+    if (this[stateKey] !== hasContent) this[stateKey] = hasContent;
   }
 
   render() {
+    // When a left icon is slotted in, visual emphasis flips: the left
+    // column's title renders small (mirroring the right column's default
+    // small description), and the right column's description renders
+    // large instead (mirroring the left column's default large title).
+    const flipped = this._hasLeftIcon;
+
     return html`
       <div class="bd-announcementbanner-container">
-        <bd-h as="h2" fontWeight="400" class="bd-announcementbanner-title">
-          <slot name="title">${this.title}</slot>
-        </bd-h>
+        <div class="bd-announcementbanner-left">
+          <div class="bd-announcementbanner-icon" ?hidden=${!this._hasLeftIcon}>
+            <slot name="left-icon" @slotchange=${(e) => this._onSlotChange("_hasLeftIcon", e)}></slot>
+          </div>
+
+          ${flipped
+            ? html`
+                <bd-p kind="large" color="var(--color-neutral-0)" class="bd-announcementbanner-title bd-announcementbanner-title--small">
+                  <slot name="title">${this.title}</slot>
+                </bd-p>
+              `
+            : html`
+                <bd-h as="h2" fontWeight="400" class="bd-announcementbanner-title">
+                  <slot name="title">${this.title}</slot>
+                </bd-h>
+              `}
+
+          <div class="bd-announcementbanner-buttons" ?hidden=${!this._hasLeftButtons}>
+            <slot name="left-buttons" @slotchange=${(e) => this._onSlotChange("_hasLeftButtons", e)}></slot>
+          </div>
+        </div>
 
         <div class="bd-announcementbanner-side">
-          <div class="bd-announcementbanner-icon">
-            <slot name="icon"></slot>
+          <div class="bd-announcementbanner-icon" ?hidden=${!this._hasRightIcon}>
+            <slot name="icon" @slotchange=${(e) => this._onSlotChange("_hasRightIcon", e)}></slot>
           </div>
 
           ${this.description
-            ? html`<bd-p kind="large" color="var(--color-neutral-0)" class="bd-announcementbanner-description"><slot name="description">${this.description}</slot></bd-p>`
+            ? flipped
+              ? html`
+                  <bd-h as="h2" fontWeight="400" color="var(--color-neutral-0)" class="bd-announcementbanner-description bd-announcementbanner-description--large">
+                    <slot name="description">${this.description}</slot>
+                  </bd-h>
+                `
+              : html`
+                  <bd-p kind="large" color="var(--color-neutral-0)" class="bd-announcementbanner-description">
+                    <slot name="description">${this.description}</slot>
+                  </bd-p>
+                `
             : nothing}
+
+          <div class="bd-announcementbanner-buttons" ?hidden=${!this._hasRightButtons}>
+            <slot name="right-buttons" @slotchange=${(e) => this._onSlotChange("_hasRightButtons", e)}></slot>
+          </div>
         </div>
       </div>
     `;

package/src/components/announcement-banner/announcement-banner.stories.js

@@ -1,4 +1,5 @@
 import { html } from "lit";
+import "../button/button.js";
 import "../picture/picture.js";
 import "./announcement-banner.js";
 
@@ -14,24 +15,24 @@ export default {
         component: `
 **AnnouncementBanner** este un banner simplu, cu 2 coloane, pe fundal albastru
 gradient — titlu mare în stânga, iar în dreapta o iconiță/logo + caption +
-descriere. Nu are butoane — e gândit pentru anunțuri de tip parteneriat sau
-apartenență la o organizație, nu pentru CTA-uri.
+descriere. Coloana stângă poate primi opțional o imagine deasupra titlului
+(\`left-icon\`) și butoane sub titlu (\`left-buttons\`); coloana dreaptă poate
+primi opțional butoane sub descriere (\`right-buttons\`), pe lângă iconița
+(\`icon\`) și descrierea (\`description\`) deja existente.
 
-Pentru varianta centrată, cu butoane, vezi \`bd-cta-banner\`.
+Pentru varianta centrată, cu un singur set de butoane, vezi \`bd-cta-banner\`.
 
 ### Usage
 \`\`\`html
 <bd-announcement-banner
   title="Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member"
-  caption="Global Anti-Scam Alliance"
   description="Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
 >
-  <bd-picture
-    slot="icon"
-    .sources=\${sources}
-    .fallbackSrc=\${fallbackSrc}
-    alt="Global Anti-Scam Alliance logo"
-  ></bd-picture>
+  <bd-picture slot="left-icon" ...></bd-picture>
+  <bd-button-link slot="left-buttons" href="#" kind="outline-white">Learn more</bd-button-link>
+
+  <bd-picture slot="icon" ...></bd-picture>
+  <bd-button-link slot="right-buttons" href="#" kind="white">Read the report</bd-button-link>
 </bd-announcement-banner>
 \`\`\`
 
@@ -39,23 +40,23 @@ Pentru varianta centrată, cu butoane, vezi \`bd-cta-banner\`.
 | Attribute      | Type   | Default | Description                                              |
 |------------------|--------|----------|------------------------------------------------------------|
 | \`title\`          | String | \`""\`     | Titlul mare, afișat în coloana stângă (sau slot-ul \`title\`)  |
-| \`caption\`        | String | \`""\`     | Eticheta scurtă de deasupra descrierii, coloana dreaptă (opțional) |
 | \`description\`    | String | \`""\`     | Textul descriptiv din coloana dreaptă (sau slot-ul \`description\`) |
 
 ### Slots
-| Slot           | Description                                                      |
-|-----------------|--------------------------------------------------------------------|
-| \`icon\`          | Iconița/logo-ul din coloana dreaptă (ex: \`bd-picture\`)             |
-| \`title\`         | Suprascrie atributul \`title\` dacă are conținut                    |
-| \`caption\`       | Suprascrie atributul \`caption\` dacă are conținut                  |
-| \`description\`   | Suprascrie atributul \`description\` dacă are conținut              |
+| Slot             | Description                                                        |
+|-------------------|----------------------------------------------------------------------|
+| \`left-icon\`       | Imagine/iconiță opțională, deasupra titlului, coloana stângă         |
+| \`title\`           | Suprascrie atributul \`title\` dacă are conținut                     |
+| \`left-buttons\`    | Butoane opționale, sub titlu, coloana stângă                         |
+| \`icon\`            | Iconița/logo-ul din coloana dreaptă (ex: \`bd-picture\`)              |
+| \`description\`     | Suprascrie atributul \`description\` dacă are conținut               |
+| \`right-buttons\`   | Butoane opționale, sub descriere, coloana dreaptă                    |
         `
       }
     }
   },
   argTypes: {
     title      : { control: "text", table: { category: "Content" } },
-    caption    : { control: "text", table: { category: "Content" } },
     description: { control: "text", table: { category: "Content" } }
   }
 };
@@ -79,9 +80,9 @@ const gasaSources = [
 
 const gasaFallback = "https://main--www-websites--bitdefender.aem.page/en-us/consumer/media_1a19736be4554469877718d743401be3086dbb640.png?width=750&format=png&optimize=medium";
 
-const gasaPicture = () => html`
+const gasaPicture = (slot = "icon") => html`
   <bd-picture
-    slot="icon"
+    slot=${slot}
     .sources=${gasaSources}
     .fallbackSrc=${gasaFallback}
     alt="Global Anti-Scam Alliance logo"
@@ -97,13 +98,11 @@ export const Default = {
   name: "1. Default",
   args: {
     title      : "Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member",
-    caption    : "Global Anti-Scam Alliance",
     description: "Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
   },
   render: (args) => html`
     <bd-announcement-banner
       title=${args.title}
-      caption=${args.caption}
       description=${args.description}
     >
       ${gasaPicture()}
@@ -112,23 +111,21 @@ export const Default = {
   parameters: {
     docs: {
       description: {
-        story: "Varianta completă: titlu, caption, descriere și iconiță."
+        story: "Varianta completă: titlu, descriere și iconiță în dreapta — identică cu versiunea originală, fără elementele noi opționale."
       }
     }
   }
 };
 
 export const NoCaption = {
-  name: "2. Fără caption",
+  name: "2. Fără descriere lungă",
   args: {
     title      : "Bitdefender named a Leader in the 2026 Endpoint Protection report",
-    caption    : "",
     description: "Recognised for detection accuracy, low false-positive rate, and minimal performance impact across three consecutive evaluation cycles."
   },
   render: (args) => html`
     <bd-announcement-banner
       title=${args.title}
-      caption=${args.caption}
       description=${args.description}
     >
       ${gasaPicture()}
@@ -137,7 +134,7 @@ export const NoCaption = {
   parameters: {
     docs: {
       description: {
-        story: "Fără caption — util când titlul e suficient de descriptiv."
+        story: "Titlu + descriere + iconiță, fără sloturile noi de imagine stânga sau butoane."
       }
     }
   }
@@ -147,7 +144,6 @@ export const TitleOnly = {
   name: "3. Doar titlu",
   args: {
     title      : "Bitdefender now supports macOS Tahoe on day one",
-    caption    : "",
     description: ""
   },
   render: (args) => html`
@@ -158,7 +154,81 @@ export const TitleOnly = {
   parameters: {
     docs: {
       description: {
-        story: "Minimal — doar titlu și iconiță, fără caption sau descriere."
+        story: "Minimal — doar titlu și iconiță, fără descriere sau butoane."
+      }
+    }
+  }
+};
+
+export const WithButtonsBothSides = {
+  name: "4. Butoane pe ambele coloane",
+  args: {
+    title      : "Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member",
+    description: "Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
+  },
+  render: (args) => html`
+    <bd-announcement-banner
+      title=${args.title}
+      description=${args.description}
+    >
+      <bd-button-link slot="left-buttons" href="#" kind="white" size="sm">Learn more</bd-button-link>
+      <bd-button-link slot="left-buttons" href="#" kind="outline-white" size="sm">Our commitment</bd-button-link>
+
+      ${gasaPicture()}
+      
+      <bd-button-link slot="right-buttons" href="#" kind="outline-white" size="sm">Read the report</bd-button-link>
+    </bd-announcement-banner>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Butoane atât sub titlu (`left-buttons`) cât și sub descriere (`right-buttons`) — fiecare coloană poate avea mai multe butoane, aliniate pe rând cu wrap."
+      }
+    }
+  }
+};
+
+export const WithLeftImage = {
+  name: "5. Imagine și în stânga",
+  args: {
+    title      : "Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member",
+    description: "Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
+  },
+  render: (args) => html`
+    <bd-announcement-banner
+      title=${args.title}
+      description=${args.description}
+    >
+      ${gasaPicture("left-icon")}
+      <bd-button-link slot="left-buttons" href="#" kind="white" size="sm">Learn more</bd-button-link>
+
+    </bd-announcement-banner>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Imagine opțională deasupra titlului (`left-icon`), plus buton sub titlu — coloana stângă poate avea propriul set de imagine + text + buton, independent de coloana dreaptă."
+      }
+    }
+  }
+};
+
+export const LeftOnly = {
+  name: "6. Doar coloana stângă (fără icon/description dreapta)",
+  args: {
+    title      : "Bitdefender now supports macOS Tahoe on day one",
+    description: ""
+  },
+  render: (args) => html`
+    <bd-announcement-banner title=${args.title}>
+      ${gasaPicture("left-icon")}
+      <bd-button-link slot="left-buttons" href="#" kind="white" size="sm">Download now</bd-button-link>
+    </bd-announcement-banner>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Doar imagine + titlu + buton în stânga — coloana dreaptă rămâne complet goală și nu ocupă spațiu inutil, pentru că niciun slot din ea nu are conținut."
       }
     }
   }
@@ -168,22 +238,21 @@ export const Playground = {
   name: "Playground",
   args: {
     title      : "Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member",
-    caption    : "Global Anti-Scam Alliance",
     description: "Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
   },
   render: (args) => html`
     <bd-announcement-banner
       title=${args.title}
-      caption=${args.caption}
       description=${args.description}
     >
       ${gasaPicture()}
+      <bd-button-link slot="right-buttons" href="#" kind="outline-white" size="sm">Read the report</bd-button-link>
     </bd-announcement-banner>
   `,
   parameters: {
     docs: {
       description: {
-        story: "Interactiv — modifică `title`, `caption` și `description` din Controls."
+        story: "Interactiv — modifică `title` și `description` din Controls."
       }
     }
   }