@repobit/dex-system-design 0.22.12 → 0.23.2

package/src/components/link/link.stories.js

@@ -1,507 +1,169 @@
 import { html } from 'lit';
-import '../heading/heading.js';
-import '../paragraph/paragraph.js';
 import './link.js';
 
 export default {
-  title    : 'Atoms/Link',
-  component: 'bd-link',
-  tags     : ['autodocs'],
-  argTypes : {
+  title     : 'Components/Link',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdLink** is a Lit anchor component with kind, underline, disabled, and target support.
+
+### Usage
+\`\`\`html
+<bd-link href="/products" kind="primary">View products</bd-link>
+<bd-link href="/docs" kind="secondary" underline>Documentation</bd-link>
+<bd-link href="/old" disabled>Unavailable</bd-link>
+\`\`\`
+
+### Kind Values
+| Kind | Class |
+|---|---|
+| \`primary\` | \`bd-link--primary\` |
+| \`secondary\` | \`bd-link--secondary\` |
+| \`light\` | \`bd-link--light\` |
+
+### Disabled Behavior
+- When \`disabled\`, renders a \`<span>\` instead of \`<a>\`
+- Click events are prevented via \`e.preventDefault()\` and \`e.stopImmediatePropagation()\`
+
+### Events
+- \`custom-click\` — NOT dispatched by BdLink (click handled natively by the \`<a>\` tag)
+        `
+      }
+    }
+  },
+  argTypes: {
     href: {
       control    : 'text',
-      description: 'URL destination for the link',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '#' }
-      }
+      description: 'The anchor href URL',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '#' }, category: 'Navigation' }
     },
     target: {
       control    : { type: 'select' },
       options    : ['_self', '_blank', '_parent', '_top'],
-      description: 'Link target attribute for browser behavior',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '_self' }
-      }
+      description: 'Browser target for the link',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '_self' }, category: 'Navigation' }
     },
     kind: {
       control    : { type: 'select' },
-      options    : ['primary', 'secondary', 'danger', 'subtle', 'bold'],
-      description: 'Visual style variant for the link',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'primary' }
-      }
+      options    : ['primary', 'secondary', 'light'],
+      description: 'Visual style variant applied as `bd-link--{kind}` class',
+      table      : { type: { summary: "'primary'|'secondary'|'light'" }, defaultValue: { summary: 'primary' }, category: 'Appearance' }
     },
     underline: {
       control    : 'boolean',
-      description: 'Always show underline regardless of hover state',
-      table      : {
-        type        : { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      }
+      description: 'Adds `bd-link--underline` class for underline decoration',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Appearance' }
     },
     disabled: {
       control    : 'boolean',
-      description: 'Disabled state that prevents interaction',
-      table      : {
-        type        : { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      }
-    },
-    content: {
-      control    : 'text',
-      description: 'Link text content',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'Link Text' }
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'A highly customizable link component with multiple visual variants, accessibility features, and interactive states. Supports both internal and external links with proper semantic HTML.'
-      }
+      description: 'Renders a `<span>` instead of `<a>` and prevents click events',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' }
     }
   }
 };
 
-const Template = ({ href, target, kind, underline, disabled, content }) => html`
-  <bd-link 
-    href="${href}"
-    target="${target}"
-    kind="${kind}"
-    ?underline="${underline}"
-    ?disabled="${disabled}"
-  >
-    ${content}
-  </bd-link>
-`;
+const defaultArgs = { href: '/products', target: '_self', kind: 'primary', underline: false, disabled: false };
 
-// ============ STORIES ============
-
-export const Default = Template.bind({});
-Default.args = {
-  href     : '#',
-  target   : '_self',
-  kind     : 'primary',
-  underline: false,
-  disabled : false,
-  content  : 'Default Link'
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default link component with primary styling. This is the most commonly used link variant throughout the application.'
-    }
-  }
-};
-
-export const AllVariants = () => 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;">All Link Variants</bd-h>
-    <bd-p kind="regular" style="margin-bottom: 2rem;">
-      Explore all available link variants and their recommended use cases. Each variant is designed for specific contexts and user interactions.
-    </bd-p>
-    
-    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
-      <div style="border: 2px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="primary">primary link</bd-link> inside the text.</bd-p>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          <strong>Primary:</strong> Main calls-to-action, important navigation, key features
-        </bd-p>
-      </div>
-      
-      <div style="border: 2px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="secondary">secondary link</bd-link> inside the text.</bd-p>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          <strong>Secondary:</strong> Supporting links, less prominent actions, alternative navigation
-        </bd-p>
-      </div>
-      
-      <div style="border: 2px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="danger">danger link</bd-link> inside the text.</bd-p>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          <strong>Danger:</strong> Destructive actions, warnings, critical operations, error states
-        </bd-p>
-      </div>
-      
-      <div style="border: 2px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="subtle">subtle link</bd-link> inside the text.</bd-p>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          <strong>Subtle:</strong> Footer links, legal text, supplementary information, low emphasis
-        </bd-p>
-      </div>
-      
-      <div style="border: 2px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="bold">bold link</bd-link> inside the text.</bd-p>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          <strong>Bold:</strong> High emphasis, featured content, important references, key highlights
-        </bd-p>
-      </div>
-      
-      <div style="border: 2px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="primary" underline>underlined link</bd-link> inside the text.</bd-p>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          <strong>Underlined:</strong> Improved accessibility, formal content, academic references
-        </bd-p>
-      </div>
-      
-      <div style="border: 2px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="primary" disabled>disabled link</bd-link> inside the text.</bd-p>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          <strong>Disabled:</strong> Unavailable actions, conditional access, permission-based states
-        </bd-p>
-      </div>
-    </div>
-  </div>
+const render = (args) => html`
+  <bd-link
+    href="${args.href}"
+    target="${args.target}"
+    kind="${args.kind}"
+    ?underline="${args.underline}"
+    ?disabled="${args.disabled}"
+  >Click this link</bd-link>
 `;
-AllVariants.parameters = {
-  docs: {
-    description: {
-      story: 'Comprehensive overview of all link variants with detailed usage guidelines and context recommendations for each style option.'
-    }
-  }
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  href     : '#',
-  target   : '_self',
-  kind     : 'primary',
-  underline: false,
-  disabled : false,
-  content  : 'Primary Link'
-};
-Primary.parameters = {
-  docs: {
-    description: {
-      story: 'Primary link variant - Use for main calls-to-action, important navigation items, and key feature links. This is the default and most prominent link style.'
-    }
-  }
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  href     : '#',
-  target   : '_self',
-  kind     : 'secondary',
-  underline: false,
-  disabled : false,
-  content  : 'Secondary Link'
-};
-Secondary.parameters = {
-  docs: {
-    description: {
-      story: 'Secondary link variant - Ideal for supporting actions, less prominent navigation, and alternative pathways that don\'t require primary emphasis.'
-    }
-  }
-};
 
-export const Danger = Template.bind({});
-Danger.args = {
-  href     : '#',
-  target   : '_self',
-  kind     : 'danger',
-  underline: false,
-  disabled : false,
-  content  : 'Danger Link'
-};
-Danger.parameters = {
-  docs: {
-    description: {
-      story: 'Danger link variant - Designed for destructive actions, warnings, critical operations, and error-related links. Use sparingly for high-attention scenarios.'
-    }
-  }
-};
+// ─── Stories ───────────────────────────────────────────────────────────────
 
-export const Subtle = Template.bind({});
-Subtle.args = {
-  href     : '#',
-  target   : '_self',
-  kind     : 'subtle',
-  underline: false,
-  disabled : false,
-  content  : 'Subtle Link'
-};
-Subtle.parameters = {
-  docs: {
-    description: {
-      story: 'Subtle link variant - Perfect for low-emphasis contexts like footer links, legal text, supplementary information, and non-critical references.'
-    }
-  }
+export const Default = {
+  name      : 'Default (Primary)',
+  render    : () => html`<bd-link href="/products" kind="primary">View products</bd-link>`,
+  parameters: { docs: { description: { story: 'Default primary link rendered as an `<a>` tag.' } } }
 };
 
-export const Bold = Template.bind({});
-Bold.args = {
-  href     : '#',
-  target   : '_self',
-  kind     : 'bold',
-  underline: false,
-  disabled : false,
-  content  : 'Bold Link'
-};
-Bold.parameters = {
-  docs: {
-    description: {
-      story: 'Bold link variant - Use for high-emphasis scenarios, featured content, important references, and key highlights that need extra visual weight.'
-    }
-  }
-};
-
-export const WithUnderline = Template.bind({});
-WithUnderline.args = {
-  href     : '#',
-  target   : '_self',
-  kind     : 'primary',
-  underline: true,
-  disabled : false,
-  content  : 'Underlined Link'
-};
-WithUnderline.parameters = {
-  docs: {
-    description: {
-      story: 'Link with forced underline - Improves accessibility and clarity, especially useful in formal content, academic references, and dense text blocks.'
-    }
-  }
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  href     : '#',
-  target   : '_self',
-  kind     : 'primary',
-  underline: false,
-  disabled : true,
-  content  : 'Disabled Link'
-};
-Disabled.parameters = {
-  docs: {
-    description: {
-      story: 'Disabled link state - Shows unavailable actions while maintaining visual context. Automatically prevents clicks and maintains semantic structure.'
-    }
-  }
-};
-
-export const TargetOptions = () => 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;">Link Target Options</bd-h>
-    <bd-p kind="regular" style="margin-bottom: 1rem;">
-      Different target attributes control how links open in the browser. Choose the appropriate option based on user experience needs.
-    </bd-p>
-    
-    <div style="display: flex; flex-direction: column; gap: 1rem;">
-      <div>
-        <bd-link href="https://example.com" target="_self" kind="primary">
-          _self - Opens in same tab/window
-        </bd-link>
-        <bd-p kind="small" style="color: #64748b;">
-          Default behavior. Use for internal navigation and same-context links.
-        </bd-p>
-      </div>
-      
-      <div>
-        <bd-link href="https://example.com" target="_blank" kind="secondary">
-          _blank - Opens in new tab
-        </bd-link>
-        <bd-p kind="small" style="color: #64748b;">
-          For external links, references, and resources that shouldn\'t interrupt user flow.
-        </bd-p>
-      </div>
-      
-      <div>
-        <bd-link href="https://example.com" target="_parent" kind="subtle">
-          _parent - Opens in parent frame
-        </bd-link>
-        <bd-p kind="small" style="color: #64748b;">
-          Specific to frame-based layouts. Rarely used in modern web applications.
-        </bd-p>
-      </div>
-      
-      <div>
-        <bd-link href="https://example.com" target="_top" kind="subtle">
-          _top - Opens in full window
-        </bd-link>
-        <bd-p kind="small" style="color: #64748b;">
-          Breaks out of frames to full browser window. Useful in embedded contexts.
-        </bd-p>
-      </div>
+export const AllKinds = {
+  name  : 'All Kinds',
+  render: () => html`
+    <div style="display:flex; gap:16px; flex-wrap:wrap; align-items:center; padding:8px; background:#333;">
+      <bd-link href="#" kind="primary">Primary</bd-link>
+      <bd-link href="#" kind="secondary">Secondary</bd-link>
+      <bd-link href="#" kind="light">Light</bd-link>
     </div>
-  </div>
-`;
-TargetOptions.parameters = {
-  docs: {
-    description: {
-      story: 'Demonstration of different target attributes and their browser behaviors with recommendations for when to use each option based on user experience considerations.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: 'All three `kind` values. Light kind is shown on a dark background for visibility.' } } }
 };
 
-export const ExternalLinks = () => 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;">External Link Examples</bd-h>
-    <bd-p kind="regular" style="margin-bottom: 1rem;">
-      External links typically open in new tabs to prevent users from leaving your application. Here are common patterns for external references.
-    </bd-p>
-    
-    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
-      <div>
-        <bd-link href="https://example.com" target="_blank" kind="primary">
-          External Primary Link with Security
-        </bd-link>
-        <bd-p kind="small" style="color: #64748b;">
-          Opens in new tab with proper security attributes for external resources.
-        </bd-p>
-      </div>
-      
-      <div>
-        <bd-link href="https://example.com" target="_blank" kind="secondary" underline>
-          External Underlined Reference
-        </bd-link>
-        <bd-p kind="small" style="color: #64748b;">
-          Clear visual indication for external academic or reference material.
-        </bd-p>
-      </div>
-      
-      <div style="border: 2px solid #e2e8f0; padding: 1.5rem; border-radius: 8px;">
-        <bd-p kind="regular">
-          This is a paragraph with an <bd-link href="https://example.com" target="_blank" kind="primary">external link</bd-link> that opens in a new tab for better user experience and flow preservation.
-        </bd-p>
-        <bd-p kind="small" style="color: #64748b; margin-top: 0.5rem;">
-          Best practice: Use target="_blank" for all external links to keep users in your application context.
-        </bd-p>
-      </div>
+export const WithUnderline = {
+  name  : 'With Underline',
+  render: () => html`
+    <div style="display:flex; gap:16px; flex-wrap:wrap;">
+      <bd-link href="#" kind="primary" underline>Primary underlined</bd-link>
+      <bd-link href="#" kind="secondary" underline>Secondary underlined</bd-link>
     </div>
-  </div>
-`;
-ExternalLinks.parameters = {
-  docs: {
-    description: {
-      story: 'Examples and best practices for external links, including security considerations, user experience patterns, and visual styling recommendations for outbound navigation.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: '`underline` prop adds `bd-link--underline` class.' } } }
 };
 
-export const AccessibilityExamples = () => 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;">Accessibility Guidelines</bd-h>
-    
-    <div style="border: 2px solid #10b981; padding: 2rem; border-radius: 12px; background: #f0fdf4;">
-      <bd-h as="h3" style="color: #059669; margin-bottom: 1rem;">✅ Accessible Link Practices</bd-h>
-      
-      <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <div>
-          <bd-p kind="regular"><strong>Descriptive Text:</strong> Always use meaningful link text that makes sense out of context.</bd-p>
-          <bd-p kind="small" style="color: #059669;">
-            ✅ <bd-link href="#" kind="primary">Download security whitepaper</bd-link><br>
-            ❌ <bd-link href="#" kind="danger">Click here</bd-link>
-          </bd-p>
-        </div>
-        
-        <div>
-          <bd-p kind="regular"><strong>Underline for Clarity:</strong> Use underlined links in paragraphs for better visual identification.</bd-p>
-          <bd-p kind="small" style="color: #059669;">
-            This <bd-link href="#" kind="primary" underline>underlined link</bd-link> is easier to identify in text blocks.
-          </bd-p>
-        </div>
-        
-        <div>
-          <bd-p kind="regular"><strong>Color Contrast:</strong> All link variants maintain WCAG AA contrast ratios.</bd-p>
-          <bd-p kind="small" style="color: #059669;">
-            Tested for accessibility: <bd-link href="#" kind="subtle">Subtle</bd-link>, <bd-link href="#" kind="primary">Primary</bd-link>, <bd-link href="#" kind="danger">Danger</bd-link>
-          </bd-p>
-        </div>
-        
-        <div>
-          <bd-p kind="regular"><strong>Focus Indicators:</strong> Clear focus rings for keyboard navigation.</bd-p>
-          <bd-p kind="small" style="color: #059669;">
-            Try tabbing through these links to see the focus indicators.
-          </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;">Screen Reader Considerations</bd-h>
-      <bd-p kind="regular" style="margin-bottom: 1rem;">
-        Links provide proper semantic information for assistive technologies:
-      </bd-p>
-      
-      <ul style="color: #374151; margin-left: 1.5rem;">
-        <li style="margin-bottom: 0.5rem;">Disabled links become <code>&lt;span&gt;</code> elements to prevent interaction</li>
-        <li style="margin-bottom: 0.5rem;">External links should include visual or textual indicators</li>
-        <li style="margin-bottom: 0.5rem;">Link text should be unique and descriptive</li>
-        <li>Focus management works correctly with keyboard navigation</li>
-      </ul>
-    </div>
-  </div>
-`;
-AccessibilityExamples.parameters = {
-  docs: {
-    description: {
-      story: 'Comprehensive accessibility guidelines and best practices for link components, including screen reader compatibility, keyboard navigation, color contrast, and semantic HTML structure.'
-    }
-  }
+export const Disabled = {
+  name      : 'Disabled',
+  render    : () => html`<bd-link href="/products" kind="primary" disabled>Unavailable link</bd-link>`,
+  parameters: { docs: { description: { story: 'Disabled link renders as `<span>` — not clickable, not navigable.' } } }
 };
 
-export const InContext = () => html`
-  <div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
-    <bd-h as="h2">Cybersecurity Features Documentation</bd-h>
-    
-    <bd-p kind="lead">
-      Protect your digital life with our comprehensive security solutions. 
-      Learn more about <bd-link href="#" kind="primary">advanced threat protection</bd-link> 
-      and <bd-link href="#" kind="bold">real-time monitoring features</bd-link>.
-    </bd-p>
-    
-    <bd-p kind="regular">
-      Our <bd-link href="#" kind="danger">emergency response team</bd-link> is available 24/7 
-      to handle security incidents. For less urgent matters, check our 
-      <bd-link href="#" kind="subtle">comprehensive knowledge base</bd-link> or 
-      <bd-link href="#" kind="secondary">community support forums</bd-link>.
-    </bd-p>
-    
-    <bd-h as="h3" style="margin-top: 2rem;">Additional Resources</bd-h>
-    
-    <bd-p kind="regular">
-      Download our <bd-link href="#" kind="primary" underline>security best practices guide</bd-link> 
-      or explore <bd-link href="https://example.com" target="_blank" kind="secondary">external security resources</bd-link> 
-      for more in-depth information.
-    </bd-p>
-    
-    <div style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e2e8f0;">
-      <bd-p kind="small">
-        <bd-link href="#" kind="subtle" underline>Terms of service</bd-link> • 
-        <bd-link href="#" kind="subtle" underline>Privacy policy</bd-link> • 
-        <bd-link href="#" kind="subtle" underline>Cookie policy</bd-link> • 
-        <bd-link href="#" kind="subtle" underline>Contact support</bd-link>
-      </bd-p>
+export const DisabledAllKinds = {
+  name  : 'Disabled — All Kinds',
+  render: () => html`
+    <div style="display:flex; gap:16px; flex-wrap:wrap; align-items:center;">
+      <bd-link href="#" kind="primary"   disabled>Primary disabled</bd-link>
+      <bd-link href="#" kind="secondary" disabled>Secondary disabled</bd-link>
+      <bd-link href="#" kind="light"     disabled>Light disabled</bd-link>
     </div>
-  </div>
-`;
-InContext.parameters = {
-  docs: {
-    description: {
-      story: 'Real-world example showing links used in various contexts including content paragraphs, feature descriptions, resource references, and footer navigation with appropriate variant selection.'
-    }
-  }
-};
-
-export const InteractivePlayground = Template.bind({});
-InteractivePlayground.args = {
-  href     : '#',
-  target   : '_self',
-  kind     : 'primary',
-  underline: false,
-  disabled : false,
-  content  : 'Customize This Link'
-};
-InteractivePlayground.parameters = {
-  docs: {
-    description: {
-      story: 'Interactive playground where you can test all link properties in real-time. Use the controls panel to modify the link variant, target, underline, disabled state, and content.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: 'Disabled state across all three kind variants.' } } }
+};
+
+export const OpenInNewTab = {
+  name  : 'Opens in New Tab',
+  render: () => html`
+    <bd-link href="https://bitdefender.com" kind="primary" target="_blank">
+      Visit Bitdefender.com
+    </bd-link>
+  `,
+  parameters: { docs: { description: { story: '`target="_blank"` opens the link in a new browser tab.' } } }
+};
+
+export const InlineWithText = {
+  name  : 'Inline Within Text',
+  render: () => html`
+    <p style="font-size:16px; line-height:1.6;">
+      Bitdefender offers award-winning protection.
+      <bd-link href="/products" kind="primary" underline>View all products</bd-link>
+      to find the right plan for you.
+    </p>
+  `,
+  parameters: { docs: { description: { story: 'Link used inline within a paragraph of text.' } } }
+};
+
+export const NavigationLinks = {
+  name  : 'Navigation Link Row',
+  render: () => html`
+    <nav style="display:flex; gap:24px; padding:16px; background:#1a1a1a;">
+      <bd-link href="/consumer"      kind="light">Consumer</bd-link>
+      <bd-link href="/small-business" kind="light">Small Business</bd-link>
+      <bd-link href="/business"      kind="light">Business</bd-link>
+      <bd-link href="/partners"      kind="light">Partners</bd-link>
+    </nav>
+  `,
+  parameters: { docs: { description: { story: 'Light kind links used as navigation items on a dark background.' } } }
+};
+
+export const Playground = {
+  name      : '🛝 Playground',
+  args      : { ...defaultArgs },
+  render,
+  parameters: { docs: { description: { story: 'Interactive playground. Adjust href, target, kind, underline, and disabled via Controls.' } } }
 };