@repobit/dex-system-design 0.25.12 → 0.26.0

package/src/tokens/vertical-rhythm.stories.js

@@ -0,0 +1,224 @@
+import { html } from 'lit';
+import { docsPage, refSection, resolve, toPx } from './story-chrome.js';
+/* The registry itself, not a copy of it. A table transcribed by hand is a table
+   that drifts from the thing it documents the first time either one changes. */
+import pairings from '../../scripts/typography-pairings.json';
+
+export default {
+  title: 'Foundations/Typography/Vertical Rhythm',
+  tags : ['autodocs']
+};
+
+/* Every role the package ships, in the order a page uses them. The samples are
+   rendered from the tokens rather than transcribed, so this page cannot drift
+   from them: if a role changes, this changes with it. */
+const ROLES = [
+  ['display-sm', 'display', 'A number or word used as an image: a statistic, a headline figure.'],
+  ['display-md', 'display', 'The same, one step larger.'],
+  ['display-lg', 'display', 'The largest display step in use.'],
+  ['heading-h1', 'heading', 'The page title. One per page.'],
+  ['heading-h2', 'heading', 'A page section: a region the page is built out of.'],
+  ['heading-h3', 'heading', "A component section: the title of a collection a component owns."],
+  ['heading-h4', 'heading', 'A sub-section, or a card title in a large panel.'],
+  ['heading-h5', 'heading', 'An item title: the title of one card inside a collection.'],
+  ['heading-h6', 'heading', 'The smallest heading; a column head in a footer.'],
+  ['body-lead', 'body', 'The paragraph directly under a page title.'],
+  ['body-large', 'body', 'Body copy that wants room, in a wide measure.'],
+  ['body-regular', 'body', 'Default running text.'],
+  ['body-small', 'body', 'Supporting copy: a card body, a quote, a caption line that wraps.'],
+  ['control-label-xl', 'label', 'The name of a large control.'],
+  ['label-large', 'label', 'The name of a control at default size.'],
+  ['label-default', 'label', 'A form label.'],
+  ['label-small', 'label', 'A small label: a badge, a tag, a field hint.'],
+  ['label-extra-small', 'label', 'The smallest label step, 11px.'],
+  ['caption-default', 'caption', 'Text under an image or a figure.'],
+  ['caption-small', 'caption', 'The same, tighter.'],
+  ['link-standalone', 'link', 'A link that is not inside a sentence.'],
+  ['code-block', 'code', 'A block of monospaced code.']
+];
+
+const DIACRITICS = 'Ă Â Î Ș Ț ă â î ș ț';
+const MIXED = 'AI Security 2026 — Minimum / Maximum';
+const DESCENDERS = 'gjpqy ÅÎȘț';
+const TWO_LINE = 'A sentence just long enough that it takes two lines and no more.';
+const WRAPPING = `A line long enough to wrap more than once, so the space between the lines
+  is something you can look at rather than something you have to take on trust.`;
+
+const axes = role => {
+  const size = resolve(`--typography-${role}-fontSize`);
+  const lh = resolve(`--typography-${role}-lineHeight`);
+  const px = parseFloat(toPx(size));   // toPx returns a px string, not a number
+  const ratio = lh && !Number.isNaN(Number(lh)) && px ? Number(lh) : null;
+  return {
+    size, lh, px,
+    ratio : ratio ? Math.round(ratio * 1000) / 1000 : lh,
+    box   : ratio && px ? `${Math.round(ratio * px * 100) / 100}px` : '—',
+    weight: resolve(`--typography-${role}-fontWeight`),
+    track : resolve(`--typography-${role}-letterSpacing`),
+    family: (resolve(`--typography-${role}-fontFamily`).split(',')[0] || '').replace(/["']/g, '')
+  };
+};
+
+const styleFor = role => `
+  font-size: var(--typography-${role}-fontSize);
+  line-height: var(--typography-${role}-lineHeight);
+  font-weight: var(--typography-${role}-fontWeight);
+  letter-spacing: var(--typography-${role}-letterSpacing);
+  font-family: var(--typography-${role}-fontFamily);
+  margin: 0;`;
+
+const sample = (role, text, extra = '') =>
+  html`<p style="${styleFor(role)}${extra}">${text}</p>`;
+
+const roleBlock = ([role, family, responsibility]) => {
+  const a = axes(role);
+  return html`
+    <div style="padding:var(--spacing-24) 0;border-top:var(--border-width-1) solid var(--color-border-subtle);overflow-x:auto">
+      <p style="margin:0 0 var(--spacing-12);font-family:var(--typography-fontFamily-mono);font-size:var(--typography-fontSize-xs);color:var(--color-text-muted)">
+        <b style="color:var(--color-text-primary)">${role}</b>
+        · ${family}
+        · size ${a.size}${a.px ? ` (${a.px}px)` : ''}
+        · line-height ${a.lh}
+        · ratio ${a.ratio}
+        · line box ${a.box}
+        · weight ${a.weight}
+        · tracking ${a.track}
+        · family ${a.family}
+      </p>
+      <p style="margin:0 0 var(--spacing-12);color:var(--color-text-secondary);font-size:var(--typography-fontSize-sm)">
+        ${responsibility}
+      </p>
+      ${sample(role, 'One line, the way most of these are used.')}
+      ${sample(role, TWO_LINE, 'margin-top:var(--spacing-8);max-width:26ch')}
+      ${sample(role, WRAPPING, 'margin-top:var(--spacing-8);max-width:34ch')}
+      ${sample(role, DIACRITICS, 'margin-top:var(--spacing-8)')}
+      ${sample(role, MIXED, 'margin-top:var(--spacing-8)')}
+      ${sample(role, DESCENDERS, 'margin-top:var(--spacing-8)')}
+    </div>`;
+};
+
+const MATRIX = Object.entries(pairings.pairings)
+  .map(([size, entry]) => [size, entry.leadings.join(', '), entry.roles]);
+const EXCEPTIONS = Object.entries(pairings.knownExceptions);
+
+export const VerticalRhythm = () =>
+  docsPage({
+    title: 'Vertical rhythm',
+    lede : `Every typography role the package ships, with the leading it resolves to and
+            what that leading does to real text — including the Romanian diacritics and
+            the descenders that decide whether a line box is actually big enough.`,
+    note: html`<b>Roles define intent. The matrix defines what is technically approved.
+            Passing the matrix does not establish semantic correctness.</b>
+            16px at 1.25 is approved because control text needs it; that does not make it
+            body typography. When you are choosing, choose a <i>role</i> — the matrix only
+            exists to catch a pairing nobody has ever looked at.`,
+    children: html`
+      ${refSection({
+        name    : 'Semantic typography roles',
+        meta    : `${ROLES.length} roles, rendered from the tokens`,
+        children: html`
+        <p>
+          Each block shows one line, the diacritics, a mixed sample, and the same role
+          wrapping. The wrapping sample is the one worth looking at: a leading that is
+          comfortable on one line can be too tight or too loose across three.
+        </p>
+        ${ROLES.map(roleBlock)}`
+      })}
+
+      ${refSection({
+        name    : 'Technical compatibility boundaries',
+        meta    : 'not a semantic map',
+        children: html`
+        <p style="border-left:var(--border-width-4) solid var(--color-border-brand);padding-left:var(--spacing-16)">
+          <b>Compatibility does not imply semantic suitability.</b><br />
+          The compatibility matrix does not assign semantic meaning. Typography roles
+          define intent. The matrix only identifies size × leading combinations known to
+          be technically valid.
+        </p>
+        <p>
+          A size carries more than one leading because more than one role shares it and
+          their text behaves differently. Anything not listed is not forbidden — it is
+          <i>unreviewed</i>, and <code>lint:tokens</code> reports it as
+          <code>typography-pairing</code> so somebody decides rather than the number
+          deciding.
+        </p>
+        <div class="table-scroll">
+          <table>
+            <caption>Leadings approved for each font size, and the roles they exist for</caption>
+            <thead>
+              <tr>
+                <th scope="col">Size</th>
+                <th scope="col">Approved leadings</th>
+                <th scope="col">Roles this exists for</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${MATRIX.map(([size, leadings, why]) => html`
+                <tr>
+                  <td class="num">${size}px</td>
+                  <td class="num">${leadings}</td>
+                  <td>${why}</td>
+                </tr>`)}
+            </tbody>
+          </table>
+        </div>
+        <p>
+          Both tables on this page are read from
+          <code>scripts/typography-pairings.json</code> at build time rather than
+          transcribed, so neither can drift from what the lint enforces.
+        </p>
+
+        <div class="table-scroll">
+          <table>
+            <caption>Recorded exceptions: pairings that stay as they are, and why</caption>
+            <thead>
+              <tr>
+                <th scope="col">Where</th>
+                <th scope="col">Pairing</th>
+                <th scope="col">Status</th>
+                <th scope="col">Why it stays</th>
+                <th scope="col">Review trigger</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${EXCEPTIONS.map(([name, e]) => html`
+                <tr>
+                  <td><code>${name}</code><br /><span style="color:var(--color-text-muted)">${e.role}</span></td>
+                  <td class="num">${e.pairing}</td>
+                  <td class="num">${e.status}</td>
+                  <td>${e.reason}</td>
+                  <td>${e.reviewTrigger}</td>
+                </tr>`)}
+            </tbody>
+          </table>
+        </div>
+
+        <h3 style="font-size:var(--typography-fontSize-base);margin:var(--spacing-32) 0 var(--spacing-8)">
+          Everything set at tight is running on the ink floor
+        </h3>
+        <p>
+          Measured two ways that agree. Canvas text metrics against IBM Plex Sans at every
+          production weight, with each face loaded before measuring, give 59.09px of glyph
+          ink at 48px/700 against a 60px line box — <b>0.91px of clearance</b>. Reading the
+          glyph outlines straight out of the woff2 gives the same figure as a ratio:
+          <b>1.231</b>, the point at which the ink of one line meets the ink of the next.
+        </p>
+        <p>
+          That floor is set by Romanian. <code>ș ț Ș Ț</code> reach −0.275em in Bold, a
+          third deeper than <code>g</code>, and the tallest accented capitals reach
+          +0.977em. Per weight the ink spans 1.174 Light, 1.194 Regular, 1.219 Medium,
+          1.235 SemiBold, 1.252 Bold.
+        </p>
+        <p>
+          Nothing clips: <code>ĂÂÎȘȚ</code> and <code>gjpqy</code> render whole at every
+          role, which is what the samples above are for. But the margin at
+          <code>tight</code> is thin and deliberate. The six display roles and
+          heading-h1 and heading-h2 all run 1.25, which at 36px is <b>0.68px</b> of
+          clearance and at 48px is 0.91px — <b>the least margin in the system, and the
+          reason the display ramp was not tightened further</b> when the leading was
+          reviewed against the font in September 2026. Every other role clears by between
+          1.6px and 4.6px.
+        </p>`
+      })}
+    `
+  });

package/src/components/awards/awards-icon.js

@@ -1,56 +0,0 @@
-import { LitElement, css, html } from "lit";
-
-/**
- * Optional `src` (image URL) with `label` for alt text, or default slot for inline SVG.
- */
-class BdIcon extends LitElement {
-  static properties = {
-    src   : { type: String },
-    label : { type: String },
-    width : { type: String },
-    height: { type: String }
-  };
-
-  static styles = css`
-    :host {
-      display: inline-block;
-      vertical-align: middle;
-      line-height: 0;
-      color: var(--color-blue-500);
-    }
-    .wrap,
-    img {
-      display: block;
-      width: var(--bd-icon-w, auto);
-      height: var(--bd-icon-h, auto);
-    }
-    img {
-      object-fit: contain;
-    }
-    ::slotted(svg) {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  `;
-
-  render() {
-    const w = this.width || "";
-    const h = this.height || "";
-    const style = `${w ? `--bd-icon-w:${w};` : ""}${h ? `--bd-icon-h:${h};` : ""}`;
-    if (this.src) {
-      return html`
-        <img
-          src="${this.src}"
-          alt="${this.label || ""}"
-          style="${style}"
-          loading="lazy"
-          decoding="async"
-        />
-      `;
-    }
-    return html`<span class="wrap" style="${style}"><slot></slot></span>`;
-  }
-}
-
-customElements.define("bd-icon", BdIcon);

package/src/components/awards/awards-light.js

@@ -1,240 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
-import "../awards/awards-icon.js";
-import { awardsCSS } from "./awards.css.js";
-
-const awardslightOverride = css`
-  .bd-awards-root {
-    gap: 0;
-  }
-`;
-export class AwardsSection extends LitElement {
-  static properties = {
-    tagline       : { type: String },
-    headline      : { type: String },
-    subtext       : { type: String },
-    secretTitle   : { type: String },
-    secretSubtext : { type: String },
-    desktopAwards : { type: Array },
-    features      : { type: Array },
-    _narrow       : { state: true },
-    _featureNarrow: { state: true }
-  };
-
-
-  static styles = [tokens, awardsCSS, awardslightOverride];
-
-  /** @type {MediaQueryList | null} */
-  _mql599 = null;
-  /** @type {MediaQueryList | null} */
-  _mql767 = null;
-  _on599 = () => {
-    this._narrow = this._mql599?.matches ?? false;
-  };
-  _on767 = () => {
-    this._featureNarrow = this._mql767?.matches ?? false;
-  };
-
-  constructor() {
-    super();
-    this.tagline = "You're Making A Great Choice";
-    this.headline =
-      "World-class security software you can trust. Always.";
-    this.subtext =
-      "We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.";
-    this.secretTitle = "What's our secret";
-    this.secretSubtext =
-      "At the heart of Bitdefender lies a powerhouse of proprietary technology, setting it miles apart from the competition.";
-
-    this.desktopAwards = [
-      {
-        label : "PC MAG\nEDITORS' CHOICE",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/pc-mag.svg",
-        id    : "pc-mag"
-      },
-      {
-        label : "AV\ncomparatives",
-        type  : "dark",
-        format: "svg",
-        src   : "/assets/av-comparatives.svg",
-        id    : "av-comparatives"
-      },
-      {
-        label : "Best\nBrands\n2024",
-        type  : "dark",
-        format: "svg",
-        src   : "/assets/best-brands.svg",
-        id    : "best-brands"
-      },
-      {
-        label : "PC\nChoice\n2024",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/pc-mag-2024.svg",
-        id    : "pc-mag-2024"
-      },
-      {
-        label : "PC MAG\nREADERS'\nCHOICE",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/pc-mag-readers.svg",
-        id    : "pc-mag-readers"
-      },
-      {
-        label : "PC\nBusiness\nChoice",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/pc-mag-business.svg",
-        id    : "pc-mag-business"
-      },
-      {
-        label : "AV\nTEST\nTOP\nPRODUCT",
-        type  : "red",
-        format: "svg",
-        src   : "/assets/top-product.svg",
-        id    : "top-product"
-      }
-    ];
-
-    this.features = [
-      {
-        icon : "brain",
-        title: "Machine Learning",
-        description:
-          "Imagine Bitdefender as a super-smart detective, constantly learning and getting better at spotting bad guys. Just like how you learn from your experiences, Bitdefender learns from millions of cyber threats it encounters every day. It studies their patterns, figures out their tricks, and uses that knowledge to protect your devices from future attacks."
-      },
-      {
-        icon : "chart",
-        title: "Behavioral Analysis",
-        description:
-          "Bitdefender keeps an eye on how you and your devices normally behave. So, when something unusual happens, like a strange file trying to sneak into your computer or a suspicious website trying to steal your info, Bitdefender sounds the alarm. It's like having a loyal sidekick that never sleeps, always on the lookout for trouble and ready to jump into action to keep you safe."
-      }
-    ];
-
-    this._narrow = false;
-    this._featureNarrow = false;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (typeof window !== "undefined" && window.matchMedia) {
-      this._mql599 = window.matchMedia("(max-width: 599px)");
-      this._mql767 = window.matchMedia("(max-width: 767px)");
-      this._narrow = this._mql599.matches;
-      this._featureNarrow = this._mql767.matches;
-      this._mql599.addEventListener("change", this._on599);
-      this._mql767.addEventListener("change", this._on767);
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._mql599?.removeEventListener("change", this._on599);
-    this._mql767?.removeEventListener("change", this._on767);
-  }
-
-  _renderBadge(award) {
-    const ariaLabel = award.label.replace(/\n/g, " ");
-    const classes = `bd-awards-badge ${award.type === "dark" ? "bd-awards-badge--dark" : ""}`;
-    return html`
-      <div class="${classes}" data-award-id="${award.id}" role="listitem">
-        <bd-icon src="${award.src}" label="${ariaLabel}"></bd-icon>
-      </div>
-    `;
-  }
-
-  _renderFeature(f) {
-    const narrow = this._featureNarrow;
-    const iconSrc =
-      f.icon === "brain"
-        ? "/assets/machine-learning.svg"
-        : "/assets/analysis.svg";
-
-    return html`
-      <article class="bd-awards-feature-card">
-        <div class="bd-awards-feature-icon" aria-hidden="true">
-          <bd-icon src="${iconSrc}" label=""></bd-icon>
-        </div>
-        <div class="bd-awards-feature-text">
-          ${narrow
-            ? html`<bd-h as="h6" class="bd-awards-feature-title">${f.title}</bd-h>`
-            : html`<bd-h as="h4" class="bd-awards-feature-title">${f.title}</bd-h>`}
-          ${narrow
-            ? html`<bd-p kind="small" class="bd-awards-feature-desc">${f.description}</bd-p>`
-            : html`<bd-p kind="regular" class="bd-awards-feature-desc">${f.description}</bd-p>`}
-        </div>
-      </article>
-    `;
-  }
-
-  render() {
-    const narrow = this._narrow;
-
-    return html`
-      <section
-        class="bd-awards-root"
-        aria-label="Awards and recognition"
-      >
-      <div class="bd-awards-trust-banner">
-        <div class="bd-awards-trust-intro">
-        <span class="bd-awards-laurel-icon" aria-hidden="true">
-          <bd-icon
-            label=""
-          >
-            <svg
-              width="80"
-              height="80"
-              viewBox="0 0 80 80"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <path
-                d="M48.0751 11.994C48.0751 17.6107 52.457 21.9791 58.0908 21.9791C58.0908 16.4873 53.5837 11.994 48.0751 11.994ZM61.8466 19.7325C62.9734 16.737 65.1017 13.9911 68.1064 12.2437C68.9828 11.7444 70.1096 12.1189 70.6103 12.8677L72.7387 16.6121C75.3678 21.1054 75.493 26.3476 73.615 30.8409C74.9922 30.3417 76.6197 29.9672 78.2473 29.9672C79.2488 29.9672 80 30.8409 80 31.8394V35.9583C80 41.2005 77.4961 45.8186 73.615 48.8141C75.2426 49.0637 76.7449 49.563 78.1221 50.4367C78.9984 50.9359 79.2488 52.0592 78.8732 52.8081L76.7449 56.5525C73.2394 62.5436 66.4789 65.4143 60.0939 64.291L59.4679 64.0414C57.9656 63.2925 56.4632 62.6684 54.9609 62.0443C53.8341 61.6699 52.7074 61.2955 51.4554 61.0458C58.9671 57.0518 64.1002 49.0637 64.1002 39.9523C64.1002 34.835 62.2222 29.9672 59.0923 25.9732H58.0908C50.3286 25.9732 44.0689 19.7325 44.0689 11.994V9.99702C44.0689 8.99851 44.9452 8 46.072 8H48.0751C54.9609 8 60.8451 13.1174 61.8466 19.7325ZM39.9374 67.9106V68.0354H37.5587C32.9264 68.0354 28.2942 69.0339 24.1628 71.1558L22.9108 71.7798C21.9092 72.2791 20.6573 71.9046 20.1565 70.9061C19.6557 69.9076 20.1565 68.6595 21.0329 68.1602L22.2848 67.5362C24.1628 66.6625 26.0407 65.9136 28.0438 65.2895C26.6667 64.6654 25.2895 63.9166 24.0376 63.0429C23.1612 63.4173 22.2848 63.6669 21.5336 63.9166C14.6479 65.7888 7.01095 62.918 3.25509 56.5525L1.25196 52.8081C0.751174 52.0592 1.00156 50.9359 1.87793 50.4367C3.25509 49.563 4.75743 49.0637 6.38498 48.8141C2.50391 45.8186 0 41.2005 0 35.9583V31.8394C0 30.8409 0.751174 29.9672 1.75274 29.9672C3.38028 29.9672 5.00782 30.3417 6.38498 30.8409C4.50704 26.3476 4.75743 21.1054 7.26135 16.6121L9.38967 12.8677C9.89045 12.1189 11.0172 11.7444 11.8936 12.2437C14.8983 13.9911 17.0266 16.737 18.1534 19.7325C19.2801 13.1174 25.0391 8 32.0501 8H34.0532C35.0548 8 36.0563 8.99851 36.0563 9.99702V11.994C36.0563 19.7325 29.6714 25.9732 22.0344 25.9732H20.9077C17.7778 29.9672 16.025 34.835 16.025 39.9523C16.025 53.1826 26.7919 63.9166 40.0626 63.9166H42.4413C47.6995 63.9166 52.9577 65.1647 57.7152 67.5362L58.9671 68.1602C59.9687 68.6595 60.3443 69.9076 59.8435 70.9061C59.3427 71.7798 58.0908 72.2791 57.0892 71.7798L55.8372 71.1558C51.7058 69.0339 47.0736 67.9106 42.4413 67.9106H40.0626H39.9374ZM22.0344 21.9791C27.543 21.9791 32.0501 17.6107 32.0501 11.994C29.1706 11.994 26.6667 13.2422 24.7887 15.1144C23.036 16.8618 22.0344 19.3581 22.0344 21.9791ZM12.0188 44.196C12.0188 39.3282 8.5133 35.2094 4.00626 34.2109V35.9583C4.00626 41.2005 7.26135 45.6937 12.0188 47.3163V44.196ZM68.1064 47.3163C72.7387 45.6937 76.1189 41.2005 76.1189 35.9583V34.2109C71.4867 35.3342 68.1064 39.3282 68.1064 44.196V47.3163ZM17.7778 57.6759C15.3991 53.4322 10.3912 51.56 5.88419 53.0578L6.76056 54.5555C9.38967 59.0488 14.5227 61.1707 19.4053 60.297L17.7778 57.6759ZM12.0188 32.3387L13.6463 29.7176C16.025 25.4739 15.1487 20.2317 11.6432 17.1114L10.7668 18.6092C8.13772 23.1025 8.88889 28.5943 12.0188 32.3387ZM66.3537 29.7176L67.9812 32.3387C71.1111 28.5943 71.8623 23.1025 69.2332 18.6092L68.3568 17.1114C64.8513 20.2317 63.975 25.4739 66.3537 29.7176ZM62.2222 57.6759L60.5947 60.297C65.4773 61.1707 70.6103 59.0488 73.2394 54.5555L74.1158 53.0578C69.6088 51.56 64.6009 53.4322 62.2222 57.6759Z"
-                fill="currentColor"
-              />
-            </svg>
-          </bd-icon>
-        </span>
-
-        ${narrow
-          ? html`<bd-p kind="small" class="bd-awards-tagline">${this.tagline}</bd-p>`
-          : html`<bd-p kind="large" class="bd-awards-tagline">${this.tagline}</bd-p>`}
-
-        ${narrow
-          ? html`
-              <bd-h as="h4" class="bd-awards-headline">
-                <span class="bd-awards-headline-line">World-class security</span>
-                <span class="bd-awards-headline-line">software you can trust.</span>
-                <span class="bd-awards-headline-line">Always.</span>
-              </bd-h>
-            `
-          : html`<bd-h as="h3" class="bd-awards-headline">${this.headline}</bd-h>`}
-
-        ${narrow
-          ? html`<bd-p kind="small" class="bd-awards-subtext">${this.subtext}</bd-p>`
-          : html`<bd-p kind="regular" class="bd-awards-subtext">${this.subtext}</bd-p>`}
-        </div>
-
-        <div
-          class="bd-awards-bar"
-          role="list"
-          aria-label="Industry awards"
-        >
-          <div class="bd-awards-row" role="presentation">
-            ${this.desktopAwards.slice(0, 3).map((a) => this._renderBadge(a))}
-          </div>
-          <div class="bd-awards-row" role="presentation">
-            ${this.desktopAwards.slice(3).map((a) => this._renderBadge(a))}
-          </div>
-        </div>
-      </div>
-
-      <div class="bd-awards-lower">
-    `;
-  }
-}
-
-customElements.define("bd-awards-section-light", AwardsSection);

package/src/components/banner/banner.js

@@ -1,60 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
-
-class Banner extends LitElement {
-  static properties = {
-    variant: { type: String, reflect: true }
-  };
-
-  static styles = [tokens, css`
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    .banner {
-      padding: var(--spacing-12) var(--spacing-16);
-      font-family: var(--typography-fontFamily-sans);
-      font-size: var(--typography-body-regular-fontSize);
-      font-weight: var(--typography-fontWeight-normal);
-      color: var(--color-neutral-900);
-      background: var(--color-neutral-50);
-      border-radius: var(--radius-sm);
-    }
-
-    :host([variant="info"]) .banner {
-      background: var(--color-blue-50);
-      color: var(--color-blue-700);
-    }
-
-    :host([variant="success"]) .banner {
-      background: var(--color-green-50);
-      color: var(--color-green-800);
-    }
-
-    :host([variant="warning"]) .banner {
-      background: var(--color-yellow-50);
-      color: var(--color-yellow-800);
-    }
-
-    :host([variant="error"]) .banner {
-      background: var(--color-red-50);
-      color: var(--color-red-700);
-    }
-  `];
-
-  constructor() {
-    super();
-    this.variant = "info";
-  }
-
-  render() {
-    return html`
-      <div class="banner" role="alert">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-customElements.define("bd-banner", Banner);

package/src/components/banner/banner.stories.js

@@ -1,51 +0,0 @@
-import { html } from 'lit';
-import './banner.js';
-
-export default {
-  title   : 'Components/Banner',
-  tags    : ['autodocs'],
-  argTypes: {
-    message: {
-      control    : 'text',
-      description: 'Text mesaj banner',
-      table      : { type: { summary: 'string' } }
-    },
-    variant: {
-      control    : { type: 'select' },
-      options    : ['info', 'success', 'warning', 'error'],
-      description: 'Varianta vizuala',
-      table      : { type: { summary: 'string' }, defaultValue: { summary: 'info' } }
-    }
-  }
-};
-
-export const Info = {
-  name  : 'Info',
-  render: () => html`<bd-banner variant="info">This is an informational message.</bd-banner>`
-};
-
-export const Success = {
-  name  : 'Success',
-  render: () => html`<bd-banner variant="success">Operation completed successfully.</bd-banner>`
-};
-
-export const Warning = {
-  name  : 'Warning',
-  render: () => html`<bd-banner variant="warning">Please review before continuing.</bd-banner>`
-};
-
-export const Error = {
-  name  : 'Error',
-  render: () => html`<bd-banner variant="error">Something went wrong. Please try again.</bd-banner>`
-};
-
-export const Playground = {
-  name: '🛝 Playground',
-  args: {
-    message: 'This is a banner message.',
-    variant: 'info'
-  },
-  render: (args) => html`
-    <bd-banner variant="${args.variant}" message="${args.message}"></bd-banner>
-  `
-};

package/src/components/button/icons.js

@@ -1,24 +0,0 @@
-import { LitElement, css, html } from "lit";
-
-
-class ArrowIconComponent extends LitElement {
-
-  static styles = css`
-    .arrow-icon {
-      height: 10px;
-      font-weight: 600;
-    }
-  `;
-  render() {
-    return html`
-        <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 404.39">
-          <path
-            fill-rule="nonzero"
-            d="M438.95 219.45 0 219.99v-34.98l443.3-.55L269.8 25.79 293.39 0 512 199.92 288.88 404.39l-23.59-25.8z"
-          />
-        </svg>
-      `;
-  }
-}
-
-customElements.define('arrow-icon', ArrowIconComponent);