@repobit/dex-system-design 0.25.1 → 0.25.3

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.25.3](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.2...@repobit/dex-system-design@0.25.3) (2026-10-01)
+
+### Bug Fixes
+
+* **DEX-1014:** button component - new variant
+
+
+## [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.25.1",
+  "version": "0.25.3",
   "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.38",
-    "@repobit/dex-store-elements": "2.1.8",
+    "@repobit/dex-store": "1.6.40",
+    "@repobit/dex-store-elements": "2.1.10",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "252088eff23e9de9125bd60243283eba2f86a909"
+  "gitHead": "bf65491b1abdfd2228891d548bcf46bd59643551"
 }

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/button/button.css.js

@@ -27,6 +27,11 @@ export default css`
     --border-button-background-primary-outline-hover: var(--color-blue-500);
     --button-background-primary-outline-focus: var(--color-blue-500);
     --bd-accesibility-focus: var(--color-blue-500);
+
+    --button-arrow-size: 1.1em;
+    --button-arrow-shift: 0.65em;
+    --button-arrow-inset: 0.65em;
+    --button-arrow-offset: -0.4em;
   }
 
   /* ============================================
@@ -103,6 +108,10 @@ export default css`
     box-sizing: border-box;
   }
 
+  .button__label {
+    display: inline-block;
+  }
+
   .button--primary {
     background-color: var(--button-background-primary);
     color: var(--color-neutral-0);
@@ -141,6 +150,62 @@ export default css`
   .button--danger:active {
     background-color: var(--button-background-danger-focus);
   }
+
+  /* ============================================
+     HOVER CU SĂGEATĂ (implicit pentru kind="danger")
+     Lățimea butonului rămâne fixă: textul se translatează
+     spre stânga, iar săgeata (poziționată absolut) apare în dreapta.
+     ============================================ */
+
+  .button--with-arrow {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .button--with-arrow .button__label {
+    transition: transform var(--transition-duration-normal) var(--transition-easing-smooth);
+  }
+
+  .button--with-arrow .button__arrow {
+    position: absolute;
+    top: 50%;
+    right: var(--button-arrow-inset);
+    width: var(--button-arrow-size);
+    height: var(--button-arrow-size);
+    display: inline-flex;
+    opacity: 0;
+    transform: translate(var(--button-arrow-offset), -50%);
+    transition: opacity var(--transition-duration-normal) var(--transition-easing-smooth),
+      transform var(--transition-duration-normal) var(--transition-easing-smooth);
+    pointer-events: none;
+  }
+
+  .button--with-arrow .button__arrow svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .button--with-arrow:hover .button__label,
+  .button--with-arrow:focus-visible .button__label {
+    transform: translateX(calc(var(--button-arrow-shift) * -1));
+  }
+
+  .button--with-arrow:hover .button__arrow,
+  .button--with-arrow:focus-visible .button__arrow {
+    opacity: 1;
+    transform: translate(0, -50%);
+  }
+
+  /* Pe touch nu există hover real — nu lăsăm săgeata „blocată” după tap */
+  @media (hover: none) {
+    .button--with-arrow:hover .button__label {
+      transform: none;
+    }
+    .button--with-arrow:hover .button__arrow {
+      opacity: 0;
+    }
+  }
    
   .button--outline {
     background-color: transparent;
@@ -208,41 +273,46 @@ export default css`
     font-weight: var(--typography-fontWeight-semibold);
   }
 
-  .button > ::slotted(*) {
+  /* slot-ul nu mai e copil direct al .button (e în .button__label) */
+  .button ::slotted(*) {
     display: inline-block;
     width: 100%;
     text-align: center;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .button, .bd-contact-btn {
+    .button,
+    .bd-contact-btn,
+    .button__label,
+    .button__arrow {
       transition: none !important;
     }
   }
-    .button--white {
-  background-color: var(--color-neutral-0);
-  color: var(--color-blue-500);
-}
 
-.button--white:hover {
-  background-color: var(--color-blue-50);
-}
+  .button--white {
+    background-color: var(--color-neutral-0);
+    color: var(--color-blue-500);
+  }
 
-.button--white:active {
-  background-color: var(--color-blue-100);
-}
+  .button--white:hover {
+    background-color: var(--color-blue-50);
+  }
+
+  .button--white:active {
+    background-color: var(--color-blue-100);
+  }
 
-.button--outline-white {
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1.5px #ffffff8c;
-  color: var(--color-neutral-0);
-}
+  .button--outline-white {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1.5px #ffffff8c;
+    color: var(--color-neutral-0);
+  }
 
-.button--outline-white:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
+  .button--outline-white:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
 
-.button--outline-white:active {
-  background-color: rgba(255, 255, 255, 0.2);
-}
+  .button--outline-white:active {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
 `;

package/src/components/button/button.js

@@ -2,6 +2,24 @@ import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import buttonsCSS from "./button.css.js";
 
+/**
+ * Săgeata afișată pe hover / focus pentru butoanele cu kind="danger".
+ * Folosește currentColor, deci preia culoarea textului butonului.
+ */
+const arrowIcon = html`
+  <span class="button__arrow" aria-hidden="true">
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.5 8h11M9 3.5 13.5 8 9 12.5"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </span>
+`;
+
 class Button extends LitElement {
   static properties = {
     label      : { type: String },
@@ -13,7 +31,8 @@ class Button extends LitElement {
     strong     : { type: Boolean },
     fontSize   : { type: String, attribute: "font-size" },
     fontWeight : { type: String, attribute: "font-weight" },
-    align      : { type: String }
+    align      : { type: String },
+    noArrow    : { type: Boolean, attribute: "no-arrow" }
   };
 
   constructor() {
@@ -24,6 +43,7 @@ class Button extends LitElement {
     this.fontSize = "";
     this.fontWeight = "";
     this.align = "left";
+    this.noArrow = false;
   }
 
   _onFocusin(e) {
@@ -87,20 +107,30 @@ class Button extends LitElement {
     return this.strong ? "button--bold" : "";
   }
 
+  /** Săgeata pe hover e activă implicit pentru danger; se poate dezactiva cu no-arrow. */
+  get hasArrow() {
+    return this.kind === "danger" && !this.noArrow;
+  }
+
+  get arrowClass() {
+    return this.hasArrow ? "button--with-arrow" : "";
+  }
+
   render() {
     return html`
       <button
         @click=${this._handleClick}
         @focusin=${this._onFocusin}
         @focusout=${this._onFocusout}
-        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass}"
+        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass} ${this.arrowClass}"
         aria-label="${this.label}"
         style="
           ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
           ${this.fontWeight ? `font-weight: ${this.fontWeight};` : ""}
         "
       >
-        <slot></slot>
+        <span class="button__label"><slot></slot></span>
+        ${this.hasArrow ? arrowIcon : ""}
       </button>
     `;
   }
@@ -119,7 +149,8 @@ class ButtonLink extends LitElement {
     fontWeight : { type: String, attribute: "font-weight" },
     buyLink    : { type: Boolean },
     shadow     : { type: Boolean, reflect: true },
-    align      : { type: String }
+    align      : { type: String },
+    noArrow    : { type: Boolean, attribute: "no-arrow" }
   };
 
   constructor() {
@@ -135,6 +166,7 @@ class ButtonLink extends LitElement {
     this.buyLink = false;
     this.shadow = true;
     this.align = "left";
+    this.noArrow = false;
   }
 
   _onFocusin(e) {
@@ -194,11 +226,19 @@ class ButtonLink extends LitElement {
     return this.strong ? "button--bold" : "";
   }
 
+  get hasArrow() {
+    return this.kind === "danger" && !this.noArrow;
+  }
+
+  get arrowClass() {
+    return this.hasArrow ? "button--with-arrow" : "";
+  }
+
   render() {
     return html`
       <a
         href="${this.href}"
-        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass}"
+        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass} ${this.arrowClass}"
         aria-label="${this.label}"
         @click=${this._handleClick}
         @focusin=${this._onFocusin}
@@ -210,7 +250,8 @@ class ButtonLink extends LitElement {
         ?data-store-render="${this.buyLink}"
         ?data-store-buy-link="${this.buyLink}"
       >
-        <slot>${this.label}</slot>
+        <span class="button__label"><slot>${this.label}</slot></span>
+        ${this.hasArrow ? arrowIcon : ""}
       </a>
     `;
   }

package/src/components/button/button.stories.js

@@ -17,6 +17,7 @@ Three button components are available:
 ### Usage
 \`\`\`html
 <bd-button kind="primary" size="md">Click me</bd-button>
+<bd-button kind="danger" size="md">Activez votre protection</bd-button>
 <bd-button-link kind="danger" size="lg" href="/buy">Buy now</bd-button-link>
 <bd-contact-button label="Contact us" href="/contact"></bd-contact-button>
 \`\`\`
@@ -28,7 +29,22 @@ Three button components are available:
 | \`primary-outline\` | \`button--primary--outline\` |
 | \`outline\` | \`button--outline\` |
 | \`secondary\` | \`button--secondary\` |
-| \`danger\` | \`button--danger\` |
+| \`danger\` | \`button--danger\` + \`button--with-arrow\` |
+| \`white\` | \`button--white\` |
+| \`outline-white\` | \`button--outline-white\` |
+
+### Danger hover arrow
+Every \`kind="danger"\` button (both \`bd-button\` and \`bd-button-link\`) has an arrow hover effect by default:
+on hover (and on keyboard \`:focus-visible\`) the label slides to the left and an arrow fades in on the right.
+The button width does not change.
+
+To disable it on a specific button, add the \`no-arrow\` attribute:
+\`\`\`html
+<bd-button kind="danger" no-arrow>No arrow</bd-button>
+\`\`\`
+
+The effect can be tuned from outside via CSS custom properties:
+\`--button-arrow-size\`, \`--button-arrow-shift\`, \`--button-arrow-inset\`, \`--button-arrow-offset\`.
 
 ### Size Values
 | Size | Class |
@@ -58,8 +74,8 @@ Three button components are available:
     },
     kind: {
       control    : { type: 'select' },
-      options    : ['primary', 'primary-outline', 'outline', 'secondary', 'danger'],
-      description: 'Visual style variant of the button',
+      options    : ['primary', 'primary-outline', 'outline', 'secondary', 'danger', 'white', 'outline-white'],
+      description: 'Visual style variant of the button. `danger` includes the hover arrow by default.',
       table      : { type: { summary: 'string' }, defaultValue: { summary: 'primary' }, category: 'Appearance' }
     },
     size: {
@@ -68,6 +84,11 @@ Three button components are available:
       description: 'Size of the button',
       table      : { type: { summary: "'sm' | 'md' | 'lg'" }, defaultValue: { summary: 'md' }, category: 'Appearance' }
     },
+    noArrow: {
+      control    : 'boolean',
+      description: '(kind="danger" only) Disables the hover arrow. Attribute: `no-arrow`',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Appearance' }
+    },
     fullWidth: {
       control    : 'boolean',
       description: 'When true, button stretches to full container width',
@@ -116,6 +137,7 @@ const defaultArgs = {
   label     : 'Buy now',
   kind      : 'primary',
   size      : 'md',
+  noArrow   : false,
   fullWidth : false,
   strong    : false,
   align     : 'left',
@@ -142,7 +164,40 @@ export const ButtonAllKinds = {
       <bd-button kind="danger" size="md">Danger</bd-button>
     </div>
   `,
-  parameters: { docs: { description: { story: 'All five `kind` variants side by side.' } } }
+  parameters: { docs: { description: { story: 'All five `kind` variants side by side. Hover the danger button to see the arrow.' } } }
+};
+
+export const ButtonDangerArrow = {
+  name  : 'Button — Danger (Hover Arrow)',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:16px; align-items:flex-start;">
+      <p style="font-size:14px; margin:0;">Hover (or Tab to focus) any button to see the arrow.</p>
+      <bd-button kind="danger" size="md" strong>Activez votre protection</bd-button>
+      <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
+        <bd-button kind="danger" size="sm" strong>Small</bd-button>
+        <bd-button kind="danger" size="md" strong>Medium</bd-button>
+        <bd-button kind="danger" size="lg" strong>Large</bd-button>
+      </div>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default behaviour for every `kind="danger"` button: on hover / `:focus-visible` the label slides left and an arrow appears on the right, without changing the button width.'
+      }
+    }
+  }
+};
+
+export const ButtonDangerNoArrow = {
+  name  : 'Button — Danger without Arrow',
+  render: () => html`
+    <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
+      <bd-button kind="danger" size="md" strong>With arrow (default)</bd-button>
+      <bd-button kind="danger" size="md" strong no-arrow>Without arrow</bd-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Use the `no-arrow` attribute to opt out of the hover arrow on a specific danger button.' } } }
 };
 
 export const ButtonAllSizes = {
@@ -160,11 +215,12 @@ export const ButtonAllSizes = {
 export const ButtonFullWidth = {
   name  : 'Button — Full Width',
   render: () => html`
-    <div style="width:400px;">
+    <div style="width:400px; display:flex; flex-direction:column; gap:12px;">
       <bd-button kind="primary" size="md" .fullWidth="${true}">Full Width Button</bd-button>
+      <bd-button kind="danger" size="md" strong .fullWidth="${true}">Full Width Danger</bd-button>
     </div>
   `,
-  parameters: { docs: { description: { story: '`fullWidth` set to true — applies `max--width` class.' } } }
+  parameters: { docs: { description: { story: '`fullWidth` set to true — applies `max--width` class. The danger arrow also works at full width.' } } }
 };
 
 export const ButtonStrong = {
@@ -223,7 +279,7 @@ export const ButtonCustomTypography = {
       Buy now
     </bd-button>
   `,
-  parameters: { docs: { description: { story: 'Custom `font-size` and `font-weight` applied via inline styles.' } } }
+  parameters: { docs: { description: { story: 'Custom `font-size` and `font-weight` applied via inline styles. The arrow scales with the font size.' } } }
 };
 
 export const ButtonKeyboard = {
@@ -268,7 +324,18 @@ export const ButtonLinkAllSizes = {
       <bd-button-link kind="danger" size="lg" href="#">Large</bd-button-link>
     </div>
   `,
-  parameters: { docs: { description: { story: 'All three sizes for `bd-button-link`.' } } }
+  parameters: { docs: { description: { story: 'All three sizes for `bd-button-link` (danger, with hover arrow).' } } }
+};
+
+export const ButtonLinkDangerArrow = {
+  name  : 'ButtonLink — Danger (Hover Arrow)',
+  render: () => html`
+    <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
+      <bd-button-link kind="danger" size="md" href="#" strong>Activez votre protection</bd-button-link>
+      <bd-button-link kind="danger" size="md" href="#" strong no-arrow>Without arrow</bd-button-link>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'The hover arrow is also on by default for `bd-button-link` with `kind="danger"`; `no-arrow` disables it.' } } }
 };
 
 export const ButtonLinkBuyLink = {
@@ -397,15 +464,17 @@ export const Playground = {
         size="${args.size}"
         label="${args.label}"
         align="${args.align}"
-        ?full-width="${args.fullWidth}"
+        ?fullwidth="${args.fullWidth}"
         ?strong="${args.strong}"
+        ?no-arrow="${args.noArrow}"
         font-size="${args.fontSize}"
         font-weight="${args.fontWeight}"
       >${args.label}</bd-button>
     </div>
   `,
-  parameters: { docs: { description: { story: 'Interactive playground for `bd-button`. Use Controls to adjust all props including alignment.' } } }
+  parameters: { docs: { description: { story: 'Interactive playground for `bd-button`. Use Controls to adjust all props including alignment and the danger hover arrow.' } } }
 };
+
 // ─── White / Outline-White (on dark background) ───────────────────────────
 
 export const ButtonWhiteOnDark = {