@repobit/dex-system-design 0.23.36 → 0.23.37

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.37](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.36...@repobit/dex-system-design@0.23.37) (2026-05-26)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustment for accesibility
+
+
 ## [0.23.36](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.35...@repobit/dex-system-design@0.23.36) (2026-05-25)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.36",
+  "version": "0.23.37",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -70,8 +70,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.32",
-    "@repobit/dex-store-elements": "1.4.24",
+    "@repobit/dex-store": "1.3.33",
+    "@repobit/dex-store-elements": "1.4.25",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "70aa53bfaf0b469d19aaae35a898ba7cba99587c"
+  "gitHead": "5a292c3a335078319bff9151c88f8be3061c7146"
 }

package/src/components/accordion/accordion-bg.css.js

@@ -28,6 +28,13 @@ export default css`
       0 0 0 4px var(--color-blue-700);
     position: relative;
     z-index: 1;
+    border-radius: var(--radius-sm);
+  }
+
+  /* Focus ring pentru varianta terms-of-use — fara background deci ring simplu */
+  :host(bd-accordion-bg-item[data-variant="terms-of-use"][data-bd-acc-focus]) {
+    // box-shadow: var(--focus-outline-primary);
+    border-radius: var(--radius-sm);
   }
 
   :host(bd-accordion-bg-item:last-of-type) {
@@ -59,6 +66,16 @@ export default css`
     padding-bottom: 0;
   }
 
+  ::slotted(bd-list) {
+    --bd-li-margin-bottom: var(--spacing-16);
+    display: block;
+    margin-bottom: var(--spacing-16);
+  }
+
+  ::slotted(bd-list:last-child) {
+    margin-bottom: 0;
+  }
+
   /* Footer slot — italic, spacing deasupra */
   ::slotted([slot="footer"]) {
     display: block;
@@ -95,14 +112,7 @@ export default css`
     color: var(--color-neutral-900);
     transition: color var(--transition-duration-normal) var(--transition-easing-smooth);
   }
-::slotted(bd-list) {
-  --bd-li-margin-bottom: var(--spacing-16);
-  display: block;
-  margin-bottom: var(--spacing-16);
-}
-  ::slotted(bd-list:last-child) {
-  margin-bottom: 0;
-}
+
   .bd-accordion-bg-question[aria-expanded="true"] {
     color: var(--color-blue-500);
   }

package/src/components/accordion/accordion-bg.js

@@ -91,7 +91,7 @@ class BdAccordionBg extends LitElement {
               <p class="user-guide-link">
                 <a href=${this.guideHref}>
                   ${this.guideIcon
-                    ? html`<span class="icon"><img src=${this.guideIcon} alt="" /></span>`
+                    ? html`<bd-plus-icon  size="16" color="#006DFF"></bd-plus-icon>`
                     : ""}
                   ${this.guideLabel}
                 </a>

package/src/components/accordion/accordion.css.js

@@ -1,10 +1,5 @@
 import { css } from "lit";
 
-/**
- * bd-accordion-item — tokens scoped with `:host-context(...)` so vars resolve on
- * this host (slotted rules from the section do not). Default + `default-blue` =
- * parent is not `variant="small"` (tuned title/body colors for light tinted bgs).
- */
 export const accordionItem = css`
   :host {
     display: block;
@@ -18,13 +13,13 @@ export const accordionItem = css`
     box-shadow: var(--focus-outline-primary);
     position: relative;
     z-index: 1;
+    border-radius: var(--radius-sm);
   }
 
   :host(:last-child) {
     margin-bottom: 0;
   }
 
-  /* Default / non-small — panel body = 14px (fontSize-sm), titles 16px semibold */
   :host-context(bd-accordion-section:not([variant="small"])) {
     --bd-acc-title-font-size: var(--typography-fontSize-base);
     --bd-acc-title-font-weight: var(--typography-fontWeight-semibold);
@@ -37,13 +32,11 @@ export const accordionItem = css`
     --bd-acc-panel-color: var(--color-neutral-800);
   }
 
-  /* default-blue: titles blue-600 on blue-50 for stronger contrast (AA vs blue-500) */
   :host-context(bd-accordion-section[variant="default-blue"]) {
     --bd-acc-title-color-expanded: var(--color-blue-600);
     --bd-acc-title-color-collapsed: var(--color-blue-600);
   }
 
-  /* Small variant — title colors below (collapsed neutral-900; expanded blue-800; hover blue-500) */
   :host-context(bd-accordion-section[variant="small"]) {
     --bd-acc-header-padding: var(--spacing-12) var(--spacing-8);
     --bd-acc-header-margin-bottom: var(--spacing-0);
@@ -61,14 +54,18 @@ export const accordionItem = css`
     --bd-acc-panel-paragraph-gap: var(--spacing-0);
     --bd-acc-item-margin-bottom: var(--spacing-0);
   }
-::slotted(bd-list) {
-  --bd-li-margin-bottom: var(--spacing-16);
-  display: block;
-  margin-bottom: var(--spacing-16);
-}
+
+  /* bd-list in slot — spacing intre list si ce urmeaza */
+  ::slotted(bd-list) {
+    --bd-li-margin-bottom: var(--spacing-16);
+    display: block;
+    margin-bottom: var(--spacing-16);
+  }
+
   ::slotted(bd-list:last-child) {
-  margin-bottom: 0;
-}
+    margin-bottom: 0;
+  }
+
   .header {
     display: flex;
     align-items: flex-start;
@@ -82,10 +79,7 @@ export const accordionItem = css`
     font-family: var(--typography-fontFamily-sans);
     font-style: normal;
     font-size: var(--bd-acc-title-font-size, var(--typography-label-large-fontSize));
-    font-weight: var(
-      --bd-acc-title-font-weight,
-      var(--typography-fontWeight-semibold)
-    );
+    font-weight: var(--bd-acc-title-font-weight, var(--typography-fontWeight-semibold));
     line-height: var(--bd-acc-title-line-height, var(--typography-lineHeight-normal));
     margin-bottom: var(--bd-acc-header-margin-bottom, var(--spacing-16));
   }
@@ -103,27 +97,19 @@ export const accordionItem = css`
     color: var(--color-blue-500);
   }
 
-  :host-context(bd-accordion-section[variant="small"])
-    .header[aria-expanded="false"]
-    .title {
+  :host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="false"] .title {
     color: var(--color-neutral-900);
   }
 
-  :host-context(bd-accordion-section[variant="small"])
-    .header[aria-expanded="false"]:hover
-    .title {
+  :host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="false"]:hover .title {
     color: var(--color-blue-500);
   }
 
-  :host-context(bd-accordion-section[variant="small"])
-    .header[aria-expanded="true"]
-    .title {
+  :host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="true"] .title {
     color: var(--color-blue-800);
   }
 
-  :host-context(bd-accordion-section[variant="small"])
-    .header[aria-expanded="true"]:hover
-    .title {
+  :host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="true"]:hover .title {
     color: var(--color-blue-500);
   }
 
@@ -137,12 +123,9 @@ export const accordionItem = css`
     justify-content: center;
     line-height: 0;
     user-select: none;
-    /* First-line alignment: icon sits in first line box, not vertically centered on wrapped title */
     margin-top: calc(
-      (
-          var(--bd-acc-title-line-height, var(--typography-lineHeight-normal)) * 1em -
-          var(--bd-acc-toggle-size, var(--icon-sm-size))
-        ) / 2
+      (var(--bd-acc-title-line-height, var(--typography-lineHeight-normal)) * 1em -
+      var(--bd-acc-toggle-size, var(--icon-sm-size))) / 2
     );
   }
 
@@ -155,39 +138,30 @@ export const accordionItem = css`
 
   .title {
     flex: 1;
-    font-weight: var(
-      --bd-acc-title-font-weight,
-      var(--typography-fontWeight-semibold)
-    );
+    font-weight: var(--bd-acc-title-font-weight, var(--typography-fontWeight-semibold));
   }
 
   .content {
-    padding: var(
-      --bd-acc-panel-padding,
-      0 0 0 calc(var(--icon-sm-size) + var(--spacing-12))
-    );
+    padding: var(--bd-acc-panel-padding, 0 0 0 calc(var(--icon-sm-size) + var(--spacing-12)));
     font-family: var(--typography-fontFamily-sans);
     font-size: var(--bd-acc-panel-font-size, var(--typography-fontSize-sm));
-    font-weight: var(
-      --bd-acc-panel-font-weight,
-      var(--typography-fontWeight-normal)
-    );
-    line-height: var(
-      --bd-acc-panel-line-height,
-      var(--typography-lineHeight-normal)
-    );
+    font-weight: var(--bd-acc-panel-font-weight, var(--typography-fontWeight-normal));
+    line-height: var(--bd-acc-panel-line-height, var(--typography-lineHeight-normal));
     color: var(--bd-acc-panel-color, var(--color-neutral-700));
   }
 
   .content[hidden] {
     display: none !important;
   }
+
   ::slotted(bd-p) {
     padding-bottom: var(--spacing-16);
   }
+
   ::slotted(bd-p:last-child) {
     padding-bottom: 0px;
   }
+
   ::slotted(p) {
     margin-top: 0;
     margin-bottom: var(--bd-acc-panel-paragraph-gap, var(--spacing-16));
@@ -204,16 +178,12 @@ export const accordionItem = css`
 `;
 
 export const accordionSection = css`
-  // :host {
-  //   display: block;
-  //   background-color: var(--bd-acc-section-bg, var(--color-neutral-25));
-  //   padding: var(--bd-acc-section-padding, var(--spacing-32));
-  //   box-sizing: border-box;
-  // }
   .bd-accordion-section-container {
     background-color: var(--bd-acc-section-bg, var(--color-neutral-25));
     padding: var(--bd-acc-section-padding, var(--spacing-32));
-    border-radius: var(--bd-acc-section-radius, var(--radius-lg));
+    border-radius: 0;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   :host([variant="small"]) {
@@ -225,7 +195,6 @@ export const accordionSection = css`
     --bd-acc-section-bg: var(--color-blue-50);
   }
 
-  /* Light tinted section bgs (neutral-25, blue-50): footnote link */
   :host(:not([variant="small"])) .user-guide-link {
     color: var(--color-blue-700);
   }
@@ -258,7 +227,6 @@ export const accordionSection = css`
     gap: var(--spacing-12);
     font-family: Arial, Helvetica, sans-serif;
     font-size: var(--typography-fontSize-xs);
-
   }
 
   .user-guide-link a:focus-visible {
@@ -273,4 +241,4 @@ export const accordionSection = css`
     height: var(--dimension-16px);
     object-fit: contain;
   }
-`;
+`;