@repobit/dex-system-design 0.25.4 → 0.25.5

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.25.5](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.4...@repobit/dex-system-design@0.25.5) (2026-10-05)
+
+### Bug Fixes
+
+* **DEX-1014:** button component - rounded variant
+* **DEX-1014:** button component - rounded variant
+
+
 ## [0.25.4](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.3...@repobit/dex-system-design@0.25.4) (2026-10-02)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.25.4",
+  "version": "0.25.5",
   "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.41",
-    "@repobit/dex-store-elements": "2.1.11",
+    "@repobit/dex-store": "1.6.42",
+    "@repobit/dex-store-elements": "2.1.12",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "7fa90da5e767feac5859b40aeaeedebf9a5ee6c9"
+  "gitHead": "63acb7bfc214afa83b52f12193d91ed28782f0ff"
 }

package/src/components/button/button.css.js

@@ -32,6 +32,8 @@ export default css`
     --button-arrow-shift: 0.65em;
     --button-arrow-inset: 0.65em;
     --button-arrow-offset: -0.4em;
+
+    --button-radius-rounded: var(--spacing-30);
   }
 
   /* ============================================
@@ -76,6 +78,10 @@ export default css`
     border-radius: var(--radius-md);
   }
 
+  :host([shape="rounded"][data-bd-button-focus]) {
+    border-radius: var(--button-radius-rounded);
+  }
+
   button:focus,
   button:focus-visible,
   a:focus,
@@ -143,9 +149,9 @@ export default css`
     color: var(--color-neutral-0);
   }
 
-  .button--danger:hover {
-    background-color: var(--button-background-danger-hover);
-  }
+  // .button--danger:hover {
+  //   background-color: var(--button-background-danger-hover);
+  // }
  
   .button--danger:active {
     background-color: var(--button-background-danger-focus);
@@ -180,12 +186,6 @@ export default css`
     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));
@@ -269,8 +269,12 @@ export default css`
     min-width: 150px;
   }
 
-  .button--bold {
-    font-weight: var(--typography-fontWeight-semibold);
+  .button--rounded {
+    border-radius: var(--radius-3xl);
+  }
+
+   .button--bold {
+    font: normal normal var(--typography-fontWeight-medium) var(--typography-fontSize-lg) / var(--dimension-24px) Roboto, sans-serif;
   }
 
   /* slot-ul nu mai e copil direct al .button (e în .button__label) */

package/src/components/button/button.js

@@ -1,23 +1,10 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../icons/arrow-right-icon.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>
+  <bd-arrow-right-icon class="button__arrow" width="100%" height="100%" aria-hidden="true"></bd-arrow-right-icon>
 `;
 
 class Button extends LitElement {
@@ -32,7 +19,8 @@ class Button extends LitElement {
     fontSize   : { type: String, attribute: "font-size" },
     fontWeight : { type: String, attribute: "font-weight" },
     align      : { type: String },
-    noArrow    : { type: Boolean, attribute: "no-arrow" }
+    noArrow    : { type: Boolean, attribute: "no-arrow" },
+    shape      : { type: String, reflect: true }
   };
 
   constructor() {
@@ -44,6 +32,7 @@ class Button extends LitElement {
     this.fontWeight = "";
     this.align = "left";
     this.noArrow = false;
+    this.shape = "default";
   }
 
   _onFocusin(e) {
@@ -99,6 +88,10 @@ class Button extends LitElement {
     }
   }
 
+  get shapeClass() {
+    return this.shape === "rounded" ? "button--rounded" : "";
+  }
+
   get fullWidthClass() {
     return this.fullWidth ? "max--width" : "";
   }
@@ -107,7 +100,6 @@ 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;
   }
@@ -122,7 +114,7 @@ class Button extends LitElement {
         @click=${this._handleClick}
         @focusin=${this._onFocusin}
         @focusout=${this._onFocusout}
-        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass} ${this.arrowClass}"
+        class="button ${this.kindClass} ${this.sizeClass} ${this.shapeClass} ${this.fullWidthClass} ${this.strongClass} ${this.arrowClass}"
         aria-label="${this.label}"
         style="
           ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
@@ -150,7 +142,8 @@ class ButtonLink extends LitElement {
     buyLink    : { type: Boolean },
     shadow     : { type: Boolean, reflect: true },
     align      : { type: String },
-    noArrow    : { type: Boolean, attribute: "no-arrow" }
+    noArrow    : { type: Boolean, attribute: "no-arrow" },
+    shape      : { type: String, reflect: true }
   };
 
   constructor() {
@@ -167,6 +160,7 @@ class ButtonLink extends LitElement {
     this.shadow = true;
     this.align = "left";
     this.noArrow = false;
+    this.shape = "default";
   }
 
   _onFocusin(e) {
@@ -218,6 +212,10 @@ class ButtonLink extends LitElement {
     }
   }
 
+  get shapeClass() {
+    return this.shape === "rounded" ? "button--rounded" : "";
+  }
+
   get fullWidthClass() {
     return this.fullWidth ? "max--width" : "";
   }
@@ -238,7 +236,7 @@ class ButtonLink extends LitElement {
     return html`
       <a
         href="${this.href}"
-        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass} ${this.arrowClass}"
+        class="button ${this.kindClass} ${this.sizeClass} ${this.shapeClass} ${this.fullWidthClass} ${this.strongClass} ${this.arrowClass}"
         aria-label="${this.label}"
         @click=${this._handleClick}
         @focusin=${this._onFocusin}
@@ -265,7 +263,8 @@ class ContactButton extends LitElement {
   static properties = {
     label: { type: String },
     href : { type: String },
-    align: { type: String }
+    align: { type: String },
+    shape: { type: String, reflect: true }
   };
 
   constructor() {
@@ -273,6 +272,7 @@ class ContactButton extends LitElement {
     this.label = "Contact us";
     this.href = "https://www.google.com";
     this.align = "left";
+    this.shape = "default";
   }
 
   _onFocusin(e) {
@@ -290,10 +290,14 @@ class ContactButton extends LitElement {
     this.removeAttribute('data-bd-button-focus');
   }
 
+  get shapeClass() {
+    return this.shape === "rounded" ? "button--rounded" : "";
+  }
+
   render() {
     return html`
       <a 
-        class="button bd-contact-btn" 
+        class="button bd-contact-btn ${this.shapeClass}" 
         href="${this.href}" 
         aria-label="${this.label}"
         @click=${this._handleClick}

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

@@ -18,6 +18,7 @@ Three button components are available:
 \`\`\`html
 <bd-button kind="primary" size="md">Click me</bd-button>
 <bd-button kind="danger" size="md">Activez votre protection</bd-button>
+<bd-button kind="primary" size="md" shape="rounded">Rounded</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>
 \`\`\`
@@ -53,6 +54,14 @@ The effect can be tuned from outside via CSS custom properties:
 | \`md\` | \`button--medium\` |
 | \`lg\` | \`button--large\` |
 
+### Shape Values
+| Shape | Effect |
+|---|---|
+| \`default\` | Border radius from the size (\`--radius-md\` / \`--radius-lg\`) |
+| \`rounded\` | \`button--rounded\` — border radius \`--spacing-30\` |
+
+The rounded radius can be overridden via the \`--button-radius-rounded\` CSS custom property.
+
 ### Alignment Values
 | Align | Effect |
 |---|---|
@@ -84,6 +93,12 @@ The effect can be tuned from outside via CSS custom properties:
       description: 'Size of the button',
       table      : { type: { summary: "'sm' | 'md' | 'lg'" }, defaultValue: { summary: 'md' }, category: 'Appearance' }
     },
+    shape: {
+      control    : { type: 'select' },
+      options    : ['default', 'rounded'],
+      description: 'Shape of the button. `rounded` applies `--spacing-30` border radius.',
+      table      : { type: { summary: "'default' | 'rounded'" }, defaultValue: { summary: 'default' }, category: 'Appearance' }
+    },
     noArrow: {
       control    : 'boolean',
       description: '(kind="danger" only) Disables the hover arrow. Attribute: `no-arrow`',
@@ -137,6 +152,7 @@ const defaultArgs = {
   label     : 'Buy now',
   kind      : 'primary',
   size      : 'md',
+  shape     : 'default',
   noArrow   : false,
   fullWidth : false,
   strong    : false,
@@ -167,6 +183,38 @@ export const ButtonAllKinds = {
   parameters: { docs: { description: { story: 'All five `kind` variants side by side. Hover the danger button to see the arrow.' } } }
 };
 
+export const ButtonRounded = {
+  name  : 'Button — Rounded',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:16px; align-items:flex-start;">
+      <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
+        <bd-button kind="primary" size="md" shape="rounded">Primary</bd-button>
+        <bd-button kind="primary-outline" size="md" shape="rounded">Primary Outline</bd-button>
+        <bd-button kind="outline" size="md" shape="rounded">Outline</bd-button>
+        <bd-button kind="secondary" size="md" shape="rounded">Secondary</bd-button>
+        <bd-button kind="danger" size="md" shape="rounded" strong>Danger</bd-button>
+      </div>
+      <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
+        <bd-button kind="primary" size="sm" shape="rounded">Small</bd-button>
+        <bd-button kind="primary" size="md" shape="rounded">Medium</bd-button>
+        <bd-button kind="primary" size="lg" shape="rounded">Large</bd-button>
+      </div>
+    </div>
+  `,
+  parameters: { docs: { description: { story: '`shape="rounded"` applies `--spacing-30` border radius across all kinds and sizes.' } } }
+};
+
+export const ButtonShapeComparison = {
+  name  : 'Button — Default vs Rounded',
+  render: () => html`
+    <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
+      <bd-button kind="primary" size="md">Default</bd-button>
+      <bd-button kind="primary" size="md" shape="rounded">Rounded</bd-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Side-by-side comparison of the `default` and `rounded` shapes.' } } }
+};
+
 export const ButtonDangerArrow = {
   name  : 'Button — Danger (Hover Arrow)',
   render: () => html`
@@ -218,9 +266,10 @@ export const ButtonFullWidth = {
     <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>
+      <bd-button kind="primary" size="md" shape="rounded" .fullWidth="${true}">Full Width Rounded</bd-button>
     </div>
   `,
-  parameters: { docs: { description: { story: '`fullWidth` set to true — applies `max--width` class. The danger arrow also works at full width.' } } }
+  parameters: { docs: { description: { story: '`fullWidth` set to true — applies `max--width` class. The danger arrow and rounded shape also work at full width.' } } }
 };
 
 export const ButtonStrong = {
@@ -315,6 +364,18 @@ export const ButtonLinkAllKinds = {
   parameters: { docs: { description: { story: 'All `kind` variants for `bd-button-link`.' } } }
 };
 
+export const ButtonLinkRounded = {
+  name  : 'ButtonLink — Rounded',
+  render: () => html`
+    <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
+      <bd-button-link kind="primary" size="md" href="#" shape="rounded">Primary</bd-button-link>
+      <bd-button-link kind="primary-outline" size="md" href="#" shape="rounded">Primary Outline</bd-button-link>
+      <bd-button-link kind="danger" size="md" href="#" shape="rounded" strong>Danger</bd-button-link>
+    </div>
+  `,
+  parameters: { docs: { description: { story: '`shape="rounded"` on `bd-button-link`.' } } }
+};
+
 export const ButtonLinkAllSizes = {
   name  : 'ButtonLink — All Sizes',
   render: () => html`
@@ -420,6 +481,14 @@ export const ContactButtonCustomHref = {
   parameters: { docs: { description: { story: 'Contact button linking to an external support URL.' } } }
 };
 
+export const ContactButtonRounded = {
+  name  : 'ContactButton — Rounded',
+  render: () => html`
+    <bd-contact-button label="Contact us" href="#" shape="rounded"></bd-contact-button>
+  `,
+  parameters: { docs: { description: { story: '`shape="rounded"` on `bd-contact-button`.' } } }
+};
+
 export const ContactButtonAlignCenter = {
   name  : 'ContactButton — Align Center',
   render: () => html`
@@ -462,6 +531,7 @@ export const Playground = {
       <bd-button
         kind="${args.kind}"
         size="${args.size}"
+        shape="${args.shape}"
         label="${args.label}"
         align="${args.align}"
         ?fullwidth="${args.fullWidth}"
@@ -472,7 +542,7 @@ export const Playground = {
       >${args.label}</bd-button>
     </div>
   `,
-  parameters: { docs: { description: { story: 'Interactive playground for `bd-button`. Use Controls to adjust all props including alignment and the danger hover arrow.' } } }
+  parameters: { docs: { description: { story: 'Interactive playground for `bd-button`. Use Controls to adjust all props including shape, alignment and the danger hover arrow.' } } }
 };
 
 // ─── White / Outline-White (on dark background) ───────────────────────────
@@ -483,7 +553,9 @@ export const ButtonWhiteOnDark = {
     <div style="background: linear-gradient(120deg, #0038e0 0%, #061a5c 100%); padding: 48px; border-radius: 12px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center;">
       <bd-button-link kind="white" size="md" strong href="#">Download BETA Today</bd-button-link>
       <bd-button-link kind="outline-white" size="md" strong href="#">Read the docs</bd-button-link>
+      <bd-button-link kind="white" size="md" strong href="#" shape="rounded">Rounded White</bd-button-link>
+      <bd-button-link kind="outline-white" size="md" strong href="#" shape="rounded">Rounded Outline</bd-button-link>
     </div>
   `,
-  parameters: { docs: { description: { story: '`white` and `outline-white` kinds, meant for use on colored/dark backgrounds like `bd-cta-banner` or hero sections.' } } }
+  parameters: { docs: { description: { story: '`white` and `outline-white` kinds, meant for use on colored/dark backgrounds like `bd-cta-banner` or hero sections. Also shown with `shape="rounded"`.' } } }
 };

package/src/components/icons/arrow-right-icon.js

@@ -0,0 +1,31 @@
+import { LitElement, css, html } from "lit";
+
+class ArrowRightIcon extends LitElement {
+  static properties = {
+    width : { type: String },
+    height: { type: String },
+    color : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.width = "20";
+    this.height = "20";
+    this.color = "currentColor";
+  }
+
+  static styles = css`
+    :host { display: inline-flex; }
+    svg { display: block; }
+  `;
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" width="${this.width}" height="${this.height}" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+        <path d="M2.5 8h11M9 3.5 13.5 8 9 12.5" stroke="${this.color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("bd-arrow-right-icon", ArrowRightIcon);