@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/icons/icons.stories.js

@@ -2,41 +2,121 @@
 import { html } from "lit";
 import "./analysis-icon.js";
 import "./arrow-down-icon.js";
+import "./arrow-icon.js";
+import "./arrow-right-icon.js";
 import "./arrow-up-icon.js";
-import "./av-comparatives-icon.js";
-import "./best-brands-icon.js";
+import "./check-icon.js";
+import "./circle-info-icon.js";
 import "./close-icon.js";
 import "./family-icon.js";
 import "./globe-icon.js";
+import "./guide-icon.js";
 import "./individual-icon.js";
 import "./laurel-icon.js";
 import "./machine-learning-icon.js";
 import "./minus-icon.js";
-import "./pc-mag-2024-icon.js";
-import "./pc-mag-business-icon.js";
-import "./pc-mag-icon.js";
-import "./pc-mag-readers-icon.js";
 import "./plus-icon.js";
-import "./top-product-icon.js";
 
 export default {
-  title   : "Icons",
-  tags    : ["autodocs"],
+  title     : 'Atoms/Icon',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Twelve tintable interface icons, each its own custom element.
+
+They take a \`size\` step from the icon scale and are drawn in \`currentColor\`, so
+an icon follows the text it sits beside and most uses need no colour at all.
+
+\`bd-arrow-icon\`, \`bd-arrow-down-icon\`, \`bd-arrow-right-icon\`,
+\`bd-arrow-up-icon\`, \`bd-check-icon\`, \`bd-circle-info-icon\`,
+\`bd-close-icon\`, \`bd-family-icon\`, \`bd-globe-icon\`,
+\`bd-individual-icon\`, \`bd-minus-icon\`, \`bd-plus-icon\`,
+\`bd-analysis-icon\`, \`bd-guide-icon\`, \`bd-machine-learning-icon\`,
+\`bd-laurel-icon\`
+
+### The brand and award marks live in Atoms/Brand mark
+Eight wordmarks and award badges used to sit here — \`bd-pc-mag-icon\` and the
+rest. They are not icons: they carry their own colours, their own aspect ratios
+(52×48, 68×37, 126×15) and no \`size\` prop, so under this section's rules they
+read as eight exceptions rather than as a family. They are documented in
+**Atoms/Brand mark**, with the reasons they behave differently.
+
+### Usage
+\`\`\`html
+<bd-close-icon></bd-close-icon>                     <!-- the size it was drawn at -->
+<bd-plus-icon size="lg"></bd-plus-icon>             <!-- a step on the icon scale -->
+<bd-globe-icon color="var(--color-text-brand)"></bd-globe-icon>
+\`\`\`
+
+### Props — interface icons
+| Prop | Values | Default |
+|---|---|---|
+| \`size\` | \`xs\` \`sm\` \`md\` \`lg\` \`xl\` \`2xl\` \`3xl\` → \`var(--icon-*-size)\` | the step the artwork was drawn at |
+| \`color\` | any colour; normally left unset | \`currentColor\` |
+| \`width\`, \`height\` | **deprecated** — a pixel size, still honoured | unset |
+
+### What changed, and why
+These used to take \`width\` and \`height\` as numbers written straight into the
+SVG attributes, so no caller could pass \`var(--icon-md-size)\` — which is why
+twenty of the twenty-three \`--icon-*\` tokens had no consumer at all. Defaults
+were 16, 18, 20, 32, 48, 48×49 and 80, three of them on no scale, and the
+colour default was one of three different things depending on the file,
+including the literal string \`"white"\` — so an unstyled \`bd-close-icon\` was
+invisible on a white page.
+
+An off-scale \`size\` is dropped rather than passed through, so a typo falls
+back to the icon's own size instead of rendering something arbitrary.
+
+\`bd-laurel-icon\` keeps an 80px default, which is off the scale: the scale
+stops at 64, and shrinking the awards wreath by a fifth is a design decision
+rather than a cleanup. It carries a \`no token:\` reason saying so.
+
+
+### Pass a token, not a hex value
+\`color\` goes straight into the SVG's \`fill\`, so it accepts any CSS colour — but
+per the foundation rule it should be a token reference such as
+\`var(--color-neutral-900)\`, or better \`currentColor\` so the icon follows the
+text it sits beside. A raw hex value here is the same drift the tokens exist to
+prevent.
+
+### Known inconsistencies
+- **\`bd-laurel-icon\` keeps an 80px default**, off the scale, which stops at 64.
+  Shrinking the awards wreath by a fifth is a design decision rather than a
+  cleanup, so it carries a \`no token:\` reason saying so.
+
+### Accessibility
+Every icon renders its SVG with \`aria-hidden="true"\`, so it is decorative by
+default. That is correct next to a text label. When an icon is the only content
+of a control, put the name on the control — \`aria-label\` on the button, or
+\`<bd-visually-hidden>\` text inside it — because the icon itself will never be
+announced.
+        `
+      }
+    }
+  },
   argTypes: {
     width: {
-      control     : { type: "number", min: 8, max: 128, step: 4 },
-      description : "Lățimea iconiței",
-      defaultValue: 24
+      control    : { type: 'number', min: 8, max: 200, step: 1 },
+      description: 'Rendered width in pixels. Defaults differ per icon, so set it explicitly.',
+      table      : { type: { summary: 'number' }, defaultValue: { summary: "varies" }, category: 'Size' }
     },
     height: {
-      control     : { type: "number", min: 8, max: 128, step: 4 },
-      description : "Înălțimea iconiței",
-      defaultValue: 24
+      control    : { type: 'number', min: 8, max: 200, step: 1 },
+      description: 'Rendered height in pixels. Defaults differ per icon, so set it explicitly.',
+      table      : { type: { summary: 'number' }, defaultValue: { summary: "varies" }, category: 'Size' }
+    },
+    size: {
+      control    : { type: 'select' },
+      options    : ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+      description: 'A step on the icon scale, which is what the manifest asks for — width and height above are the deprecated spelling and are kept because consumers still pass them. The host takes its HEIGHT from the step and lets width follow, so an icon keeps its own aspect ratio.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "varies" }, category: 'Size' }
     },
     color: {
-      control     : { type: "color" },
-      description : "Culoarea iconiței (fill)",
-      defaultValue: "#006DFF"
+      control    : 'text',
+      description: 'Fill colour. Pass a token reference such as var(--color-neutral-900), or currentColor. Interface icons only — brand marks have no color prop.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "varies" }, category: 'Appearance' }
     }
   }
 };
@@ -121,6 +201,66 @@ export const AnalysisIcon = {
   `
 };
 
+/* ─── Icons that had no story of their own ─────────────────────────────────
+   Four of these were drawn or adopted today and only ever reached the All
+   Icons gallery, which disables controls — so they had no sidebar entry and
+   no way to exercise size or colour. guide and laurel predate that. These
+   take `size`, the step the manifest asks for, rather than the deprecated
+   width/height pair the ten stories above still use.                        */
+
+export const ArrowIcon = {
+  name  : "Arrow",
+  args  : { size: "sm", color: "#006DFF" },
+  render: ({ size, color }) => html`
+    <bd-arrow-icon size="${size}" color="${color}"></bd-arrow-icon>
+  `,
+  parameters: { docs: { description: { story: 'The only TRUE arrow in the set — a shaft with a head. `bd-arrow-up-icon`, `bd-arrow-down-icon` and `bd-arrow-right-icon` are chevrons despite their names.' } } }
+};
+
+export const ArrowRightIcon = {
+  name  : "Arrow Right",
+  args  : { size: "md", color: "#006DFF" },
+  render: ({ size, color }) => html`
+    <bd-arrow-right-icon size="${size}" color="${color}"></bd-arrow-right-icon>
+  `,
+  parameters: { docs: { description: { story: 'A CHEVRON, not a shafted arrow — reach for `bd-arrow-icon` if you want the arrow. On the same fill weight as `bd-arrow-up-icon` and `bd-arrow-down-icon` — all three measure a 2.5-unit edge offset against the light weight 1.25, so the family reads as one set.' } } }
+};
+
+export const CheckIcon = {
+  name  : "Check",
+  args  : { size: "sm", color: "#006DFF" },
+  render: ({ size, color }) => html`
+    <bd-check-icon size="${size}" color="${color}"></bd-check-icon>
+  `
+};
+
+export const CircleInfoIcon = {
+  name  : "Circle Info",
+  args  : { size: "xl", color: "#006DFF" },
+  render: ({ size, color }) => html`
+    <bd-circle-info-icon size="${size}" color="${color}"></bd-circle-info-icon>
+  `,
+  parameters: { docs: { description: { story: 'The icon `bd-alert` shows by default for every tone. It was a `bd-missing-icon` placeholder until the artwork arrived.' } } }
+};
+
+export const GuideIcon = {
+  name  : "Guide",
+  args  : { size: "2xl", color: "#006DFF" },
+  render: ({ size, color }) => html`
+    <bd-guide-icon size="${size}" color="${color}"></bd-guide-icon>
+  `,
+  parameters: { docs: { description: { story: 'Byte-identical artwork to `bd-analysis-icon`, and it has no consumer outside these stories. One of the two is probably meant to be a different drawing.' } } }
+};
+
+export const LaurelIcon = {
+  name  : "Laurel",
+  args  : { width: 80, height: 64, color: "#006DFF" },
+  render: ({ width, height, color }) => html`
+    <bd-laurel-icon width="${width}" height="${height}" color="${color}"></bd-laurel-icon>
+  `,
+  parameters: { docs: { description: { story: 'Keeps width/height rather than `size` on purpose: its 80px default is off the icon scale, which stops at 64.' } } }
+};
+
 export const AllIcons = {
   name      : "All Icons",
   parameters: { controls: { disable: true } },
@@ -144,82 +284,74 @@ export const AllIcons = {
       .icon-item span {
         font-size: 12px;
         color: #6b7280;
-        font-family: monospace;
+        font-family: var(--typography-fontFamily-mono);
         text-align: center;
       }
     </style>
     <div class="icons-grid">
       <div class="icon-item">
-        <bd-plus-icon width="24" height="24" color="#006DFF"></bd-plus-icon>
+        <bd-plus-icon width="24" height="24" color="var(--color-blue-500)"></bd-plus-icon>
         <span>bd-plus-icon</span>
       </div>
       <div class="icon-item">
-        <bd-minus-icon width="24" height="24" color="#006DFF"></bd-minus-icon>
+        <bd-minus-icon width="24" height="24" color="var(--color-blue-500)"></bd-minus-icon>
         <span>bd-minus-icon</span>
       </div>
       <div class="icon-item">
-        <bd-individual-icon width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-individual-icon width="32" height="32" color="var(--color-blue-500)"></bd-individual-icon>
         <span>bd-individual-icon</span>
       </div>
       <div class="icon-item">
-        <bd-family-icon width="32" height="32" color="#006DFF"></bd-family-icon>
+        <bd-family-icon width="32" height="32" color="var(--color-blue-500)"></bd-family-icon>
         <span>bd-family-icon</span>
       </div>
       <div class="icon-item">
-        <bd-globe-icon width="20" height="20" color="#006DFF"></bd-globe-icon>
+        <bd-globe-icon width="20" height="20" color="var(--color-blue-500)"></bd-globe-icon>
         <span>bd-globe-icon</span>
       </div>
       <div class="icon-item">
-        <bd-close-icon width="18" height="18" color="#006DFF"></bd-close-icon>
+        <bd-close-icon width="18" height="18" color="var(--color-blue-500)"></bd-close-icon>
         <span>bd-close-icon</span>
       </div>
       <div class="icon-item">
-        <bd-arrow-up-icon width="20" height="20" color="#006DFF"></bd-arrow-up-icon>
+        <bd-arrow-up-icon width="20" height="20" color="var(--color-blue-500)"></bd-arrow-up-icon>
         <span>bd-arrow-up-icon</span>
       </div>
       <div class="icon-item">
-        <bd-arrow-down-icon width="20" height="20" color="#006DFF"></bd-arrow-down-icon>
-        <span>bd-arrow-down-icon</span>
-      </div>
-      <div class="icon-item">
-        <bd-machine-learning-icon width="48" height="48" color="#006DFF"></bd-machine-learning-icon>
-        <span>bd-machine-learning-icon</span>
-      </div>
-      <div class="icon-item">
-        <bd-analysis-icon width="48" height="48" color="#006DFF"></bd-analysis-icon>
-        <span>bd-analysis-icon</span>
+        <bd-arrow-right-icon size="md" color="var(--color-blue-500)"></bd-arrow-right-icon>
+        <span>bd-arrow-right-icon</span>
       </div>
       <div class="icon-item">
-        <bd-av-comparatives-icon width="48" height="48"></bd-av-comparatives-icon>
-        <span>bd-av-comparatives-icon</span>
+        <bd-arrow-icon size="md" color="var(--color-blue-500)"></bd-arrow-icon>
+        <span>bd-arrow-icon</span>
       </div>
       <div class="icon-item">
-        <bd-best-brands-icon width="48" height="48"></bd-best-brands-icon>
-        <span>bd-best-brands-icon</span>
+        <bd-check-icon size="md" color="var(--color-blue-500)"></bd-check-icon>
+        <span>bd-check-icon</span>
       </div>
       <div class="icon-item">
-        <bd-laurel-icon width="48" height="48"></bd-laurel-icon>
-        <span>bd-laurel-icon</span>
+        <bd-circle-info-icon size="md" color="var(--color-blue-500)"></bd-circle-info-icon>
+        <span>bd-circle-info-icon</span>
       </div>
       <div class="icon-item">
-        <bd-pc-mag-2024-icon width="48" height="48"></bd-pc-mag-2024-icon>
-        <span>bd-pc-mag-2024-icon</span>
+        <bd-arrow-down-icon width="20" height="20" color="var(--color-blue-500)"></bd-arrow-down-icon>
+        <span>bd-arrow-down-icon</span>
       </div>
       <div class="icon-item">
-        <bd-pc-mag-business-icon width="48" height="48"></bd-pc-mag-business-icon>
-        <span>bd-pc-mag-business-icon</span>
+        <bd-machine-learning-icon width="48" height="48" color="var(--color-blue-500)"></bd-machine-learning-icon>
+        <span>bd-machine-learning-icon</span>
       </div>
       <div class="icon-item">
-        <bd-pc-mag-icon width="48" height="48"></bd-pc-mag-icon>
-        <span>bd-pc-mag-icon</span>
+        <bd-analysis-icon width="48" height="48" color="var(--color-blue-500)"></bd-analysis-icon>
+        <span>bd-analysis-icon</span>
       </div>
       <div class="icon-item">
-        <bd-pc-mag-readers-icon width="37" height="64"></bd-pc-mag-readers-icon>
-        <span>bd-pc-mag-readers-icon</span>
+        <bd-guide-icon width="48" height="48" color="var(--color-blue-500)"></bd-guide-icon>
+        <span>bd-guide-icon</span>
       </div>
       <div class="icon-item">
-        <bd-top-product-icon width="48" height="48"></bd-top-product-icon>
-        <span>bd-top-product-icon</span>
+        <bd-laurel-icon width="48" height="48"></bd-laurel-icon>
+        <span>bd-laurel-icon</span>
       </div>
     </div>
   `

package/src/components/icons/individual-icon.js

@@ -1,26 +1,14 @@
 // icons/individual-icon.js
-import { LitElement, css, html } from "lit";
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
 
-class IndividualIcon extends LitElement {
-  static properties = {
-    width : { type: Number },
-    height: { type: Number },
-    color : { type: String }
-  };
-
-  constructor() {
-    super();
-    this.width = 32;
-    this.height = 32;
-    this.color = "currentColor";
-  }
-
-  static styles = css`:host { display: inline-flex; }`;
+class IndividualIcon extends BdIconElement {
+  static defaultSize = "xl";
 
   render() {
     return html`
-      <svg xmlns="http://www.w3.org/2000/svg" width="${this.width}" height="${this.height}" viewBox="0 0 32 32" fill="none" aria-hidden="true">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.1154 5.42846C11.0158 6.39902 10.1576 7.97293 10.1576 10.4303C10.1576 14.2122 11.2398 16.6474 13.1651 18.0413C13.7542 18.4678 14.5777 18.842 15.9997 18.842C17.4157 18.842 18.2942 18.4324 18.8344 18.0413C20.7597 16.6474 21.8419 14.2122 21.8419 10.4303C21.8419 7.97293 20.9837 6.39902 19.8841 5.42846C18.7585 4.43503 17.2951 3.99994 15.9997 3.99994C14.7044 3.99994 13.241 4.43503 12.1154 5.42846ZM10.792 3.929C12.3375 2.56485 14.2951 1.99994 15.9997 1.99994C17.7044 1.99994 19.662 2.56485 21.2075 3.929C22.779 5.31602 23.8419 7.45729 23.8419 10.4303C23.8419 14.3066 22.793 17.3385 20.4997 19.276V20.3089C20.4997 20.7959 20.8184 21.2255 21.2845 21.3667L22.9476 21.8707C25.2447 22.5667 26.8155 24.6841 26.8155 27.0843V30.0526H24.8155V27.0843C24.8155 25.5653 23.8214 24.2252 22.3676 23.7847L20.7045 23.2807C19.4382 22.897 18.5591 21.7556 18.5026 20.4434C17.8123 20.6859 16.9853 20.842 15.9997 20.842C15.005 20.842 14.1865 20.6944 13.4965 20.4513C13.4369 21.7602 12.5587 22.8978 11.295 23.2807L9.63186 23.7847C8.17811 24.2252 7.18396 25.5653 7.18396 27.0843V30.0526H5.18396V27.0843C5.18396 24.6841 6.75481 22.5667 9.05185 21.8707L10.715 21.3667C11.1811 21.2255 11.4997 20.7959 11.4997 20.3089V19.276C9.2065 17.3385 8.15764 14.3066 8.15764 10.4303C8.15764 7.45729 9.22051 5.31602 10.792 3.929Z" fill="${this.color}"/>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.1154 5.42846C11.0158 6.39902 10.1576 7.97293 10.1576 10.4303C10.1576 14.2122 11.2398 16.6474 13.1651 18.0413C13.7542 18.4678 14.5777 18.842 15.9997 18.842C17.4157 18.842 18.2942 18.4324 18.8344 18.0413C20.7597 16.6474 21.8419 14.2122 21.8419 10.4303C21.8419 7.97293 20.9837 6.39902 19.8841 5.42846C18.7585 4.43503 17.2951 3.99994 15.9997 3.99994C14.7044 3.99994 13.241 4.43503 12.1154 5.42846ZM10.792 3.929C12.3375 2.56485 14.2951 1.99994 15.9997 1.99994C17.7044 1.99994 19.662 2.56485 21.2075 3.929C22.779 5.31602 23.8419 7.45729 23.8419 10.4303C23.8419 14.3066 22.793 17.3385 20.4997 19.276V20.3089C20.4997 20.7959 20.8184 21.2255 21.2845 21.3667L22.9476 21.8707C25.2447 22.5667 26.8155 24.6841 26.8155 27.0843V30.0526H24.8155V27.0843C24.8155 25.5653 23.8214 24.2252 22.3676 23.7847L20.7045 23.2807C19.4382 22.897 18.5591 21.7556 18.5026 20.4434C17.8123 20.6859 16.9853 20.842 15.9997 20.842C15.005 20.842 14.1865 20.6944 13.4965 20.4513C13.4369 21.7602 12.5587 22.8978 11.295 23.2807L9.63186 23.7847C8.17811 24.2252 7.18396 25.5653 7.18396 27.0843V30.0526H5.18396V27.0843C5.18396 24.6841 6.75481 22.5667 9.05185 21.8707L10.715 21.3667C11.1811 21.2255 11.4997 20.7959 11.4997 20.3089V19.276C9.2065 17.3385 8.15764 14.3066 8.15764 10.4303C8.15764 7.45729 9.22051 5.31602 10.792 3.929Z" fill="currentColor"/>
       </svg>
     `;
   }

package/src/components/icons/laurel-icon.js

@@ -1,27 +1,17 @@
 // icons/laurel-icon.js
-import { LitElement, css, html } from "lit";
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
 
-class LaurelIcon extends LitElement {
-  static properties = {
-    width : { type: Number },
-    height: { type: Number },
-    color : { type: String }
-  };
-
-  constructor() {
-    super();
-    this.width = 80;
-    this.height = 80;
-    this.color = "currentColor"
-  }
-
-  static styles = css`:host { display: inline-flex; }`;
+class LaurelIcon extends BdIconElement {
+  /* no token: the icon scale stops at 3xl (64px) and the laurel is drawn at 80.
+     Dropping it to 64 shrinks the wreath in the awards section by a fifth,
+     which is a design decision rather than a cleanup, so the size stays off
+     the scale until someone makes it. A caller can still pass a step. */
+  static defaultSize = "80px";
 
   render() {
     return html`
       <svg
-        width="${this.width}"
-        height="${this.height}"
         viewBox="0 0 80 80"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -29,7 +19,7 @@ class LaurelIcon extends LitElement {
       >
         <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="${this.color}"
+          fill="currentColor"
         />
       </svg>
     `;

package/src/components/icons/machine-learning-icon.js

@@ -1,24 +1,13 @@
 // icons/machine-learning-icon.js
-import { LitElement, css, html } from "lit";
-class MachineLearningIcon extends LitElement {
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
+class MachineLearningIcon extends BdIconElement {
+  static defaultSize = "2xl";
 
-  static properties = {
-    width : { type: Number },
-    height: { type: Number },
-    color : { type: String }
-  };
-
-  constructor() {
-    super();
-    this.width = 48;
-    this.height = 48;
-    this.color = "#006DFF"; }
-
-  static styles = css`:host { display: inline-flex; }`;
   render() {
     return html`
-      <svg width="${this.width}" height="${this.height}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path d="M18 3C15.6562 3 13.6875 4.875 13.5 7.125C13.4062 7.6875 12.9375 8.25 12.375 8.4375C10.4062 8.90625 8.90625 10.6875 8.90625 12.75C8.90625 13.0312 9 13.3125 9 13.5938C9.1875 14.3438 8.8125 15.0938 8.0625 15.2812C6.375 15.9375 5.15625 17.625 5.15625 19.5C5.15625 20.0625 5.25 20.5312 5.4375 20.9062C5.625 21.4688 5.4375 22.125 4.96875 22.5C3.75 23.625 3 25.2188 3 27C3 29.1562 4.125 31.0312 5.8125 32.1562C6.375 32.5312 6.65625 33.2812 6.375 34.0312C6.09375 34.5938 6 35.3438 6 36C6 38.9062 8.34375 41.25 11.25 41.25C11.5312 41.25 11.8125 41.25 12.0938 41.25C12.8438 41.0625 13.5 41.5312 13.7812 42.1875C14.4375 43.875 16.0312 45 18 45C20.4375 45 22.5 43.0312 22.5 40.5V28.5H18C17.25 28.5 16.6875 28.9688 16.5 29.625C17.8125 30.1875 18.75 31.5 18.75 33C18.75 35.1562 17.0625 36.75 15 36.75C12.8438 36.75 11.25 35.1562 11.25 33C11.25 31.5 12.1875 30.1875 13.5 29.625C13.6875 27.2812 15.6562 25.5 18 25.5H22.5V15H19.875C19.3125 16.4062 18 17.25 16.5 17.25C14.3438 17.25 12.75 15.6562 12.75 13.5C12.75 11.4375 14.3438 9.75 16.5 9.75C18 9.75 19.3125 10.6875 19.875 12H22.5V7.5C22.5 5.0625 20.4375 3 18 3ZM25.5 15V33H31.0312C31.5938 31.6875 32.9062 30.75 34.5 30.75C36.5625 30.75 38.25 32.4375 38.25 34.5C38.25 36.6562 36.5625 38.25 34.5 38.25C32.9062 38.25 31.5938 37.4062 31.0312 36H25.5V40.5C25.5 43.0312 27.4688 45 30 45C31.875 45 33.4688 43.875 34.125 42.1875C34.4062 41.4375 35.0625 41.0625 35.8125 41.25C36.0938 41.25 36.375 41.25 36.6562 41.25C39.5625 41.25 41.9062 38.9062 41.9062 36C41.9062 35.3438 41.8125 34.5938 41.5312 34.0312C41.25 33.2812 41.5312 32.5312 42.0938 32.1562C43.875 31.0312 45 29.1562 45 27C45 25.2188 44.1562 23.625 42.9375 22.5C42.4688 22.125 42.2812 21.5625 42.4688 20.9062C42.6562 20.5312 42.75 20.0625 42.75 19.5C42.75 17.625 41.5312 15.9375 39.8438 15.375C39.0938 15.0938 38.7188 14.3438 38.9062 13.6875C38.9062 13.4062 39 13.125 39 12.75C39 10.6875 37.5 8.90625 35.5312 8.4375C34.9688 8.25 34.5 7.78125 34.4062 7.125C34.2188 4.875 32.3438 3 30 3C27.4688 3 25.5 5.0625 25.5 7.5V12H30C32.4375 12 34.5 14.0625 34.5 16.5V17.625C35.8125 18.1875 36.75 19.5 36.75 21C36.75 23.1562 35.0625 24.75 33 24.75C30.8438 24.75 29.25 23.1562 29.25 21C29.25 19.5 30.0938 18.1875 31.5 17.625V16.5C31.5 15.75 30.75 15 30 15H25.5ZM18 48C15.1875 48 12.75 46.5 11.4375 44.25C11.3438 44.25 11.25 44.25 11.25 44.25C6.65625 44.25 3 40.5938 3 36C3 35.3438 3.09375 34.5938 3.1875 33.9375C1.21875 32.3438 0 29.8125 0 27C0 24.6562 0.84375 22.5 2.34375 20.9062C2.25 20.5312 2.25 20.0625 2.25 19.5C2.25 16.7812 3.75 14.3438 6 13.0312C6 12.9375 6 12.8438 6 12.75C6 9.65625 7.875 6.9375 10.6875 5.8125C11.4375 2.53125 14.4375 0 18 0C20.4375 0 22.5938 1.21875 24 3C25.3125 1.21875 27.4688 0 30 0C33.4688 0 36.4688 2.53125 37.2188 5.8125C40.0312 6.9375 42 9.65625 42 12.75C42 12.8438 42 12.9375 42 13.0312C44.1562 14.3438 45.75 16.7812 45.75 19.5C45.75 20.0625 45.6562 20.5312 45.5625 20.9062C47.0625 22.5 48 24.6562 48 27C48 29.8125 46.6875 32.3438 44.7188 33.9375C44.9062 34.5938 45 35.3438 45 36C45 40.5938 41.25 44.25 36.75 44.25C36.6562 44.25 36.5625 44.25 36.4688 44.25C35.1562 46.5 32.7188 48 30 48C27.4688 48 25.3125 46.875 24 45C22.5938 46.875 20.4375 48 18 48ZM16.5 12C15.6562 12 15 12.75 15 13.5C15 14.3438 15.6562 15 16.5 15C17.25 15 18 14.3438 18 13.5C18 12.75 17.25 12 16.5 12ZM15 31.5C14.1562 31.5 13.5 32.25 13.5 33C13.5 33.8438 14.1562 34.5 15 34.5C15.75 34.5 16.5 33.8438 16.5 33C16.5 32.25 15.75 31.5 15 31.5ZM31.5 21C31.5 21.8438 32.1562 22.5 33 22.5C33.75 22.5 34.5 21.8438 34.5 21C34.5 20.25 33.75 19.5 33 19.5C32.1562 19.5 31.5 20.25 31.5 21ZM34.5 33C33.6562 33 33 33.75 33 34.5C33 35.3438 33.6562 36 34.5 36C35.25 36 36 35.3438 36 34.5C36 33.75 35.25 33 34.5 33Z" fill="${this.color}"/>
+      <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M18 3C15.6562 3 13.6875 4.875 13.5 7.125C13.4062 7.6875 12.9375 8.25 12.375 8.4375C10.4062 8.90625 8.90625 10.6875 8.90625 12.75C8.90625 13.0312 9 13.3125 9 13.5938C9.1875 14.3438 8.8125 15.0938 8.0625 15.2812C6.375 15.9375 5.15625 17.625 5.15625 19.5C5.15625 20.0625 5.25 20.5312 5.4375 20.9062C5.625 21.4688 5.4375 22.125 4.96875 22.5C3.75 23.625 3 25.2188 3 27C3 29.1562 4.125 31.0312 5.8125 32.1562C6.375 32.5312 6.65625 33.2812 6.375 34.0312C6.09375 34.5938 6 35.3438 6 36C6 38.9062 8.34375 41.25 11.25 41.25C11.5312 41.25 11.8125 41.25 12.0938 41.25C12.8438 41.0625 13.5 41.5312 13.7812 42.1875C14.4375 43.875 16.0312 45 18 45C20.4375 45 22.5 43.0312 22.5 40.5V28.5H18C17.25 28.5 16.6875 28.9688 16.5 29.625C17.8125 30.1875 18.75 31.5 18.75 33C18.75 35.1562 17.0625 36.75 15 36.75C12.8438 36.75 11.25 35.1562 11.25 33C11.25 31.5 12.1875 30.1875 13.5 29.625C13.6875 27.2812 15.6562 25.5 18 25.5H22.5V15H19.875C19.3125 16.4062 18 17.25 16.5 17.25C14.3438 17.25 12.75 15.6562 12.75 13.5C12.75 11.4375 14.3438 9.75 16.5 9.75C18 9.75 19.3125 10.6875 19.875 12H22.5V7.5C22.5 5.0625 20.4375 3 18 3ZM25.5 15V33H31.0312C31.5938 31.6875 32.9062 30.75 34.5 30.75C36.5625 30.75 38.25 32.4375 38.25 34.5C38.25 36.6562 36.5625 38.25 34.5 38.25C32.9062 38.25 31.5938 37.4062 31.0312 36H25.5V40.5C25.5 43.0312 27.4688 45 30 45C31.875 45 33.4688 43.875 34.125 42.1875C34.4062 41.4375 35.0625 41.0625 35.8125 41.25C36.0938 41.25 36.375 41.25 36.6562 41.25C39.5625 41.25 41.9062 38.9062 41.9062 36C41.9062 35.3438 41.8125 34.5938 41.5312 34.0312C41.25 33.2812 41.5312 32.5312 42.0938 32.1562C43.875 31.0312 45 29.1562 45 27C45 25.2188 44.1562 23.625 42.9375 22.5C42.4688 22.125 42.2812 21.5625 42.4688 20.9062C42.6562 20.5312 42.75 20.0625 42.75 19.5C42.75 17.625 41.5312 15.9375 39.8438 15.375C39.0938 15.0938 38.7188 14.3438 38.9062 13.6875C38.9062 13.4062 39 13.125 39 12.75C39 10.6875 37.5 8.90625 35.5312 8.4375C34.9688 8.25 34.5 7.78125 34.4062 7.125C34.2188 4.875 32.3438 3 30 3C27.4688 3 25.5 5.0625 25.5 7.5V12H30C32.4375 12 34.5 14.0625 34.5 16.5V17.625C35.8125 18.1875 36.75 19.5 36.75 21C36.75 23.1562 35.0625 24.75 33 24.75C30.8438 24.75 29.25 23.1562 29.25 21C29.25 19.5 30.0938 18.1875 31.5 17.625V16.5C31.5 15.75 30.75 15 30 15H25.5ZM18 48C15.1875 48 12.75 46.5 11.4375 44.25C11.3438 44.25 11.25 44.25 11.25 44.25C6.65625 44.25 3 40.5938 3 36C3 35.3438 3.09375 34.5938 3.1875 33.9375C1.21875 32.3438 0 29.8125 0 27C0 24.6562 0.84375 22.5 2.34375 20.9062C2.25 20.5312 2.25 20.0625 2.25 19.5C2.25 16.7812 3.75 14.3438 6 13.0312C6 12.9375 6 12.8438 6 12.75C6 9.65625 7.875 6.9375 10.6875 5.8125C11.4375 2.53125 14.4375 0 18 0C20.4375 0 22.5938 1.21875 24 3C25.3125 1.21875 27.4688 0 30 0C33.4688 0 36.4688 2.53125 37.2188 5.8125C40.0312 6.9375 42 9.65625 42 12.75C42 12.8438 42 12.9375 42 13.0312C44.1562 14.3438 45.75 16.7812 45.75 19.5C45.75 20.0625 45.6562 20.5312 45.5625 20.9062C47.0625 22.5 48 24.6562 48 27C48 29.8125 46.6875 32.3438 44.7188 33.9375C44.9062 34.5938 45 35.3438 45 36C45 40.5938 41.25 44.25 36.75 44.25C36.6562 44.25 36.5625 44.25 36.4688 44.25C35.1562 46.5 32.7188 48 30 48C27.4688 48 25.3125 46.875 24 45C22.5938 46.875 20.4375 48 18 48ZM16.5 12C15.6562 12 15 12.75 15 13.5C15 14.3438 15.6562 15 16.5 15C17.25 15 18 14.3438 18 13.5C18 12.75 17.25 12 16.5 12ZM15 31.5C14.1562 31.5 13.5 32.25 13.5 33C13.5 33.8438 14.1562 34.5 15 34.5C15.75 34.5 16.5 33.8438 16.5 33C16.5 32.25 15.75 31.5 15 31.5ZM31.5 21C31.5 21.8438 32.1562 22.5 33 22.5C33.75 22.5 34.5 21.8438 34.5 21C34.5 20.25 33.75 19.5 33 19.5C32.1562 19.5 31.5 20.25 31.5 21ZM34.5 33C33.6562 33 33 33.75 33 34.5C33 35.3438 33.6562 36 34.5 36C35.25 36 36 35.3438 36 34.5C36 33.75 35.25 33 34.5 33Z" fill="currentColor"/>
       </svg>
     `;
   }

package/src/components/icons/marks.js

@@ -0,0 +1,41 @@
+/**
+ * Barrel for the brand and award marks.
+ *
+ * Separate from ./icons.js because these are a different kind of thing and,
+ * more practically, a different order of weight. They take width and height
+ * only — no colour, because recolouring a third party's mark would
+ * misrepresent it — and seven of the eight are raster: the artwork is a PNG
+ * embedded in the SVG through a pattern fill, between 23KB and 106KB each,
+ * 360KB for the set.
+ *
+ * That is why they are not in the icon barrel. Together they were 94% of it,
+ * and the only component that uses them, bd-awards, imports the individual
+ * files it needs rather than the barrel. A consumer importing ./icons for an
+ * arrow was carrying all seven award badges.
+ *
+ * Two of them are exceptions, and they are the two that are ours: bd-ai-icon,
+ * the Bitdefender AI wordmark, 3KB of vector drawn in --color-blue-500, and
+ * bd-brand-signature-icon, the signature the hero lays over its image, a
+ * single path drawn in currentColor and sized from the icon scale like an
+ * interface icon. Neither of the two reasons above reaches a mark of your
+ * own -- choosing the ink is not misrepresentation, and a path has no PNG to
+ * stop it scaling -- so brand-signature-icon.js says that outright in its own
+ * header rather than inheriting a rule that was written about somebody else's
+ * marks. It is listed here because it is a brand mark; it behaves like an icon.
+ *
+ * Being raster has consequences worth knowing before reaching for one: these
+ * cannot be tinted, and they do not scale cleanly past the size their PNG was
+ * made at. Redrawing them as vectors would fix both and remove the 360KB, but
+ * they are third-party marks and redrawing is not a cleanup anyone should do
+ * unilaterally.
+ */
+
+import './bd-ai-icon.js';
+import './brand-signature-icon.js';
+import './av-comparatives-icon.js';
+import './best-brands-icon.js';
+import './pc-mag-2024-icon.js';
+import './pc-mag-business-icon.js';
+import './pc-mag-icon.js';
+import './pc-mag-readers-icon.js';
+import './top-product-icon.js';

package/src/components/icons/minus-icon.js

@@ -1,28 +1,14 @@
-import { LitElement, css, html } from "lit";
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
 
-class MinusIcon extends LitElement {
-  static properties = {
-    width : { type: Number },
-    height: { type: Number },
-    color : { type: String }
-  };
-
-  constructor() {
-    super();
-    this.width = 16;
-    this.height = 16;
-    this.color = "currentColor";
-  }
-
-  static styles = css`
-    :host { display: inline-flex; }
-  `;
+class MinusIcon extends BdIconElement {
+  static defaultSize = "sm";
 
   render() {
     return html`
-<svg width="${this.width}" height="${this.height}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7.00001H1V9.00001H7H9H15V7.00001H9C8 7 7.5 6.99997 7 7.00001Z" fill="${this.color}"/>
-</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 7H13.75V9H2.25V7Z" fill="currentColor"/>
+      </svg>
 
     `;
   }

package/src/components/icons/missing-icon.js

@@ -0,0 +1,52 @@
+// icons/missing-icon.js
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
+
+/**
+ * A deliberate placeholder for an icon that has been designed for but not drawn
+ * yet. Temporary by construction: `check:icons` lists every one of these with
+ * its name, so the set of icons still owed is a command rather than a memory.
+ *
+ *   <bd-missing-icon name="shield"></bd-missing-icon>
+ *
+ * WHY AN EXPLICIT ELEMENT RATHER THAN A FALLBACK FOR UNKNOWN TAGS. The obvious
+ * design is to let someone write <bd-shield-icon> before it exists and have it
+ * render a placeholder, and the platform will not do it. An undefined custom
+ * element renders 0px wide and invisible -- measured -- and CSS cannot style it
+ * generically, because there is no selector for "any element whose tag looks
+ * like bd-*-icon"; enumerating names catches only the icons that already exist.
+ * A runtime scan does not reach it either, since icons live inside component
+ * shadow roots that a document-level observer never sees.
+ *
+ * So the placeholder is a real element with a real name. That costs one
+ * substitution when the artwork lands and buys three things a silent gap does
+ * not: the layout reserves the right box, a reviewer can see what is missing,
+ * and the list is checkable.
+ *
+ * A dashed square on the icon's own box, in currentColor, so it takes the ink of
+ * whatever it sits in. The dash is doing the work on its own: a first version
+ * dimmed it to 0.55 as well, which lint:tokens correctly refused -- a chosen
+ * dimness belongs in a token, and inventing one for a single consumer is the
+ * mistake the "component tokens" section names. The dash already says
+ * provisional, so nothing was lost.
+ */
+class MissingIcon extends BdIconElement {
+  static defaultSize = "sm";
+
+  static properties = {
+    ...BdIconElement.properties,
+    /** What the icon should eventually be. Reported by check:icons. */
+    name: { type: String, reflect: true }
+  };
+
+  render() {
+    return html`
+      <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
+           role="img" aria-label="${this.name ? `${this.name} icon, not yet drawn` : 'icon not yet drawn'}">
+        <rect x="1" y="1" width="14" height="14" rx="2"
+              stroke="currentColor" stroke-width="1.5" stroke-dasharray="3 2.5"/>
+      </svg>
+    `;
+  }
+}
+customElements.define("bd-missing-icon", MissingIcon);

package/src/components/icons/plus-icon.js

@@ -1,28 +1,14 @@
-import { LitElement, css, html } from "lit";
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
 
-class PlusIcon extends LitElement {
-  static properties = {
-    width : { type: Number },
-    height: { type: Number },
-    color : { type: String }
-  };
-
-  constructor() {
-    super();
-    this.width = 16;
-    this.height = 16;
-    this.color = "currentColor";
-  }
-
-  static styles = css`
-    :host { display: inline-flex; }
-  `;
+class PlusIcon extends BdIconElement {
+  static defaultSize = "sm";
 
   render() {
     return html`  
-<svg width="${this.width}" height="${this.height}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 1H7V7H1V9H7V15H9V9H15V7H9V1Z" fill="${this.color}"/>
-</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+        <path d="M9 1H7V7H1V9H7V15H9V9H15V7H9V1Z" fill="currentColor"/>
+      </svg>
     `;
   }
 }