@repobit/dex-system-design 0.21.1 → 0.22.0

package/src/components/back/back.stories.js

@@ -1,53 +1,81 @@
 import { html } from 'lit';
 import '../heading/heading.js';
+import '../paragraph/paragraph.js';
 import './back.js';
 
 export default {
   title    : 'Components/Back',
   component: 'bd-back',
+  tags     : ['autodocs'],
   argTypes : {
     label: {
       control    : 'text',
-      description: 'Back button label'
+      description: 'Text label displayed on the back button',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'Back' }
+      }
     },
     href: {
       control    : 'text',
-      description: 'Optional href for specific navigation'
+      description: 'Optional URL for specific navigation target',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' }
+      }
+    },
+    color: {
+      control    : 'color',
+      description: 'Custom text color for the back button',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'var(--color-neutral-1000)' }
+      }
     }
   },
   parameters: {
     docs: {
       description: {
-        component: 'A simple, mobile-inspired back button component with bold black styling for intuitive navigation.'
+        component: 'A mobile-inspired back button component with bold black styling designed for intuitive navigation. Provides both browser history navigation and specific URL targeting with consistent visual hierarchy.'
       }
     }
   }
 };
 
-const Template = ({ label, href }) => html`
-  <bd-back label="${label}" href="${href}"></bd-back>
+const Template = ({ label, href, color }) => html`
+  <bd-back 
+    label="${label}" 
+    href="${href}"
+    style="${color ? `color: ${color};` : ''}"
+  ></bd-back>
 `;
 
+// ============ STORIES ============
+
 export const Default = Template.bind({});
 Default.args = {
-  label: 'Back'
+  label: 'Back',
+  href : '',
+  color: ''
 };
 Default.parameters = {
   docs: {
     description: {
-      story: 'Default back button with bold black styling that uses browser history back() when clicked.'
+      story: 'Default back button with bold black styling. When clicked without an href, it uses the browser\'s history back() method to return to the previous page.'
     }
   }
 };
 
 export const CustomLabel = Template.bind({});
 CustomLabel.args = {
-  label: 'Înapoi'
+  label: 'Înapoi',
+  href : '',
+  color: ''
 };
 CustomLabel.parameters = {
   docs: {
     description: {
-      story: 'Back button with custom label and bold black styling for localization or specific contexts.'
+      story: 'Back button with localized or custom label text. Perfect for internationalization or specific application contexts where "Back" may not be appropriate.'
     }
   }
 };
@@ -55,18 +83,94 @@ CustomLabel.parameters = {
 export const WithHref = Template.bind({});
 WithHref.args = {
   label: 'Back to Home',
-  href : '/home'
+  href : '/home',
+  color: ''
 };
 WithHref.parameters = {
   docs: {
     description: {
-      story: 'Back button with bold black styling that navigates to a specific URL when provided with href.'
+      story: 'Back button that navigates to a specific URL when provided with an href attribute. Useful for when you need to direct users to a specific page rather than using browser history.'
+    }
+  }
+};
+
+export const ComponentShowcase = () => html`
+  <div style="display: flex; flex-direction: column; gap: 3rem; max-width: 1000px; margin: 0 auto; padding: 2rem;">
+    <bd-h as="h2" style="margin-bottom: 1rem;">Back Button Component Features</bd-h>
+    <bd-p kind="regular" style="margin-bottom: 2rem;">
+      Explore the versatile applications and design characteristics of the bold black back button component.
+    </bd-p>
+    
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 12px;">
+      <bd-h as="h3" style="color: #3b82f6; margin-bottom: 1rem;">Standard Usage Patterns</bd-h>
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
+        <div>
+          <bd-h as="h4" style="margin-bottom: 0.5rem;">Browser History</bd-h>
+          <bd-back label="Back"></bd-back>
+          <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
+            Uses <code>window.history.back()</code><br>
+            No href attribute needed
+          </bd-p>
+        </div>
+        
+        <div>
+          <bd-h as="h4" style="margin-bottom: 0.5rem;">Specific Navigation</bd-h>
+          <bd-back label="Products" href="/products"></bd-back>
+          <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
+            Directs to specific URL<br>
+            Uses anchor tag behavior
+          </bd-p>
+        </div>
+        
+        <div>
+          <bd-h as="h4" style="margin-bottom: 0.5rem;">Localized</bd-h>
+          <bd-back label="Retour"></bd-back>
+          <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
+            French localization example<br>
+            Adapts to user language
+          </bd-p>
+        </div>
+      </div>
+    </div>
+
+    <div style="border: 2px solid #e2e8f0; padding: 2rem; border-radius: 12px;">
+      <bd-h as="h3" style="color: #3b82f6; margin-bottom: 1rem;">Design Characteristics</bd-h>
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+        <div>
+          <bd-h as="h4" style="margin-bottom: 1rem;">Visual Properties</bd-h>
+          <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><strong>Color:</strong> Bold black (#000 or --color-neutral-1000)</bd-li>
+            <bd-li kind="bullet" size="md"><strong>Font Weight:</strong> Bold (600-700)</bd-li>
+            <bd-li kind="bullet" size="md"><strong>Typography:</strong> Clean, readable font stack</bd-li>
+            <bd-li kind="bullet" size="md"><strong>Spacing:</strong> Generous padding for touch targets</bd-li>
+            <bd-li kind="bullet" size="md"><strong>Hover:</strong> Subtle opacity changes</bd-li>
+          </bd-list>
+        </div>
+        
+        <div>
+          <bd-h as="h4" style="margin-bottom: 1rem;">Interaction Patterns</bd-h>
+          <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><strong>Click:</strong> Navigates back or to href</bd-li>
+            <bd-li kind="bullet" size="md"><strong>Keyboard:</strong> Tab-accessible, Enter/Space activation</bd-li>
+            <bd-li kind="bullet" size="md"><strong>Focus:</strong> Clear visual focus indicator</bd-li>
+            <bd-li kind="bullet" size="md"><strong>Mobile:</strong> Large touch target (min 44px)</bd-li>
+            <bd-li kind="bullet" size="md"><strong>States:</strong> Normal, hover, active, focus</bd-li>
+          </bd-list>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+ComponentShowcase.parameters = {
+  docs: {
+    description: {
+      story: 'Comprehensive showcase of back button features including standard usage patterns, design characteristics, and interaction behaviors with detailed technical specifications.'
     }
   }
 };
 
 export const MobileContext = () => html`
-  <div style="max-width: 400px; margin: 0 auto; padding: 1rem; background: #f8fafc; min-height: 100vh;">
+  <div style="max-width: 400px; margin: 0 auto; padding: 1rem; background: #f8fafc; min-height: 100vh; border: 2px solid #e2e8f0; border-radius: 12px;">
     <div style="margin-bottom: 2rem;">
       <bd-back label="Back"></bd-back>
     </div>
@@ -74,111 +178,245 @@ export const MobileContext = () => html`
     <div style="background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
       <bd-h as="h2" style="margin-bottom: 1rem;">Product Details</bd-h>
       <bd-p kind="regular" style="margin-bottom: 1rem;">
-        This is a mobile-style page layout with the bold black back button at the top, following mobile navigation patterns.
-      </bd-p>
-      <bd-p kind="small" style="color: #64748b;">
-        Tap the back button to return to the previous screen.
+        This mobile-style layout demonstrates the back button in its natural context. The bold black styling 
+        provides clear visual hierarchy and follows established mobile navigation patterns.
       </bd-p>
+      
+      <div style="background: #f0f9ff; padding: 1rem; border-radius: 8px; margin-top: 1.5rem;">
+        <bd-h as="h4" style="color: #0369a1; margin-bottom: 0.5rem;">Mobile Design Principles</bd-h>
+        <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+          <bd-li kind="bullet" size="md">Top-left positioning for thumb reachability</bd-li>
+          <bd-li kind="bullet" size="md">Bold color for immediate recognition</bd-li>
+          <bd-li kind="bullet" size="md">Clear label for intuitive interaction</bd-li>
+          <bd-li kind="bullet" size="md">Consistent with iOS/Android patterns</bd-li>
+        </bd-list>
+      </div>
     </div>
   </div>
 `;
 MobileContext.parameters = {
   docs: {
     description: {
-      story: 'Bold black back button used in a mobile-style layout context, demonstrating the mobile paradigm with strong visual hierarchy.'
+      story: 'Mobile-optimized context showing the back button in a typical mobile application layout with design principles and best practices for mobile navigation.'
     }
   }
 };
 
 export const MultipleVariants = () => html`
-  <div style="display: flex; flex-direction: column; gap: 1rem; max-width: 300px;">
-    <bd-back label="Back"></bd-back>
-    <bd-back label="Înapoi"></bd-back>
-    <bd-back label="Back to Products" href="/products"></bd-back>
-    <bd-back label="← Back" style="font-size: 0.9rem;"></bd-back>
+  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 600px; margin: 0 auto; padding: 2rem;">
+    <bd-h as="h2" style="margin-bottom: 1rem;">Back Button Variants</bd-h>
+    
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
+      <div style="border: 1px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
+        <bd-h as="h4" style="margin-bottom: 1rem;">Standard</bd-h>
+        <bd-back label="Back"></bd-back>
+        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
+          Default browser history navigation
+        </bd-p>
+      </div>
+      
+      <div style="border: 1px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
+        <bd-h as="h4" style="margin-bottom: 1rem;">Localized</bd-h>
+        <bd-back label="Înapoi"></bd-back>
+        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
+          Romanian localization example
+        </bd-p>
+      </div>
+      
+      <div style="border: 1px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
+        <bd-h as="h4" style="margin-bottom: 1rem;">Specific Target</bd-h>
+        <bd-back label="Back to Home" href="#home"></bd-back>
+        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
+          Direct navigation to home page
+        </bd-p>
+      </div>
+      
+      <div style="border: 1px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
+        <bd-h as="h4" style="margin-bottom: 1rem;">With Icon</bd-h>
+        <bd-back label="← Back" style="font-size: 0.9rem;"></bd-back>
+        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
+          Optional arrow icon prefix
+        </bd-p>
+      </div>
+    </div>
   </div>
 `;
 MultipleVariants.parameters = {
   docs: {
     description: {
-      story: 'Different variants of the bold black back button showing various use cases and labels.'
+      story: 'Collection of different back button variants demonstrating various use cases including localization, specific navigation targets, and optional icon integration.'
     }
   }
 };
 
-export const OnLightBackground = () => html`
-  <div style="background: white; padding: 2rem;">
-    <bd-back label="Back"></bd-back>
-    <bd-p kind="small" style="margin-top: 1rem; color: #64748b;">
-      Bold black back button on light background for maximum contrast and visibility.
-    </bd-p>
+export const BackgroundContexts = () => html`
+  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 800px; margin: 0 auto; padding: 2rem;">
+    <bd-h as="h2" style="margin-bottom: 1rem;">Background Context Examples</bd-h>
+    
+    <div style="background: white; padding: 2rem; border-radius: 12px; border: 2px solid #e2e8f0;">
+      <bd-h as="h3" style="margin-bottom: 1rem;">Light Background</bd-h>
+      <bd-back label="Back"></bd-back>
+      <bd-p kind="small" style="color: #64748b; margin-top: 1rem;">
+        The bold black color provides maximum contrast and visibility on light backgrounds, 
+        ensuring the back button is immediately noticeable and accessible.
+      </bd-p>
+    </div>
+
+    <div style="background: #1e293b; padding: 2rem; border-radius: 12px; border: 2px solid #334155;">
+      <bd-h as="h3" style="color: white; margin-bottom: 1rem;">Dark Background</bd-h>
+      <bd-back label="Back"></bd-back>
+      <bd-p kind="small" style="color: #cbd5e1; margin-top: 1rem;">
+        On dark backgrounds, the bold black styling maintains its strong visual presence 
+        while providing sufficient contrast for readability and accessibility.
+      </bd-p>
+    </div>
+
+    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 12px;">
+      <bd-h as="h3" style="color: white; margin-bottom: 1rem;">Gradient Background</bd-h>
+      <bd-back label="Back"></bd-back>
+      <bd-p kind="small" style="color: rgba(255,255,255,0.8); margin-top: 1rem;">
+        Even on complex gradient backgrounds, the bold black back button remains clearly 
+        visible and maintains its functional purpose as a navigation element.
+      </bd-p>
+    </div>
   </div>
 `;
-OnLightBackground.parameters = {
+BackgroundContexts.parameters = {
   docs: {
     description: {
-      story: 'Back button with bold black styling on light background, ensuring high contrast and clear visibility.'
+      story: 'Back button displayed across different background contexts demonstrating its versatility and consistent visibility on light, dark, and gradient backgrounds.'
     }
   }
 };
 
-export const OnDarkBackground = () => html`
-  <div style="background: #1e293b; padding: 2rem;">
-    <bd-back label="Back"></bd-back>
-    <bd-p kind="small" style="margin-top: 1rem; color: #cbd5e1;">
-      Bold black back button on dark background maintains its strong visual presence.
+export const AccessibilityFeatures = () => html`
+  <div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
+    <bd-h as="h2" style="margin-bottom: 1rem;">Accessibility Implementation</bd-h>
+    <bd-p kind="regular" style="margin-bottom: 2rem;">
+      The back button component is built with accessibility as a core principle, ensuring 
+      all users can effectively navigate regardless of their abilities or assistive technologies.
     </bd-p>
+
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
+      <div style="border: 2px solid #10b981; padding: 1.5rem; border-radius: 8px; background: #f0fdf4;">
+        <bd-h as="h3" style="color: #059669; margin-bottom: 1rem;">✅ Keyboard Navigation</bd-h>
+        <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+          <bd-li kind="bullet" size="md"><strong>Tab:</strong> Focusable in natural tab order</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Enter/Space:</strong> Activates the button</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Focus Indicator:</strong> Clear visual focus ring</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Skip Links:</strong> Compatible with skip navigation</bd-li>
+        </bd-list>
+      </div>
+
+      <div style="border: 2px solid #3b82f6; padding: 1.5rem; border-radius: 8px; background: #eff6ff;">
+        <bd-h as="h3" style="color: #1d4ed8; margin-bottom: 1rem;">✅ Screen Reader Support</bd-h>
+        <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+          <bd-li kind="bullet" size="md"><strong>Semantic HTML:</strong> Proper button or anchor element</bd-li>
+          <bd-li kind="bullet" size="md"><strong>ARIA Labels:</strong> Descriptive accessible name</bd-li>
+          <bd-li kind="bullet" size="md"><strong>State Announcement:</strong> Clear action description</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Role:</strong> Appropriate button or link role</bd-li>
+        </bd-list>
+      </div>
+
+      <div style="border: 2px solid #8b5cf6; padding: 1.5rem; border-radius: 8px; background: #faf5ff;">
+        <bd-h as="h3" style="color: #7c3aed; margin-bottom: 1rem;">✅ Visual Accessibility</bd-h>
+        <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+          <bd-li kind="bullet" size="md"><strong>Contrast Ratio:</strong> WCAG AA compliant (4.5:1+)</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Text Size:</strong> Responsive and scalable</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Touch Target:</strong> Minimum 44px for mobile</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Color Independence:</strong> Not reliant on color alone</bd-li>
+        </bd-list>
+      </div>
+    </div>
+
+    <div style="margin-top: 2rem; padding: 1.5rem; background: #f8fafc; border-radius: 8px;">
+      <bd-h as="h3" style="margin-bottom: 1rem;">Testing Instructions</bd-h>
+      <bd-p kind="small" style="color: #64748b;">
+        <strong>Keyboard Test:</strong> Try tabbing to the back button and activating it with Enter/Space<br>
+        <strong>Screen Reader Test:</strong> Listen to how the button is announced with NVDA, JAWS, or VoiceOver<br>
+        <strong>Zoom Test:</strong> Increase browser zoom to 200% to verify text remains readable<br>
+        <strong>Color Test:</strong> Use grayscale mode to ensure the button remains distinguishable
+      </bd-p>
+    </div>
   </div>
 `;
-OnDarkBackground.parameters = {
+AccessibilityFeatures.parameters = {
   docs: {
     description: {
-      story: 'Back button with bold black styling on dark background, demonstrating its versatility across different backgrounds.'
+      story: 'Comprehensive accessibility documentation covering keyboard navigation, screen reader support, visual accessibility features, and testing procedures for the back button component.'
     }
   }
 };
 
 export const InteractiveDemo = () => {
   return html`
-    <div style="max-width: 600px; margin: 0 auto;">
-      <bd-h as="h2" style="margin-bottom: 2rem;">Bold Black Back Button Demo</bd-h>
+    <div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
+      <bd-h as="h2" style="margin-bottom: 2rem;">Interactive Back Button Demo</bd-h>
       
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem;">
         <div>
-          <bd-h as="h3" style="margin-bottom: 1rem;">Standard Usage</bd-h>
-          <bd-back label="Back"></bd-back>
-          <bd-p kind="small" style="margin-top: 0.5rem;">
-            Uses browser history back()<br>
-            Color: var(--color-neutral-1000)<br>
-            Font-weight: var(--typography-fontWeight-bold)
-          </bd-p>
+          <bd-h as="h3" style="margin-bottom: 1rem;">Navigation Behavior</bd-h>
+          <div style="display: flex; flex-direction: column; gap: 1rem;">
+            <bd-back label="Back (History)"></bd-back>
+            <bd-p kind="small" style="color: #64748b;">
+              Uses: <code>window.history.back()</code><br>
+              Returns to previous page in browser history
+            </bd-p>
+            
+            <bd-back label="Go Home" href="#home-demo"></bd-back>
+            <bd-p kind="small" style="color: #64748b;">
+              Uses: Anchor tag with href<br>
+              Navigates to specific URL location
+            </bd-p>
+          </div>
         </div>
         
         <div>
-          <bd-h as="h3" style="margin-bottom: 1rem;">With Href</bd-h>
-          <bd-back label="Go Home" href="#home"></bd-back>
-          <bd-p kind="small" style="margin-top: 0.5rem;">
-            Navigates to specific URL<br>
-            Same bold black styling
-          </bd-p>
+          <bd-h as="h3" style="margin-bottom: 1rem;">Design Specifications</bd-h>
+          <div style="background: #f8fafc; padding: 1.5rem; border-radius: 8px;">
+            <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+              <bd-li kind="bullet" size="md"><strong>Color:</strong> var(--color-neutral-1000)</bd-li>
+              <bd-li kind="bullet" size="md"><strong>Font Weight:</strong> var(--typography-fontWeight-bold)</bd-li>
+              <bd-li kind="bullet" size="md"><strong>Font Size:</strong> var(--typography-fontSize-base)</bd-li>
+              <bd-li kind="bullet" size="md"><strong>Padding:</strong> var(--spacing-12) var(--spacing-16)</bd-li>
+              <bd-li kind="bullet" size="md"><strong>Border Radius:</strong> var(--radius-sm)</bd-li>
+              <bd-li kind="bullet" size="md"><strong>Transition:</strong> opacity 0.2s ease</bd-li>
+            </bd-list>
+          </div>
         </div>
       </div>
       
-      <bd-p kind="regular" style="margin-top: 2rem;">
-        <strong>Design Features:</strong><br>
-        • Bold black color for maximum visibility<br>
-        • Strong font weight for clear hierarchy<br>
-        • Large touch target for mobile use<br>
-        • Clean, minimalist design<br>
-        • Consistent with mobile navigation patterns
-      </bd-p>
+      <div style="background: #f0f9ff; padding: 1.5rem; border-radius: 8px;">
+        <bd-h as="h3" style="color: #0369a1; margin-bottom: 1rem;">Mobile-First Design Principles</bd-h>
+        <bd-list type="unordered" spacing="sm" variant="default" orientation="vertical">
+          <bd-li kind="bullet" size="md"><strong>Thumb-Friendly:</strong> Positioned in top-left for easy reach</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Clear Hierarchy:</strong> Bold styling for immediate recognition</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Consistent Patterns:</strong> Follows iOS/Android navigation standards</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Touch Optimized:</strong> Minimum 44px touch target size</bd-li>
+          <bd-li kind="bullet" size="md"><strong>Performance:</strong> Fast, responsive interaction</bd-li>
+        </bd-list>
+      </div>
     </div>
   `;
 };
 InteractiveDemo.parameters = {
   docs: {
     description: {
-      story: 'Interactive demonstration of the bold black back button component with mobile-first design principles and strong visual hierarchy.'
+      story: 'Interactive demonstration showcasing back button navigation behaviors, design specifications, and mobile-first design principles with detailed technical implementation.'
+    }
+  }
+};
+
+export const InteractivePlayground = Template.bind({});
+InteractivePlayground.args = {
+  label: 'Back',
+  href : '',
+  color: ''
+};
+InteractivePlayground.parameters = {
+  docs: {
+    description: {
+      story: 'Interactive playground where you can test all back button properties in real-time. Use the controls panel to modify the label, href, and color properties.'
     }
   }
 };

package/src/components/badge/badge.js

@@ -8,7 +8,7 @@ export class BdBadge extends LitElement {
     variant : { type: String },
     size    : { type: String },    // sm, md, lg
     fontsize: { type: String },    // 12, 14, 16
-    icon    : { type: String }     // individual, family, sau alt nume de iconiță
+    icon    : { type: String }     // individual, family
   };
 
   constructor() {
@@ -16,9 +16,9 @@ export class BdBadge extends LitElement {
     this.text = 'Badge';
     this.color = '#026DFF';
     this.variant = '';
-    this.size = 'md';      // Dimensiune implicită medium
-    this.fontsize = '14';  // Font size implicit 14px
-    this.icon = '';        // Nici o iconiță implicită
+    this.size = 'md';
+    this.fontsize = '14';
+    this.icon = '';
   }
 
   updated(changed) {
@@ -81,10 +81,8 @@ export class BdBadge extends LitElement {
   }
 
   _updateIcon() {
-    // Elimină clasele de iconițe vechi
     this.classList.remove('icon-individual', 'icon-family');
 
-    // Adaugă clasa corespunzătoare iconiței
     if (this.icon === 'individual') {
       this.classList.add('icon-individual');
     } else if (this.icon === 'family') {
@@ -95,7 +93,6 @@ export class BdBadge extends LitElement {
   _renderIcon() {
     if (!this.icon) return '';
 
-    // Poți extinde acest switch cu mai multe iconițe în viitor
     switch (this.icon) {
       case 'individual':
         return html`<span class="badge-icon icon-individual"></span>`;