@repobit/dex-system-design 0.23.15 → 0.23.17

package/src/components/compare/compare.stories.js

@@ -100,7 +100,7 @@ export const Default = {
       gap="32px"
     >
       <compare-card
-        title="Best Protection"
+        title="Best ProtectionBest ProtectionBest ProtectionBest Protection"
         description="Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)"
         footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
         footnote-href="${AV_TEST_URL}"
@@ -110,6 +110,10 @@ export const Default = {
         <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
         <compare-bar label="Norton"      score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
         <compare-bar label="McAfee"      score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
+            <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary" scale="0.73"></compare-bar>
+        <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
+            <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary" scale="0.73"></compare-bar>
+        <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
       </compare-card>
 
       <compare-card
@@ -121,8 +125,7 @@ export const Default = {
         bar-stretch="false"
       >
         <compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
-        <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary" scale="0.73"></compare-bar>
-        <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
+
       </compare-card>
     </bd-compare-section>
   `

package/src/components/link/link.css.js

@@ -37,6 +37,39 @@ export default css`
     text-underline-offset: 2px;
   }
 
+  /* ============================================
+     ACTIVE STATE - FONT WEIGHT 700
+     ============================================ */
+  
+  .bd-link--active {
+    font-weight: 700 !important;
+  }
+
+  /* Poți adăuga și alte stiluri pentru active dacă dorești */
+  .bd-link--active.bd-link--primary {
+    color: var(--color-neutral-900);
+  }
+
+  .bd-link--active.bd-link--secondary {
+    color: var(--color-neutral-900);
+  }
+
+  
+  .bd-link--no-underline:hover,
+  .bd-link--no-underline.bd-link--primary:hover,
+  .bd-link--no-underline.bd-link--secondary:hover,
+  .bd-link--no-underline.bd-link--danger:hover,
+  .bd-link--no-underline.bd-link--bold:hover,
+  .bd-link--no-underline.bd-link--subtle:hover {
+    text-decoration: none !important;
+  }
+
+
+
+  .bd-link--no-underline.bd-link--secondary:hover {
+    color: var(--color-neutral-800) !important;
+  }
+
   /* Light variant for dark backgrounds */
   .bd-link--light {
     color: var(--color-neutral-0);
@@ -101,9 +134,12 @@ export default css`
     pointer-events: none;
   }
 
-
-  /* Focus styles for all variants */
+  /* Focus styles */
   .bd-link:focus {
+    outline: none;
+  }
+
+  .bd-link:focus-visible {
     outline: 2px solid var(--color-blue-300);
     outline-offset: 2px;
     border-radius: 2px;

package/src/components/link/link.js

@@ -4,24 +4,28 @@ import linkCSS from "./link.css.js";
 
 class BdLink extends LitElement {
   static properties = {
-    href     : { type: String },
-    target   : { type: String },
-    kind     : { type: String,  reflect: true },
-    underline: { type: Boolean, reflect: true },
-    disabled : { type: Boolean, reflect: true },
-    fontSize : { type: String,  attribute: "font-size" },
-    color    : { type: String }
+    href       : { type: String },
+    target     : { type: String },
+    kind       : { type: String,  reflect: true },
+    underline  : { type: Boolean, reflect: true },
+    noUnderline: { type: Boolean, attribute: "no-underline" },
+    disabled   : { type: Boolean, reflect: true },
+    fontSize   : { type: String,  attribute: "font-size" },
+    color      : { type: String },
+    active     : { type: Boolean, reflect: true }
   };
 
   constructor() {
     super();
-    this.href      = "#";
-    this.target    = "_self";
-    this.kind      = "primary";
-    this.underline = false;
-    this.disabled  = false;
-    this.fontSize  = "";
-    this.color     = "";
+    this.href        = "#";
+    this.target      = "_self";
+    this.kind        = "primary";
+    this.underline   = false;
+    this.noUnderline = false;
+    this.disabled    = false;
+    this.fontSize    = "";
+    this.color       = "";
+    this.active      = false;
   }
 
   static styles = [tokens, linkCSS];
@@ -31,6 +35,8 @@ class BdLink extends LitElement {
       "bd-link",
       `bd-link--${this.kind}`,
       this.underline ? "bd-link--underline" : "",
+      this.noUnderline ? "bd-link--no-underline" : "",
+      this.active ? "bd-link--active" : "",
       this.disabled  ? "bd-link--disabled"  : ""
     ].filter(Boolean).join(" ");
   }