@repobit/dex-system-design 0.25.12 → 0.26.0

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

@@ -2,18 +2,23 @@ import { html } from 'lit';
 import './link.js';
 
 export default {
-  title     : 'Components/Link',
+  title     : 'Atoms/Link',
   tags      : ['autodocs'],
   parameters: {
-    docs: {
+    /* The specimen stories render fixed markup and take no args, so a control
+       on them can only ever look broken -- which is how a dead fontSize select
+       came to be read as a component bug. The Playground turns them back on,
+       and it is the one story wired to args. */
+    controls: { disable: true },
+    docs    : {
       description: {
         component: `
-**BdLink** is a Lit anchor component with kind, underline, disabled, and target support.
+**BdLink** is a Lit anchor component with variant, 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="/products" variant="primary">View products</bd-link>
+<bd-link href="/docs" variant="secondary" underline>Documentation</bd-link>
 <bd-link href="/old" disabled>Unavailable</bd-link>
 \`\`\`
 
@@ -28,6 +33,31 @@ export default {
 - When \`disabled\`, renders a \`<span>\` instead of \`<a>\`
 - Click events are prevented via \`e.preventDefault()\` and \`e.stopImmediatePropagation()\`
 
+### fontSize and color are step names, not CSS values
+Both are closed sets resolved through the token scales, so a literal is
+impossible:
+
+- \`fontSize\` takes a type-scale step — \`sm\`, \`base\`, \`lg\` — and becomes
+  \`var(--typography-fontSize-*)\`. Passing \`14px\` does nothing.
+- \`color\` takes a semantic role — \`primary\`, \`strong\`, \`muted\`, \`subtle\`,
+  \`inverse\`, \`success\`, \`warning\`, \`error\` — and becomes a palette token.
+  Passing \`#026DFF\` does nothing.
+
+Anything off the scale is dropped and the link keeps the styling its \`kind\`
+gives it.
+
+### underline and noUnderline both exist
+They are two booleans for one axis, which is one more than the axis needs.
+\`underline\` adds \`bd-link--underline\` and \`noUnderline\` adds
+\`bd-link--no-underline\`, and nothing stops you setting both — the result then
+depends on CSS order rather than on intent. Prefer whichever one differs from
+your \`kind\`'s default and leave the other alone.
+
+### active
+Marks the link as the current destination, for a nav or breadcrumb. It is
+styling only — pair it with \`aria-current="page"\` on the element for the state
+to be announced.
+
 ### Events
 - \`custom-click\` — NOT dispatched by BdLink (click handled natively by the \`<a>\` tag)
         `
@@ -46,10 +76,10 @@ export default {
       description: 'Browser target for the link',
       table      : { type: { summary: 'string' }, defaultValue: { summary: '_self' }, category: 'Navigation' }
     },
-    kind: {
+    variant: {
       control    : { type: 'select' },
       options    : ['primary', 'secondary', 'light'],
-      description: 'Visual style variant applied as `bd-link--{kind}` class',
+      description: 'Visual style variant applied as `bd-link--{variant}` class',
       table      : { type: { summary: "'primary'|'secondary'|'light'" }, defaultValue: { summary: 'primary' }, category: 'Appearance' }
     },
     underline: {
@@ -61,18 +91,66 @@ export default {
       control    : 'boolean',
       description: 'Renders a `<span>` instead of `<a>` and prevents click events',
       table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' }
+    },
+    noUnderline: {
+      control    : 'boolean',
+      description: 'Adds `bd-link--no-underline`. Overlaps with `underline` — see the note on the two of them.',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Appearance' }
+    },
+    active: {
+      control    : 'boolean',
+      description: 'Marks the link as the current one, e.g. in a nav. Adds `bd-link--active`.',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' }
+    },
+    inline: {
+      control    : 'boolean',
+      description: 'The link is text inside a sentence: size, leading, tracking and family come from the sentence (the `--typography-link-default-*` role, all `inherit`). Without it the link renders 1rem whatever surrounds it. Suppresses `fontSize`.',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Typography' }
+    },
+    fontSize: {
+      control    : { type: 'select' },
+      options    : ['', 'xxs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'],
+      description: 'A type-scale step name, not a length. Resolves to `var(--typography-fontSize-*)`; anything off the scale is dropped.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "''" }, category: 'Typography' }
+    },
+    color: {
+      control    : { type: 'select' },
+      options    : ['', 'primary', 'strong', 'muted', 'subtle', 'inverse', 'success', 'warning', 'error'],
+      description: 'A semantic colour role, not a CSS colour. Resolves to a palette token; anything else is dropped.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "''" }, category: 'Typography' }
     }
   }
 };
 
-const defaultArgs = { href: '/products', target: '_self', kind: 'primary', underline: false, disabled: false };
+/* Every arg the Playground offers is passed below. fontSize, color,
+   noUnderline and active each had an argTypes entry and a control, and the
+   render function took none of them, so selecting a type step did nothing on
+   any story in this file -- the control was not wired rather than the property
+   being broken. */
+const defaultArgs = {
+  href       : '/products',
+  target     : '_self',
+  kind       : 'primary',
+  underline  : false,
+  noUnderline: false,
+  active     : false,
+  disabled   : false,
+  inline     : false,
+  fontSize   : '',
+  color      : ''
+};
 
 const render = (args) => html`
   <bd-link
     href="${args.href}"
     target="${args.target}"
-    kind="${args.kind}"
+    variant="${args.kind}"
+    font-size="${args.fontSize}"
+    color="${args.color}"
     ?underline="${args.underline}"
+    ?no-underline="${args.noUnderline}"
+    ?active="${args.active}"
+    ?inline="${args.inline}"
     ?disabled="${args.disabled}"
   >Click this link</bd-link>
 `;
@@ -81,7 +159,7 @@ const render = (args) => html`
 
 export const Default = {
   name      : 'Default (Primary)',
-  render    : () => html`<bd-link href="/products" kind="primary">View products</bd-link>`,
+  render    : () => html`<bd-link href="/products" variant="primary">View products</bd-link>`,
   parameters: { docs: { description: { story: 'Default primary link rendered as an `<a>` tag.' } } }
 };
 
@@ -89,9 +167,9 @@ 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>
+      <bd-link href="#" variant="primary">Primary</bd-link>
+      <bd-link href="#" variant="secondary">Secondary</bd-link>
+      <bd-link href="#" variant="light">Light</bd-link>
     </div>
   `,
   parameters: { docs: { description: { story: 'All three `kind` values. Light kind is shown on a dark background for visibility.' } } }
@@ -101,8 +179,8 @@ 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>
+      <bd-link href="#" variant="primary" underline>Primary underlined</bd-link>
+      <bd-link href="#" variant="secondary" underline>Secondary underlined</bd-link>
     </div>
   `,
   parameters: { docs: { description: { story: '`underline` prop adds `bd-link--underline` class.' } } }
@@ -110,7 +188,7 @@ export const WithUnderline = {
 
 export const Disabled = {
   name      : 'Disabled',
-  render    : () => html`<bd-link href="/products" kind="primary" disabled>Unavailable link</bd-link>`,
+  render    : () => html`<bd-link href="/products" variant="primary" disabled>Unavailable link</bd-link>`,
   parameters: { docs: { description: { story: 'Disabled link renders as `<span>` — not clickable, not navigable.' } } }
 };
 
@@ -118,9 +196,9 @@ 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>
+      <bd-link href="#" variant="primary"   disabled>Primary disabled</bd-link>
+      <bd-link href="#" variant="secondary" disabled>Secondary disabled</bd-link>
+      <bd-link href="#" variant="light"     disabled>Light disabled</bd-link>
     </div>
   `,
   parameters: { docs: { description: { story: 'Disabled state across all three kind variants.' } } }
@@ -129,7 +207,7 @@ export const DisabledAllKinds = {
 export const OpenInNewTab = {
   name  : 'Opens in New Tab',
   render: () => html`
-    <bd-link href="https://bitdefender.com" kind="primary" target="_blank">
+    <bd-link href="https://bitdefender.com" variant="primary" target="_blank">
       Visit Bitdefender.com
     </bd-link>
   `,
@@ -138,24 +216,37 @@ export const OpenInNewTab = {
 
 export const InlineWithText = {
   name  : 'Inline Within Text',
+  /* Three paragraphs, because one at 16px cannot show this: 16px is the single
+     size at which a link that ignores its context still looks right. The first
+     two inherit; the third is the same markup without `inline`. */
   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>
+    <p style="font-size: var(--typography-fontSize-sm); line-height: var(--typography-lineHeight-relaxed)">
+      At the small step, Bitdefender offers award-winning protection.
+      <bd-link href="/products" variant="primary" inline underline>View all products</bd-link>
       to find the right plan for you.
     </p>
+    <p style="font-size: var(--typography-fontSize-lg); line-height: var(--typography-lineHeight-relaxed)">
+      At the large step, the same link follows the sentence up.
+      <bd-link href="/products" variant="primary" inline underline>View all products</bd-link>
+      to find the right plan for you.
+    </p>
+    <p style="font-size: var(--typography-fontSize-lg); line-height: var(--typography-lineHeight-relaxed)">
+      Without <code>inline</code>, at that same large step, it does not:
+      <bd-link href="/products" variant="primary" underline>View all products</bd-link>
+      holds 1rem whatever surrounds it.
+    </p>
   `,
-  parameters: { docs: { description: { story: 'Link used inline within a paragraph of text.' } } }
+  parameters: { docs: { description: { story: '`inline` takes the size, leading, tracking and family from the sentence — the `--typography-link-default-*` role, whose axes are all `inherit`. Without it the link reads the standalone role and renders 1rem in any context, which is why the third paragraph disagrees with the two above it. `fontSize` is suppressed while `inline` is set, because the sentence has already answered that question.' } } }
 };
 
 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>
+      <bd-link href="/consumer"      variant="light">Consumer</bd-link>
+      <bd-link href="/small-business" variant="light">Small Business</bd-link>
+      <bd-link href="/business"      variant="light">Business</bd-link>
+      <bd-link href="/partners"      variant="light">Partners</bd-link>
     </nav>
   `,
   parameters: { docs: { description: { story: 'Light kind links used as navigation items on a dark background.' } } }
@@ -165,5 +256,8 @@ export const Playground = {
   name      : '🛝 Playground',
   args      : { ...defaultArgs },
   render,
-  parameters: { docs: { description: { story: 'Interactive playground. Adjust href, target, kind, underline, and disabled via Controls.' } } }
-};
+  parameters: {
+    controls: { disable: false },
+    docs    : { description: { story: 'Interactive playground, and the only story wired to args. Every control here reaches the element: href, target, kind, underline, no-underline, active, disabled, inline, font-size and color.' } }
+  }
+};

package/src/components/list/list-item/list-item.css.js

@@ -2,6 +2,16 @@ import { css } from "lit";
 
 export default css`
 @layer bd-components {
+  /* Sans, and the same ink as bd-p. This was set in --font-family-mono, so a
+     bulleted list rendered in monospace while the paragraph above it was in
+     sans — the only text atom in the system that was not. That token was also
+     a duplicate of --typography-fontFamily-mono carrying a shorter fallback
+     stack, so the two spellings of "mono" degraded differently; it has been
+     retired.
+
+     The ink was neutral-700 against bd-p's neutral-1000 and bd-display's
+     neutral-900. A list and the paragraph beside it are the same running text
+     and now take the same role. */
   .bd-list-item {
     margin: 0;
     padding: 0;
@@ -9,25 +19,35 @@ export default css`
     display: flex;
     align-items: flex-start;
     gap: var(--spacing-8);
-    color: var(--color-neutral-700);
-    line-height: var(--typography-lineHeight-normal);
-    font-family: var(--font-family-mono);
+    color: var(--color-text-primary);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   /* === SIZE VARIANTS === */
 
+  /* The size ladder is body-small / body-regular / body-large: a list item is
+     running prose, which is what the body-* family is for. The leading used to
+     sit once on the base rule as lineHeight-normal for all three rungs; it now
+     comes from each rung's own role, which is what makes the ladder a role
+     ladder rather than three sizes over one shared number. */
   .bd-list-item.sm {
-    font-size: var(--typography-fontSize-sm);
+    --bd-li-line-height: var(--typography-body-small-lineHeight);
+    font-size: var(--typography-body-small-fontSize);
+    line-height: var(--bd-li-line-height);
     margin-bottom: var(--spacing-4);
   }
 
   .bd-list-item.md {
-    font-size: var(--typography-fontSize-base);
+    --bd-li-line-height: var(--typography-body-regular-lineHeight);
+    font-size: var(--typography-body-regular-fontSize);
+    line-height: var(--bd-li-line-height);
     margin-bottom: var(--bd-li-margin-bottom, var(--spacing-6));
   }
 
   .bd-list-item.lg {
-    font-size: var(--typography-fontSize-lg);
+    --bd-li-line-height: var(--typography-body-large-lineHeight);
+    font-size: var(--typography-body-large-fontSize);
+    line-height: var(--bd-li-line-height);
     margin-bottom: var(--spacing-8);
   }
 
@@ -38,8 +58,13 @@ export default css`
     align-self: flex-start;
     /* centrează markerul pe înălțimea unei linii de text,
        calculat din line-height-ul itemului, indiferent de size.
-       Se aplică doar markerelor "forme" (bullet, check) — nu textului (number). */
-    margin-top: calc((1em * var(--typography-lineHeight-normal) - var(--bd-li-marker-size, var(--spacing-6))) / 2);
+       Se aplică doar markerelor "forme" (bullet, check) — nu textului (number).
+
+       Reads the rung's own leading, not a fixed 1.5. The three rungs used to
+       share one leading on the base rule, so hard-coding it here was
+       equivalent; body-large is 1.625, so it no longer is, and a fixed ratio
+       would leave the bullet 1.125px above the line's centre at lg. */
+    margin-top: calc((1em * var(--bd-li-line-height, var(--typography-body-regular-lineHeight)) - var(--bd-li-marker-size, var(--spacing-6))) / 2);
   }
 
   /* Bullet List */
@@ -47,8 +72,8 @@ export default css`
     --bd-li-marker-size: var(--spacing-6);
     width: var(--bd-li-marker-size);
     height: var(--bd-li-marker-size);
-    background-color: var(--bd-li-marker-color, var(--color-neutral-1000));
-    border-radius: 50%;
+    background-color: var(--bd-li-marker-color, var(--color-text-primary));
+    border-radius: var(--radius-full);
   }
 
   /* Number List */
@@ -62,28 +87,54 @@ export default css`
 
   .bd-list-item.number .bd-list-item-marker::before {
     content: counter(bd-list-counter) ".";
+      /* no role: a marker glyph, not running prose. The number or bullet in
+         front of a list item is a symbol sized and weighted to sit against the
+         text beside it, the same category typography rule 7 already covers for
+         an icon-only line box's leading. A role describes text a reader reads
+         as a sentence; it has nothing to say about a glyph. This is the
+         argument for every "no role: glyph/marker/placeholder" marker in the
+         package -- the others point here rather than restating it. */
     font-weight: var(--typography-fontWeight-semibold);
-    color: var(--bd-li-marker-color, var(--color-neutral-1000));
+    color: var(--bd-li-marker-color, var(--color-text-primary));
   }
 
   /* Check List */
+  /* green-700, not green-500: the tick is white on this disc, and on
+     green-500 that measures 2.39:1 — it fails 1.4.3 as text and 1.4.11 as a
+     graphic. green-700 gives 4.75 and is the step bd-badge already picked for
+     white-on-green, for the same reason and with the same measurement.
+     .
+     So the disc and the tick are the badge's fill pair, and read it by name:
+     --status-success-fill and --status-success-on-fill. They used to read
+     -accent and --color-text-inverse, which resolve to the same two colours
+     here and are not the same two roles -- a dark theme moves the accent
+     and flips the inverse ink, and the pair it was borrowing from would come
+     apart. */
   .bd-list-item.check .bd-list-item-marker {
     --bd-li-marker-size: var(--spacing-16);
     width: var(--bd-li-marker-size);
     height: var(--bd-li-marker-size);
-    background-color: var(--color-green-500);
-    border-radius: 50%;
+    background-color: var(--status-success-fill);
+    border-radius: var(--radius-full);
     position: relative;
   }
 
-  .bd-list-item.check .bd-list-item-marker::after {
-    content: "✓";
-    color: white;
-    font-size: var(--typography-fontSize-sm);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  /* The tick is bd-check-icon now, not a "✓" in a ::after. A character here was
+     type doing an icon's job -- it changed shape with the font and drew
+     differently on macOS and Windows, on a mark whose whole purpose is to be
+     recognised at 16px. The atom is drawn at the same 2-unit weight as
+     bd-plus-icon and bd-minus-icon, so the three read as one family.
+     .
+     The absolute centring went with it: the marker is a flex box now, which
+     also means no ::after and no transform to keep in step with the disc. The
+     icon inherits the white through currentColor from the colour set here, so
+     the contrast argument above still holds and is still measured on the disc
+     rather than on the glyph. */
+  .bd-list-item.check .bd-list-item-marker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--status-success-on-fill);
   }
 
   /* Custom Icon */
@@ -92,7 +143,8 @@ export default css`
     width: var(--bd-li-marker-size);
     height: var(--bd-li-marker-size);
     flex-shrink: 0;
-    margin-top: calc((1em * var(--typography-lineHeight-normal) - var(--bd-li-marker-size)) / 2);
+    /* the rung's own leading -- see .bd-list-item-marker above. */
+    margin-top: calc((1em * var(--bd-li-line-height, var(--typography-body-regular-lineHeight)) - var(--bd-li-marker-size)) / 2);
   }
 
   /* No Marker */

package/src/components/list/list-item/list-item.js

@@ -1,30 +1,48 @@
 import { LitElement, html, nothing } from "lit";
-import { tokens } from "../../../tokens/tokens.js";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../../tokens/tokens.js";
 import listItemCSS from "./list-item.css.js";
+import "../../icons/check-icon.js";
+
+// the size steps list-item.css.js actually implements
+const SIZE_STEPS = ['sm', 'md', 'lg'];
+
+/** The markers this item can draw. */
+const MARKERS = ['bullet', 'number', 'check', 'none'];
 
 export class BdListItem extends LitElement {
   static properties = {
-    kind : { type: String }, // bullet, number, check, none
-    size : { type: String }, // sm, md, lg
-    icon : { type: String }, // custom icon URL
-    color: { type: String }  // optional
+    variant: { type: String, reflect: true },
+    /** @deprecated pass `variant`. */
+    kind   : { type: String },
+    size   : { type: String }, // sm, md, lg
+    icon   : { type: String }, // custom icon URL
+    color  : { type: String }  // optional
   };
 
   constructor() {
     super();
-    this.kind = "bullet";
+    this.variant = "bullet";
+    this.kind = "";
     this.size = "md";
     this.icon = "";
     this.color = "";
   }
 
+  willUpdate(changed) {
+    if (changed.has("kind") && this.kind) this.variant = this.kind;
+    if (changed.has("variant") || changed.has("kind")) {
+      if (!MARKERS.includes(this.variant)) this.variant = "bullet";
+    }
+  }
+
   render() {
     const style = this.color
       ? `color: ${this.color}; --bd-li-marker-color: ${this.color};`
       : "";
 
     return html`
-      <li class="bd-list-item ${this.kind} ${this.size}" style="${style}">
+      <li class="bd-list-item ${this.variant} ${SIZE_STEPS.includes(this.size) ? this.size : 'md'}" style="${style}">
         ${this._renderMarker()}
         <span class="bd-list-item-content">
           <slot></slot>
@@ -34,16 +52,20 @@ export class BdListItem extends LitElement {
   }
 
   _renderMarker() {
-    if (this.kind === "none") return nothing;
+    if (this.variant === "none") return nothing;
 
     if (this.icon) {
       return html`<img src="${this.icon}" alt="" class="bd-list-item-custom-icon" />`;
     }
 
-    return html`<span class="bd-list-item-marker"></span>`;
+    return html`<span class="bd-list-item-marker">${
+      this.variant === "check"
+        ? html`<bd-check-icon size="xs" aria-hidden="true"></bd-check-icon>`
+        : nothing
+    }</span>`;
   }
 
-  static styles = [tokens, listItemCSS];
+  static styles = [listItemCSS];
 }
 
 customElements.define("bd-li", BdListItem);

package/src/components/list/list-item/list-item.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import "./list-item.js";
 
 export default {
-  title     : "Components/List/List Item",
+  title     : "Atoms/List item",
   component : "bd-li",
   tags      : ["autodocs"],
   parameters: {
@@ -13,9 +13,9 @@ export default {
 Componentă Lit pentru un element de listă cu marker configurabil.
 
 \`\`\`html
-<bd-li kind="bullet" size="md">Text element</bd-li>
-<bd-li kind="check" size="md">Element bifat</bd-li>
-<bd-li kind="number" size="md">Element numerotat</bd-li>
+<bd-li variant="bullet" size="md">Text element</bd-li>
+<bd-li variant="check" size="md">Element bifat</bd-li>
+<bd-li variant="number" size="md">Element numerotat</bd-li>
 \`\`\`
 
 ### Atribute
@@ -29,8 +29,8 @@ Componentă Lit pentru un element de listă cu marker configurabil.
 \`bd-li\` este destinat uzului în interiorul \`bd-list\`:
 \`\`\`html
 <bd-list type="unordered" spacing="md">
-  <bd-li kind="bullet" size="md">Primul element</bd-li>
-  <bd-li kind="bullet" size="md">Al doilea element</bd-li>
+  <bd-li variant="bullet" size="md">Primul element</bd-li>
+  <bd-li variant="bullet" size="md">Al doilea element</bd-li>
 </bd-list>
 \`\`\`
         `
@@ -38,7 +38,7 @@ Componentă Lit pentru un element de listă cu marker configurabil.
     }
   },
   argTypes: {
-    kind: {
+    variant: {
       control    : { type: "select" },
       options    : ["bullet", "number", "check", "none"],
       description: "Tipul marker-ului",
@@ -64,7 +64,7 @@ export const Default = {
   name  : "Default",
   args  : { kind: "bullet", size: "md" },
   render: ({ kind, size }) => html`
-    <bd-li kind="${kind}" size="${size}">Default list item with bullet marker</bd-li>
+    <bd-li variant="${kind}" size="${size}">Default list item with bullet marker</bd-li>
   `
 };
 
@@ -74,7 +74,7 @@ export const Bullet = {
   name  : "Bullet",
   args  : { kind: "bullet", size: "md" },
   render: ({ kind, size }) => html`
-    <bd-li kind="${kind}" size="${size}">Item with bullet marker</bd-li>
+    <bd-li variant="${kind}" size="${size}">Item with bullet marker</bd-li>
   `
 };
 
@@ -84,7 +84,7 @@ export const Number = {
   name  : "Number",
   args  : { kind: "number", size: "md" },
   render: ({ kind, size }) => html`
-    <bd-li kind="${kind}" size="${size}">Item with number marker</bd-li>
+    <bd-li variant="${kind}" size="${size}">Item with number marker</bd-li>
   `
 };
 
@@ -94,7 +94,7 @@ export const Check = {
   name  : "Check",
   args  : { kind: "check", size: "md" },
   render: ({ kind, size }) => html`
-    <bd-li kind="${kind}" size="${size}">Item with checkmark marker</bd-li>
+    <bd-li variant="${kind}" size="${size}">Item with checkmark marker</bd-li>
   `
 };
 
@@ -104,7 +104,7 @@ export const None = {
   name  : "None",
   args  : { kind: "none", size: "md" },
   render: ({ kind, size }) => html`
-    <bd-li kind="${kind}" size="${size}">Item without marker</bd-li>
+    <bd-li variant="${kind}" size="${size}">Item without marker</bd-li>
   `
 };
 
@@ -115,9 +115,9 @@ export const SizeVariants = {
   parameters: { controls: { disable: true } },
   render    : () => html`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
-      <bd-li kind="bullet" size="sm">Small list item (sm)</bd-li>
-      <bd-li kind="bullet" size="md">Medium list item (md)</bd-li>
-      <bd-li kind="bullet" size="lg">Large list item (lg)</bd-li>
+      <bd-li variant="bullet" size="sm">Small list item (sm)</bd-li>
+      <bd-li variant="bullet" size="md">Medium list item (md)</bd-li>
+      <bd-li variant="bullet" size="lg">Large list item (lg)</bd-li>
     </div>
   `
 };
@@ -129,10 +129,10 @@ export const AllKinds = {
   parameters: { controls: { disable: true } },
   render    : () => html`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
-      <bd-li kind="bullet" size="md">Bullet — marker punct negru</bd-li>
-      <bd-li kind="number" size="md">Number — marker număr</bd-li>
-      <bd-li kind="check"  size="md">Check — marker bifă verde</bd-li>
-      <bd-li kind="none"   size="md">None — fără marker</bd-li>
+      <bd-li variant="bullet" size="md">Bullet — marker punct negru</bd-li>
+      <bd-li variant="number" size="md">Number — marker număr</bd-li>
+      <bd-li variant="check"  size="md">Check — marker bifă verde</bd-li>
+      <bd-li variant="none"   size="md">None — fără marker</bd-li>
     </div>
   `
 };
@@ -143,7 +143,7 @@ export const WithRichContent = {
   name      : "Cu conținut rich",
   parameters: { controls: { disable: true } },
   render    : () => html`
-    <bd-li kind="bullet" size="lg">
+    <bd-li variant="bullet" size="lg">
       <strong>Element evidențiat</strong> cu text descriptiv suplimentar care se poate întinde
       pe mai multe rânduri, menținând alinierea corectă față de marker.
     </bd-li>
@@ -157,9 +157,9 @@ export const Playground = {
   args  : { kind: "bullet", size: "md" },
   render: ({ kind, size }) => html`
     <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-      <bd-li kind="${kind}" size="${size}">Primul element de listă</bd-li>
-      <bd-li kind="${kind}" size="${size}">Al doilea element de listă</bd-li>
-      <bd-li kind="${kind}" size="${size}">Al treilea element de listă</bd-li>
+      <bd-li variant="${kind}" size="${size}">Primul element de listă</bd-li>
+      <bd-li variant="${kind}" size="${size}">Al doilea element de listă</bd-li>
+      <bd-li variant="${kind}" size="${size}">Al treilea element de listă</bd-li>
     </div>
   `
 };