@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/icons/brand-signature-icon.js

@@ -0,0 +1,42 @@
+// icons/brand-signature-icon.js
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
+
+/**
+ * The brand signature -- the lockup that sits over the hero image.
+ *
+ * ARTWORK. Ours. Figma: `Mark/brand-signature` on the `⚛️ Icons & marks` page
+ * (node 357:62), exported from that node rather than redrawn, and placed by
+ * `Header / v2` in the bottom-right corner of the media panel.
+ *
+ * WHY IT IS HERE AND NOT WITH THE RASTER MARKS. marks.js keeps its marks
+ * colourless and off the icon scale for two stated reasons -- recolouring a
+ * third party's mark would misrepresent it, and seven of the eight are a PNG
+ * in a pattern fill that does not scale. Neither reason reaches this one: it
+ * is our own mark, so the ink is ours to choose, and it is a single path, so
+ * it scales. That makes it a BdIconElement like any tintable icon -- drawn in
+ * currentColor, sized from the icon scale, with the viewBox carrying the
+ * 182:24 aspect so `size` sets the height and the width follows from it.
+ *
+ * `lg` is the default because it is 24px, the height the mark is drawn at in
+ * the file. So <bd-brand-signature-icon> with no attributes is the 182x24 the
+ * design specifies, and the header does not have to name a size to get it.
+ *
+ * The export came out `fill="white"`, which is the one thing changed here. A
+ * baked white is how bd-close-icon came to be invisible on a white page (see
+ * icon-element.js's header); the ink belongs to whatever this sits on, and
+ * over the hero it is the scrim that guarantees the contrast -- see the
+ * .bd-header-scrim note in header.css.js.
+ */
+class BrandSignatureIcon extends BdIconElement {
+  static defaultSize = "lg";
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 182 24" fill="none" aria-hidden="true">
+        <path d="M157.338 11.7451L158.309 15.626H158.462L159.457 11.7451L161.424 5.48926H164.947L159.789 20.9619C159.1 23.0299 157.977 24 155.679 24H153.33V21.0635H155.857L156.317 19.583L151.619 5.48926H155.372L157.338 11.7451ZM26.6562 13.583C26.6563 15.2171 27.1926 16.1357 28.5713 16.1357C29.7457 16.1356 30.9453 15.4718 30.9453 14.1953V5.48926H34.7246V18.8936H30.9453V16.6465H30.8174C30.3578 17.9997 29.2602 19.2002 27.0645 19.2002C24.3326 19.2001 22.877 17.2852 22.877 13.915V5.48926H26.6562V13.583ZM41.7207 5.18262C44.5293 5.18262 45.8323 5.94868 47.1855 7.27637L45.0146 9.49805C44.1722 8.65557 43.0491 8.11926 41.9258 8.11914C40.6494 8.11914 40.1379 8.57851 40.1377 9.24219C40.1377 9.95699 40.4445 10.3399 41.542 10.4932L43.0488 10.6982C45.9595 11.0812 47.4658 12.409 47.4658 14.7324C47.4655 17.311 45.1674 19.2002 41.7207 19.2002C39.1422 19.2001 37.4568 18.3317 36.0781 16.7998L38.2998 14.5537C39.2444 15.6003 40.3935 16.2636 41.8486 16.2637C43.3295 16.2637 43.8408 15.7788 43.8408 14.9873C43.8408 14.3235 43.4318 13.9919 42.4873 13.8643L41.0322 13.6855C37.9939 13.3026 36.5127 11.9744 36.5127 9.54883C36.5127 6.97021 38.5294 5.18279 41.7207 5.18262ZM62.8281 5.18262C67.2706 5.18271 69.0576 8.3999 69.0576 12.0254V13.1494H60.4531V13.3535C60.4532 15.115 61.3982 16.2382 63.415 16.2383C64.998 16.2383 65.8664 15.498 66.709 14.6299L68.5986 16.9785C67.3987 18.3572 65.4324 19.2001 62.9814 19.2002C58.8707 19.2002 56.5469 16.4682 56.5469 12.1787C56.5469 7.94034 58.794 5.18262 62.8281 5.18262ZM82.6631 18.8936H78.8838V16.6465H78.7568C78.3738 18.1018 76.8925 19.2002 75.1562 19.2002C71.7605 19.2001 69.999 16.7234 69.999 12.1787C69.999 7.63401 71.7605 5.18269 75.1562 5.18262C76.8925 5.18262 78.3738 6.25545 78.7568 7.73633H78.8838V0H82.6631V18.8936ZM145.009 5.18262C148.788 5.18262 150.728 6.91901 150.729 10.085V15.957H151.979V18.8936H149.886C148.533 18.8936 147.562 17.9747 147.332 16.5449H147.18C146.771 18.2811 145.29 19.2002 143.247 19.2002C140.566 19.2001 139.086 17.6172 139.086 15.2939C139.086 12.4599 141.281 11.1065 144.83 11.1064H146.949V10.2637C146.949 8.96169 146.311 8.14467 144.729 8.14453C143.222 8.14453 142.43 8.9105 141.843 9.72754L139.596 7.73633C140.668 6.15336 142.2 5.18266 145.009 5.18262ZM170.123 5.18262C172.931 5.18265 174.234 5.94872 175.587 7.27637L173.417 9.49805C172.574 8.65548 171.451 8.11915 170.327 8.11914C169.051 8.11914 168.54 8.57851 168.54 9.24219C168.54 9.95709 168.846 10.34 169.944 10.4932L171.45 10.6982C174.361 11.0812 175.867 12.409 175.867 14.7324C175.867 17.3109 173.57 19.2001 170.123 19.2002C167.544 19.2002 165.859 18.3317 164.48 16.7998L166.701 14.5537C167.646 15.6005 168.796 16.2637 170.251 16.2637C171.732 16.2636 172.242 15.7787 172.242 14.9873C172.242 14.3235 171.833 13.9919 170.889 13.8643L169.434 13.6855C166.395 13.3026 164.914 11.9744 164.914 9.54883C164.914 6.97009 166.932 5.18262 170.123 5.18262ZM87.3281 14.5791C88.86 14.5791 89.5751 15.4467 89.5752 16.6211V17.1318C89.5752 18.3063 88.8601 19.1748 87.3281 19.1748C85.7964 19.1747 85.082 18.3062 85.082 17.1318V16.6211C85.0821 15.4468 85.7965 14.5792 87.3281 14.5791ZM179.376 14.5791C180.908 14.5791 181.623 15.4467 181.623 16.6211V17.1318C181.623 18.3063 180.908 19.1748 179.376 19.1748C177.844 19.1747 177.13 18.3062 177.13 17.1318V16.6211C177.13 15.4468 177.844 14.5793 179.376 14.5791ZM13.5312 4.51855H8.70605V18.8936H4.8252V4.51855H0V1.07227H13.5312V4.51855ZM17.5508 8.39941H17.6777C17.9842 6.91867 19.0061 5.48926 21.0996 5.48926H21.7637V9.0127H20.8184C18.6227 9.01273 17.5508 9.49825 17.5508 11.0557V18.8936H13.7715V5.48926H17.5508V8.39941ZM53.2725 5.48926H55.9277V8.42578H53.2725V15.958H55.7236V18.8936H53.4766C50.8725 18.8934 49.4941 17.5404 49.4941 14.9873V8.42578H47.6045V5.48926H48.5488C49.5701 5.48926 49.8769 4.97864 49.877 4.05957V1.86328H53.2725V5.48926ZM112.16 18.8936H108.126L106.85 14.6553H100.9L99.624 18.8936H95.6924L101.564 1.07227H106.364L112.16 18.8936ZM117.137 15.957H118.822V18.8936H117.111C114.533 18.8936 113.358 17.5913 113.358 15.2168V0H117.137V15.957ZM123.601 10.9023L124.52 14.9873H124.622L125.694 10.9023L127.227 5.48926H130.673L132.23 10.9023L133.328 14.9873H133.431L134.35 10.9023L135.652 5.48926H139.15L135.447 18.8936H131.49L129.856 13.2256L128.911 9.75293H128.835L127.916 13.2256L126.281 18.8936H122.4L118.647 5.48926H122.299L123.601 10.9023ZM145.111 13.251C143.656 13.251 142.89 13.7876 142.89 14.7578V15.1406C142.89 16.1107 143.528 16.5703 144.651 16.5703C145.902 16.5703 146.949 16.0595 146.949 14.834V13.251H145.111ZM76.4072 8.24707C74.9777 8.2472 73.9309 9.34452 73.9307 11.0293V13.3535C73.9308 15.0384 74.9776 16.1366 76.4072 16.1367C77.837 16.1367 78.8838 15.3955 78.8838 14.1699V10.2129C78.8838 8.98734 77.837 8.24707 76.4072 8.24707ZM101.819 11.3613H105.905L103.913 4.5957H103.786L101.819 11.3613ZM62.9043 7.96582C61.398 7.96593 60.4531 9.06411 60.4531 10.7236V10.9277H65.1514V10.6982C65.1514 9.06417 64.4107 7.96582 62.9043 7.96582Z" fill="currentColor"/>
+      </svg>
+    `;
+  }
+}
+customElements.define("bd-brand-signature-icon", BrandSignatureIcon);

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

@@ -0,0 +1,27 @@
+// icons/check-icon.js
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
+
+/**
+ * The check the package had been drawing as a "✓" character in two places --
+ * list-item.css.js and pricing-feature-item.css.js -- which is type doing an
+ * icon's job: it changes shape with the font, renders differently on macOS and
+ * Windows, and has no viewBox to scale on.
+ *
+ * ARTWORK. Eclipse `checkmark fill`. The drawing it replaces was ours -- a
+ * 2-unit offset of a polyline, sized to match plus-icon and minus-icon. Those
+ * two come from Eclipse as well, so the family still agrees; it agrees on the
+ * library's terms rather than on ours.
+ */
+class CheckIcon extends BdIconElement {
+  static defaultSize = "sm";
+
+  render() {
+    return html`
+      <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="M7.5026 12.6586L14.8319 4.28234L13.3267 2.96533L6.68028 10.5612L2.82129 6.92924L1.45056 8.38564L6.06466 12.7283C6.26237 12.9144 6.52725 13.0121 6.79844 12.999C7.06963 12.9858 7.32381 12.863 7.5026 12.6586Z" fill="currentColor"/>
+      </svg>
+    `;
+  }
+}
+customElements.define("bd-check-icon", CheckIcon);

package/src/components/icons/circle-info-icon.js

@@ -0,0 +1,33 @@
+// icons/circle-info-icon.js
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
+
+/**
+ * The information mark bd-alert shows by default for every tone.
+ *
+ * It is the icon the package owed. alert.js has rendered
+ * <bd-missing-icon name="circle-info"> since the component was built -- the
+ * placeholder exists so a caller can write an icon before it is drawn and see
+ * an obvious gap rather than nothing -- and it was the only entry check:icons
+ * reported.
+ *
+ * ARTWORK. Eclipse `circle info`, exported from the Icon inventory table in the
+ * foundation Figma file. Three paths rather than one: the stem, the dot, and
+ * the ring. The ring is a single evenodd path rather than a stroked circle, so
+ * it fills with currentColor like the rest of the set instead of needing a
+ * stroke width that would not scale with the icon.
+ */
+class CircleInfoIcon extends BdIconElement {
+  static defaultSize = "xl";
+
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+        <path d="M15 13V23H17V13H15Z" fill="currentColor"/>
+        <path d="M16 8.5C16.6904 8.5 17.25 9.05965 17.25 9.75C17.25 10.4404 16.6904 11 16 11C15.3096 11 14.75 10.4404 14.75 9.75C14.75 9.05965 15.3096 8.5 16 8.5Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M16 2C8.26801 2 2 8.26801 2 16C2 23.732 8.26801 30 16 30C23.732 30 30 23.732 30 16C30 8.26801 23.732 2 16 2ZM4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16Z" fill="currentColor"/>
+      </svg>
+    `;
+  }
+}
+customElements.define("bd-circle-info-icon", CircleInfoIcon);

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

@@ -1,26 +1,14 @@
 // icons/close-icon.js
-import { LitElement, css, html } from "lit";
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
 
-class CloseIcon extends LitElement {
+class CloseIcon extends BdIconElement {
+  static defaultSize = "md";
 
-  static properties = {
-    width : { type: Number },
-    height: { type: Number },
-    color : { type: String }
-  };
-
-  constructor() {
-    super();
-    this.width = 18;
-    this.height = 18;
-    this.color = "white";
-  }
-
-  static styles = css`:host { display: inline-flex; }`;
   render() {
     return html`
-      <svg xmlns="http://www.w3.org/2000/svg" width="${this.width}" height="${this.height}" viewBox="0 0 18 18" aria-hidden="true">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.18182 9L0.564941 15.6169L2.38322 17.4352L9.00007 10.8183L15.6169 17.4352L17.4352 15.6169L10.8183 9L17.4352 2.38317L15.6169 0.564894L9.00007 7.18174L2.38322 0.564894L0.564941 2.38317L7.18182 9Z" fill="${this.color}"/>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.40908 9.00013L1.61932 14.7899L3.21031 16.3809L9.00007 10.5911L14.7898 16.3809L16.3808 14.7899L10.5911 9.00013L16.3808 3.21037L14.7898 1.61938L9.00007 7.40914L3.21031 1.61938L1.61932 3.21037L7.40908 9.00013Z" fill="currentColor"/>
       </svg>
     `;
   }

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

@@ -1,28 +1,16 @@
 // icons/family-icon.js
-import { LitElement, css, html } from "lit";
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
 
-class FamilyIcon 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 FamilyIcon 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="M16.0394 21.0955C16.5717 21.0955 17.093 21.0063 17.6014 20.8372C17.9 21.7401 18.6188 22.4693 19.5635 22.7615L20.4295 23.0294C21.3633 23.3183 22 24.1817 22 25.1591V27H24V25.1591C24 23.3048 22.792 21.6667 21.0205 21.1187L20.1545 20.8509C19.7356 20.7213 19.45 20.334 19.45 19.8955V19.7449C21.1462 18.295 21.9 16.0583 21.9 13.2778C21.9 10.8447 20.8711 9.23277 19.577 8.25708C18.3332 7.3193 16.8903 7 16 7C15.1097 7 13.6668 7.3193 12.423 8.25708C11.1289 9.23277 10.1 10.8447 10.1 13.2778C10.1 16.0583 10.8538 18.295 12.55 19.7449V19.8955C12.55 20.334 12.2644 20.7213 11.8455 20.8509L10.9795 21.1187C9.20796 21.6667 8 23.3048 8 25.1591V27H10V25.1591C10 24.1817 10.6367 23.3183 11.5705 23.0294L12.4365 22.7615C13.3896 22.4667 14.1128 21.727 14.4065 20.813C14.9375 20.9979 15.4826 21.0955 16.0394 21.0955ZM12.1 13.2778C12.1 11.4886 12.8211 10.4617 13.627 9.85403C14.4832 9.20848 15.4903 9 16 9C16.5097 9 17.5168 9.20848 18.373 9.85403C19.1789 10.4617 19.9 11.4886 19.9 13.2778C19.9 15.9088 19.1434 17.5302 17.8667 18.447L17.4753 18.728C16.9672 18.9837 16.4907 19.0955 16.0394 19.0955C15.4812 19.0955 14.8855 18.9245 14.2393 18.5231L14.1333 18.447C12.8566 17.5302 12.1 15.9088 12.1 13.2778Z" fill="${this.color}"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 19.955C6.24301 19.955 6.50063 19.9153 6.75514 19.8475C7.0813 20.4138 7.61269 20.8554 8.26724 21.0605L8.40095 21.1024C8.52133 21.1401 8.62873 21.2028 8.71818 21.2836C9.21418 20.834 9.80066 20.4758 10.4549 20.2401C10.103 19.7558 9.59939 19.382 8.99905 19.1939L8.86534 19.152C8.71342 19.1044 8.58812 19.0057 8.50596 18.8783C9.41844 17.937 9.8 16.5994 9.8 15.0556C9.8 13.5167 9.1507 12.4609 8.30704 11.8164C7.51308 11.2099 6.59336 11 6 11C5.40664 11 4.48692 11.2099 3.69296 11.8164C2.8493 12.4609 2.2 13.5167 2.2 15.0556C2.2 16.5845 2.57424 17.9112 3.46779 18.851L3.46121 18.8574L3.48918 18.8858C3.40698 19.0095 3.28362 19.1053 3.13466 19.152L3.00095 19.1939C1.81034 19.567 1 20.6702 1 21.9179V23H3V21.9179C3 21.5444 3.2426 21.2141 3.59905 21.1024L3.73276 21.0605C4.3858 20.8558 4.91624 20.4158 5.2426 19.8514C5.49788 19.9168 5.75644 19.955 6 19.955ZM4.2 15.0556C4.2 14.15 4.5507 13.678 4.90704 13.4058C5.31308 13.0956 5.79336 13 6 13C6.20664 13 6.68692 13.0956 7.09296 13.4058C7.4493 13.678 7.8 14.15 7.8 15.0556C7.8 16.2132 7.5391 16.9456 7.13947 17.4082L7.13758 17.4065C6.99679 17.5579 6.78144 17.7035 6.53517 17.8109C6.28066 17.9219 6.07954 17.955 6 17.955C5.90858 17.955 5.70643 17.922 5.46088 17.8209C5.29102 17.751 5.14074 17.665 5.02308 17.5752C4.5331 17.1288 4.2 16.3637 4.2 15.0556Z" fill="${this.color}"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M26 19.955C26.2431 19.955 26.5007 19.9153 26.7552 19.8475C27.0813 20.4138 27.6127 20.8554 28.2673 21.0605L28.401 21.1024C28.7574 21.2141 29 21.5444 29 21.9179V23H31V21.9179C31 20.6702 30.1897 19.567 28.9991 19.1939L28.8654 19.152C28.7135 19.1044 28.5882 19.0057 28.506 18.8783C29.4185 17.937 29.8 16.5994 29.8 15.0556C29.8 13.5167 29.1507 12.4609 28.3071 11.8164C27.5131 11.2099 26.5934 11 26 11C25.4067 11 24.487 11.2099 23.693 11.8164C22.8493 12.4609 22.2 13.5167 22.2 15.0556C22.2 16.5845 22.5743 17.9112 23.4678 18.851L23.4613 18.8574L23.4892 18.8858C23.407 19.0095 23.2837 19.1053 23.1347 19.152L23.001 19.1939C22.4007 19.382 21.897 19.7558 21.5452 20.2401C22.1994 20.4758 22.7859 20.834 23.2819 21.2836C23.3713 21.2028 23.4787 21.1401 23.5991 21.1024L23.7328 21.0605C24.3858 20.8558 24.9163 20.4158 25.2426 19.8514C25.4979 19.9168 25.7565 19.955 26 19.955ZM24.2 15.0556C24.2 14.15 24.5507 13.678 24.9071 13.4058C25.3131 13.0956 25.7934 13 26 13C26.2067 13 26.687 13.0956 27.093 13.4058C27.4493 13.678 27.8 14.15 27.8 15.0556C27.8 16.2132 27.5391 16.9456 27.1395 17.4082L27.1376 17.4065C26.9968 17.5579 26.7815 17.7035 26.5352 17.8109C26.2807 17.9219 26.0796 17.955 26 17.955C25.9086 17.955 25.7065 17.922 25.4609 17.8209C25.2911 17.751 25.1408 17.665 25.0231 17.5752C24.5331 17.1288 24.2 16.3637 24.2 15.0556Z" 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="M16.0394 21.0955C16.5717 21.0955 17.093 21.0063 17.6014 20.8372C17.9 21.7401 18.6188 22.4693 19.5635 22.7615L20.4295 23.0294C21.3633 23.3183 22 24.1817 22 25.1591V27H24V25.1591C24 23.3048 22.792 21.6667 21.0205 21.1187L20.1545 20.8509C19.7356 20.7213 19.45 20.334 19.45 19.8955V19.7449C21.1462 18.295 21.9 16.0583 21.9 13.2778C21.9 10.8447 20.8711 9.23277 19.577 8.25708C18.3332 7.3193 16.8903 7 16 7C15.1097 7 13.6668 7.3193 12.423 8.25708C11.1289 9.23277 10.1 10.8447 10.1 13.2778C10.1 16.0583 10.8538 18.295 12.55 19.7449V19.8955C12.55 20.334 12.2644 20.7213 11.8455 20.8509L10.9795 21.1187C9.20796 21.6667 8 23.3048 8 25.1591V27H10V25.1591C10 24.1817 10.6367 23.3183 11.5705 23.0294L12.4365 22.7615C13.3896 22.4667 14.1128 21.727 14.4065 20.813C14.9375 20.9979 15.4826 21.0955 16.0394 21.0955ZM12.1 13.2778C12.1 11.4886 12.8211 10.4617 13.627 9.85403C14.4832 9.20848 15.4903 9 16 9C16.5097 9 17.5168 9.20848 18.373 9.85403C19.1789 10.4617 19.9 11.4886 19.9 13.2778C19.9 15.9088 19.1434 17.5302 17.8667 18.447L17.4753 18.728C16.9672 18.9837 16.4907 19.0955 16.0394 19.0955C15.4812 19.0955 14.8855 18.9245 14.2393 18.5231L14.1333 18.447C12.8566 17.5302 12.1 15.9088 12.1 13.2778Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 19.955C6.24301 19.955 6.50063 19.9153 6.75514 19.8475C7.0813 20.4138 7.61269 20.8554 8.26724 21.0605L8.40095 21.1024C8.52133 21.1401 8.62873 21.2028 8.71818 21.2836C9.21418 20.834 9.80066 20.4758 10.4549 20.2401C10.103 19.7558 9.59939 19.382 8.99905 19.1939L8.86534 19.152C8.71342 19.1044 8.58812 19.0057 8.50596 18.8783C9.41844 17.937 9.8 16.5994 9.8 15.0556C9.8 13.5167 9.1507 12.4609 8.30704 11.8164C7.51308 11.2099 6.59336 11 6 11C5.40664 11 4.48692 11.2099 3.69296 11.8164C2.8493 12.4609 2.2 13.5167 2.2 15.0556C2.2 16.5845 2.57424 17.9112 3.46779 18.851L3.46121 18.8574L3.48918 18.8858C3.40698 19.0095 3.28362 19.1053 3.13466 19.152L3.00095 19.1939C1.81034 19.567 1 20.6702 1 21.9179V23H3V21.9179C3 21.5444 3.2426 21.2141 3.59905 21.1024L3.73276 21.0605C4.3858 20.8558 4.91624 20.4158 5.2426 19.8514C5.49788 19.9168 5.75644 19.955 6 19.955ZM4.2 15.0556C4.2 14.15 4.5507 13.678 4.90704 13.4058C5.31308 13.0956 5.79336 13 6 13C6.20664 13 6.68692 13.0956 7.09296 13.4058C7.4493 13.678 7.8 14.15 7.8 15.0556C7.8 16.2132 7.5391 16.9456 7.13947 17.4082L7.13758 17.4065C6.99679 17.5579 6.78144 17.7035 6.53517 17.8109C6.28066 17.9219 6.07954 17.955 6 17.955C5.90858 17.955 5.70643 17.922 5.46088 17.8209C5.29102 17.751 5.14074 17.665 5.02308 17.5752C4.5331 17.1288 4.2 16.3637 4.2 15.0556Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M26 19.955C26.2431 19.955 26.5007 19.9153 26.7552 19.8475C27.0813 20.4138 27.6127 20.8554 28.2673 21.0605L28.401 21.1024C28.7574 21.2141 29 21.5444 29 21.9179V23H31V21.9179C31 20.6702 30.1897 19.567 28.9991 19.1939L28.8654 19.152C28.7135 19.1044 28.5882 19.0057 28.506 18.8783C29.4185 17.937 29.8 16.5994 29.8 15.0556C29.8 13.5167 29.1507 12.4609 28.3071 11.8164C27.5131 11.2099 26.5934 11 26 11C25.4067 11 24.487 11.2099 23.693 11.8164C22.8493 12.4609 22.2 13.5167 22.2 15.0556C22.2 16.5845 22.5743 17.9112 23.4678 18.851L23.4613 18.8574L23.4892 18.8858C23.407 19.0095 23.2837 19.1053 23.1347 19.152L23.001 19.1939C22.4007 19.382 21.897 19.7558 21.5452 20.2401C22.1994 20.4758 22.7859 20.834 23.2819 21.2836C23.3713 21.2028 23.4787 21.1401 23.5991 21.1024L23.7328 21.0605C24.3858 20.8558 24.9163 20.4158 25.2426 19.8514C25.4979 19.9168 25.7565 19.955 26 19.955ZM24.2 15.0556C24.2 14.15 24.5507 13.678 24.9071 13.4058C25.3131 13.0956 25.7934 13 26 13C26.2067 13 26.687 13.0956 27.093 13.4058C27.4493 13.678 27.8 14.15 27.8 15.0556C27.8 16.2132 27.5391 16.9456 27.1395 17.4082L27.1376 17.4065C26.9968 17.5579 26.7815 17.7035 26.5352 17.8109C26.2807 17.9219 26.0796 17.955 26 17.955C25.9086 17.955 25.7065 17.922 25.4609 17.8209C25.2911 17.751 25.1408 17.665 25.0231 17.5752C24.5331 17.1288 24.2 16.3637 24.2 15.0556Z" fill="currentColor"/>
       </svg>
     `;
   }

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

@@ -1,26 +1,14 @@
 // icons/globe-icon.js
-import { LitElement, css, html } from "lit";
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
 
-class GlobeIcon extends LitElement {
+class GlobeIcon extends BdIconElement {
+  static defaultSize = "md";
 
-  static properties = {
-    width : { type: Number },
-    height: { type: Number },
-    color : { type: String }
-  };
-
-  constructor() {
-    super();
-    this.width = 20;
-    this.height = 20;
-    this.color = "white";
-  }
-
-  static styles = css`:host { display: inline-flex; }`;
   render() {
     return html`
-      <svg xmlns="http://www.w3.org/2000/svg" width="${this.width}" height="${this.height}" viewBox="0 0 20 20" fill="none" aria-hidden="true">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 10C1.25 5.16751 5.16751 1.25 10 1.25C14.8325 1.25 18.75 5.16751 18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10ZM10 2.5C9.68262 2.5 9.36983 2.51971 9.06282 2.55799V4.88384C9.06282 5.10767 8.98274 5.32411 8.83705 5.49404L7.13041 7.48466C6.9523 7.6924 6.69232 7.81196 6.41867 7.81196H4.84449L4.62219 8.57915L5.38381 9.44622L6.23342 8.7515C6.62081 8.43474 7.18869 8.47806 7.52354 8.84993L9.9671 11.5636C10.2837 11.9151 10.2887 12.4474 9.97888 12.8049L6.61009 16.692C7.6282 17.2087 8.78009 17.5 10 17.5C13.0594 17.5 15.691 15.6681 16.8577 13.0414L14.6283 15.6137C14.4503 15.8192 14.1918 15.9372 13.9199 15.9372H12.631C11.9827 15.9372 11.5301 15.295 11.7481 14.6844L12.9639 11.2803L11.6036 10.6973C11.1277 10.4933 10.9072 9.94221 11.1112 9.4663L11.8444 7.75544C11.9922 7.41073 12.3311 7.18724 12.7061 7.18724H14.601C14.6608 7.18724 14.7203 7.19296 14.7785 7.2042L14.6138 6.87474H12.5001C11.9823 6.87474 11.5626 6.455 11.5626 5.93724V4.80038C11.5626 4.58106 11.6395 4.36869 11.7799 4.20021L12.7599 3.02412C11.9057 2.68588 10.9746 2.5 10 2.5ZM13.9089 3.59792L12.8126 4.91352V5.62474H14.8069C15.162 5.62474 15.4866 5.82536 15.6455 6.14297L16.3292 7.51038C16.7486 8.34928 15.8126 9.2161 15.0083 8.73354L14.5145 8.43724H12.9122L12.3832 9.67147L13.7263 10.2471C14.1815 10.4422 14.4064 10.9577 14.2399 11.4241L13.0744 14.6872H13.7772L17.4893 10.404C17.4964 10.2702 17.5 10.1355 17.5 10C17.5 7.29005 16.0627 4.91579 13.9089 3.59792ZM7.81282 2.82393C4.98528 3.68463 2.86587 6.17069 2.54281 9.1939C3.18286 9.98092 4.99058 12.3835 5.40842 12.9396C5.58837 13.1791 5.63756 13.4816 5.55863 13.7579L5.07728 15.4426L5.59227 15.9578L8.85346 12.1949L6.79402 9.90779L5.94154 10.6049C5.55068 10.9244 4.97693 10.8771 4.64373 10.4978L3.57 9.27539C3.35876 9.03489 3.28482 8.70323 3.3739 8.39577L3.70923 7.23854C3.82536 6.83775 4.19241 6.56196 4.60969 6.56196H6.27497L7.81282 4.76822V2.82393ZM4.03367 14.5452C3.32557 13.6171 2.82909 12.5189 2.61624 11.3226C3.25918 12.1634 3.97861 13.118 4.31401 13.564L4.03367 14.5452Z" fill="${this.color}"/>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 10C1.25 5.16751 5.16751 1.25 10 1.25C14.8325 1.25 18.75 5.16751 18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10ZM10 2.5C9.68262 2.5 9.36983 2.51971 9.06282 2.55799V4.88384C9.06282 5.10767 8.98274 5.32411 8.83705 5.49404L7.13041 7.48466C6.9523 7.6924 6.69232 7.81196 6.41867 7.81196H4.84449L4.62219 8.57915L5.38381 9.44622L6.23342 8.7515C6.62081 8.43474 7.18869 8.47806 7.52354 8.84993L9.9671 11.5636C10.2837 11.9151 10.2887 12.4474 9.97888 12.8049L6.61009 16.692C7.6282 17.2087 8.78009 17.5 10 17.5C13.0594 17.5 15.691 15.6681 16.8577 13.0414L14.6283 15.6137C14.4503 15.8192 14.1918 15.9372 13.9199 15.9372H12.631C11.9827 15.9372 11.5301 15.295 11.7481 14.6844L12.9639 11.2803L11.6036 10.6973C11.1277 10.4933 10.9072 9.94221 11.1112 9.4663L11.8444 7.75544C11.9922 7.41073 12.3311 7.18724 12.7061 7.18724H14.601C14.6608 7.18724 14.7203 7.19296 14.7785 7.2042L14.6138 6.87474H12.5001C11.9823 6.87474 11.5626 6.455 11.5626 5.93724V4.80038C11.5626 4.58106 11.6395 4.36869 11.7799 4.20021L12.7599 3.02412C11.9057 2.68588 10.9746 2.5 10 2.5ZM13.9089 3.59792L12.8126 4.91352V5.62474H14.8069C15.162 5.62474 15.4866 5.82536 15.6455 6.14297L16.3292 7.51038C16.7486 8.34928 15.8126 9.2161 15.0083 8.73354L14.5145 8.43724H12.9122L12.3832 9.67147L13.7263 10.2471C14.1815 10.4422 14.4064 10.9577 14.2399 11.4241L13.0744 14.6872H13.7772L17.4893 10.404C17.4964 10.2702 17.5 10.1355 17.5 10C17.5 7.29005 16.0627 4.91579 13.9089 3.59792ZM7.81282 2.82393C4.98528 3.68463 2.86587 6.17069 2.54281 9.1939C3.18286 9.98092 4.99058 12.3835 5.40842 12.9396C5.58837 13.1791 5.63756 13.4816 5.55863 13.7579L5.07728 15.4426L5.59227 15.9578L8.85346 12.1949L6.79402 9.90779L5.94154 10.6049C5.55068 10.9244 4.97693 10.8771 4.64373 10.4978L3.57 9.27539C3.35876 9.03489 3.28482 8.70323 3.3739 8.39577L3.70923 7.23854C3.82536 6.83775 4.19241 6.56196 4.60969 6.56196H6.27497L7.81282 4.76822V2.82393ZM4.03367 14.5452C3.32557 13.6171 2.82909 12.5189 2.61624 11.3226C3.25918 12.1634 3.97861 13.118 4.31401 13.564L4.03367 14.5452Z" fill="currentColor"/>
       </svg>
     `;
   }

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

@@ -1,26 +1,14 @@
 // icons/analysis-icon.js
-import { LitElement, css, html } from "lit";
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
 
-class GuideIcon extends LitElement {
+class GuideIcon extends BdIconElement {
+  static defaultSize = "2xl";
 
-  static properties = {
-    width : { type: Number },
-    height: { type: Number },
-    color : { type: String }
-  };
-
-  constructor() {
-    super();
-    this.width = 48;
-    this.height = 49;
-    this.color = "#006DFF";
-  }
-
-  static styles = css`:host { display: inline-flex; }`;
   render() {
     return html`
-      <svg width="${this.width}" height="${this.height}" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path d="M19.5 3C13.5938 3 8.15625 6.1875 5.15625 11.25C2.25 16.4062 2.25 22.6875 5.15625 27.75C8.15625 32.9062 13.5938 36 19.5 36C25.3125 36 30.75 32.9062 33.75 27.75C36.6562 22.6875 36.6562 16.4062 33.75 11.25C30.75 6.1875 25.3125 3 19.5 3ZM19.5 39C8.71875 39 0 30.2812 0 19.5C0 8.8125 8.71875 0 19.5 0C30.1875 0 39 8.8125 39 19.5C39 24.375 37.2188 28.7812 34.3125 32.25L47.5312 45.4688C48.0938 46.0312 48.0938 47.0625 47.5312 47.625C46.9688 48.1875 45.9375 48.1875 45.375 47.625L32.1562 34.3125C28.7812 37.3125 24.2812 39 19.5 39ZM12 21C12 20.25 12.6562 19.5 13.5 19.5C14.25 19.5 15 20.25 15 21V27C15 27.8438 14.25 28.5 13.5 28.5C12.6562 28.5 12 27.8438 12 27V21ZM18 12C18 11.25 18.6562 10.5 19.5 10.5C20.25 10.5 21 11.25 21 12V27C21 27.8438 20.25 28.5 19.5 28.5C18.6562 28.5 18 27.8438 18 27V12ZM24 18C24 17.25 24.6562 16.5 25.5 16.5C26.25 16.5 27 17.25 27 18V27C27 27.8438 26.25 28.5 25.5 28.5C24.6562 28.5 24 27.8438 24 27V18Z" fill="${this.color}"/>
+      <svg viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M19.5 3C13.5938 3 8.15625 6.1875 5.15625 11.25C2.25 16.4062 2.25 22.6875 5.15625 27.75C8.15625 32.9062 13.5938 36 19.5 36C25.3125 36 30.75 32.9062 33.75 27.75C36.6562 22.6875 36.6562 16.4062 33.75 11.25C30.75 6.1875 25.3125 3 19.5 3ZM19.5 39C8.71875 39 0 30.2812 0 19.5C0 8.8125 8.71875 0 19.5 0C30.1875 0 39 8.8125 39 19.5C39 24.375 37.2188 28.7812 34.3125 32.25L47.5312 45.4688C48.0938 46.0312 48.0938 47.0625 47.5312 47.625C46.9688 48.1875 45.9375 48.1875 45.375 47.625L32.1562 34.3125C28.7812 37.3125 24.2812 39 19.5 39ZM12 21C12 20.25 12.6562 19.5 13.5 19.5C14.25 19.5 15 20.25 15 21V27C15 27.8438 14.25 28.5 13.5 28.5C12.6562 28.5 12 27.8438 12 27V21ZM18 12C18 11.25 18.6562 10.5 19.5 10.5C20.25 10.5 21 11.25 21 12V27C21 27.8438 20.25 28.5 19.5 28.5C18.6562 28.5 18 27.8438 18 27V12ZM24 18C24 17.25 24.6562 16.5 25.5 16.5C26.25 16.5 27 17.25 27 18V27C27 27.8438 26.25 28.5 25.5 28.5C24.6562 28.5 24 27.8438 24 27V18Z" fill="currentColor"/>
       </svg>
     `;
   }

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

@@ -0,0 +1,99 @@
+import { LitElement, css } from "lit";
+import { iconSize } from "../shared/token-scales.js";
+
+/**
+ * Base for the tintable interface icons.
+ *
+ * Every one of them used to take `width` and `height` as numbers and write them
+ * straight into the SVG attributes, so a consumer could not pass
+ * `var(--icon-md-size)` even if they wanted to — which is why twenty of the
+ * twenty-three --icon-* tokens had no consumer. Defaults were 16, 18, 20, 32,
+ * 48, 48x49 and 80, three of which are on no scale, and the colour default was
+ * one of three different things including the literal string "white", so an
+ * unstyled bd-close-icon was invisible on a white page.
+ *
+ * The pattern here is the one bd-arrow-icon already used: the host takes a
+ * height from the icon scale and the SVG fills it, keeping its own aspect ratio
+ * from the viewBox rather than being squared off. The artwork is drawn in
+ * currentColor, so an icon follows the text it sits beside and needs no colour
+ * of its own.
+ *
+ *   <bd-plus-icon></bd-plus-icon>              the size its artwork was drawn at
+ *   <bd-plus-icon size="lg"></bd-plus-icon>    a step from the icon scale
+ *   <bd-plus-icon width="18"></bd-plus-icon>   deprecated, still honoured
+ *
+ * `width` and `height` are kept because consumers pass them today. They are
+ * deprecated: an off-scale pixel size is exactly what this replaced.
+ */
+export class BdIconElement extends LitElement {
+  static properties = {
+    size  : { type: String, reflect: true },
+    color : { type: String },
+    /** @deprecated pass `size` instead. */
+    width : { type: Number },
+    /** @deprecated pass `size` instead. */
+    height: { type: Number }
+  };
+
+  /**
+   * The step this icon's artwork was drawn at. Overridden per icon.
+   *
+   * Normally a step name. It also accepts a raw CSS length, for the one icon
+   * whose size is off the scale — see laurel-icon.js, where that carries a
+   * `no token:` reason rather than being silently inlined.
+   */
+  static defaultSize = "md";
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      /* --bd-icon-size is component-local and always set below, so the
+         fallback is only reached if a subclass forgets to call super. */
+      height: var(--bd-icon-size, var(--icon-md-size));
+    }
+
+    /* Whether an icon shows at all is the platform's question, not a prop this
+       element should invent: <bd-plus-icon hidden> is what a consumer will
+       reach for. It did not work. The UA sheet's [hidden] { display: none } is
+       an unlayered type rule on the element, and the :host rule above beats it,
+       so every icon in this package ignored the attribute -- measured before
+       this: a hidden bd-check-icon still computed inline-flex and still
+       occupied 16x16.
+       .
+       One rule restores it for all of them, and nothing new has to be learned
+       or documented: hidden is hidden. */
+    :host([hidden]) {
+      display: none;
+    }
+
+    svg {
+      display: block;
+      height: 100%;
+      /* auto, not 100%: the viewBox carries the aspect ratio, so an icon drawn
+         48x49 stays 48x49 rather than being squashed square */
+      width: auto;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.size = "";
+    this.color = "";
+    this.width = null;
+    this.height = null;
+  }
+
+  willUpdate() {
+    // An explicit pixel size wins, for the callers that still pass one.
+    const px = this.height ?? this.width;
+    const { defaultSize } = this.constructor;
+    // a step first, then an off-scale default, then the caller's pixels
+    const step = iconSize(this.size) || iconSize(defaultSize) || defaultSize;
+    this.style.setProperty("--bd-icon-size", px == null ? step : `${px}px`);
+
+    // No colour of its own by default: the artwork is currentColor, so it
+    // follows whatever it sits in.
+    if (this.color) this.style.color = this.color;
+    else this.style.removeProperty("color");
+  }
+}

package/src/components/icons/icons.js

@@ -0,0 +1,36 @@
+/**
+ * Barrel for the interface icons, so the set can be imported as one module the
+ * way bd-annotation's four elements are.
+ *
+ * The interface icons below are tintable: the artwork is drawn in currentColor
+ * and the host
+ * takes a height from the icon scale, so an icon follows the text it sits
+ * beside and needs no colour of its own.
+ *
+ * The brand and award marks are NOT here — they are in ./marks.js, and the
+ * split is a size decision rather than a taxonomy one. Each of those marks
+ * embeds a PNG inside its SVG through a pattern fill, and together they came
+ * to 360KB against 22KB for everything below: 94% of this module's weight,
+ * for artwork that only bd-awards uses and that imports the files it needs
+ * directly anyway. Anyone reaching for a plus icon was paying for seven award
+ * badges.
+ */
+
+// interface icons — tintable
+import './analysis-icon.js';
+import './check-icon.js';
+import './arrow-icon.js';
+import './arrow-down-icon.js';
+import './arrow-right-icon.js';
+import './arrow-up-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 './missing-icon.js';
+import './plus-icon.js';