@brandsync/wc 0.0.11 → 0.0.12

package/dist/collection/components/bs-logo/brandsync-logo-full-dark.js

@@ -0,0 +1,44 @@
+// BrandSync brand mark (icon + "EG BrandSync" wordmark) on a dark background, exported directly
+// from Figma's "Logo" component set (node 10909:30421, Device=Desktop, Background=Dark). This is
+// a genuinely separate, differently-drawn asset from brandsync-logo-full-light.ts's
+// BRANDSYNC_LOGO_FULL_LIGHT_SVG -- not a currentColor swap of the same paths: every wordmark path
+// is filled solid `white` instead of `#363C47`, and the icon mark's outer shape is a single solid
+// white path instead of the light version's two-path white-fill-plus-subtle-border-ring. Composed
+// the same way as the light asset (icon + word group, translated so the word is vertically
+// centered against the 44px-tall icon) -- icon is 44px wide, and translate-y = (44 - 21.3383) / 2 =
+// 11.3308, matching the light asset's own vertical-centering math exactly (word height 21.3383,
+// word width 130.977 either way).
+//
+// The icon-to-wordmark gap was tightened from Figma's own exported spacing (a ~48px gap, i.e. the
+// word group translated to x=91.868) to 16px (translate-x=60) at the user's request after seeing
+// it rendered -- the original gap read as too much empty space between the mark and the text. Not
+// a Figma re-measurement -- a deliberate deviation, matching the same change made to the light
+// asset. Total width is 190.0 -- 0.977px narrower than the light asset's 190.977 despite an
+// identical translate-x, since the two assets' word-group bounding boxes already differed by that
+// same amount before this change (a pre-existing Figma export discrepancy, not something this
+// change touches).
+export const BRANDSYNC_LOGO_FULL_DARK_SVG = `<svg width="190.0" height="44" viewBox="0 0 190.0 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M35.2 44H8.8C3.93938 44 0 40.0606 0 35.2V8.8C0 3.93938 3.93938 0 8.8 0H35.2C40.0606 0 44 3.93938 44 8.8V35.2C44 40.0606 40.0606 44 35.2 44Z" fill="white"/>
+<path id="Vector_2" d="M18.6038 21.5067L21.5067 18.6038C21.7748 18.3356 22.2097 18.3356 22.4795 18.6038L25.3963 21.5205C25.6644 21.7886 25.6644 22.2252 25.3963 22.4933L22.4933 25.3962C22.2252 25.6644 21.7886 25.6644 21.5205 25.3962L18.6038 22.4795C18.3356 22.2114 18.3356 21.7748 18.6038 21.5067Z" fill="#57B1FF"/>
+<path id="Vector_3" d="M15.6423 12.6586L6.7925 21.5084C6.52438 21.7766 6.52438 22.2114 6.7925 22.4813L9.82782 25.5166C10.0959 25.7847 10.5308 25.7847 10.8006 25.5166L19.6505 16.6667C19.9186 16.3986 19.9186 15.962 19.6505 15.6939L16.6152 12.6586C16.347 12.3905 15.9105 12.3905 15.6423 12.6586Z" fill="#57B1FF"/>
+<path id="Vector_4" d="M28.3559 31.3414L37.2161 22.4813C37.4842 22.2131 37.4842 21.7766 37.2161 21.5084L34.1808 18.4731C33.9127 18.205 33.4778 18.205 33.208 18.4731L24.3478 27.3333C24.0797 27.6014 24.0797 28.038 24.3478 28.3061L27.3831 31.3414C27.6513 31.6095 28.0878 31.6095 28.3559 31.3414Z" fill="#57B1FF"/>
+<path id="Vector_5" d="M28.3577 12.6586L37.2075 21.5084C37.4756 21.7766 37.4756 22.2114 37.2075 22.4813L34.1722 25.5166C33.9041 25.7847 33.4692 25.7847 33.1994 25.5166L24.3495 16.6667C24.0814 16.3986 24.0814 15.962 24.3495 15.6939L27.3848 12.6586C27.653 12.3905 28.0895 12.3905 28.3577 12.6586Z" fill="#1B85FF"/>
+<path id="Vector_6" d="M15.6441 31.3414L6.78391 22.4813C6.51578 22.2131 6.51578 21.7766 6.78391 21.5084L9.81922 18.4731C10.0873 18.205 10.5222 18.205 10.792 18.4731L19.6522 27.3333C19.9203 27.6014 19.9203 28.038 19.6522 28.3061L16.6169 31.3414C16.3488 31.6095 15.9122 31.6095 15.6441 31.3414Z" fill="#1B85FF"/>
+</g>
+<g transform="translate(60, 11.3308)">
+<g id="Group">
+<path id="Vector" d="M58.4306 4.455C57.2773 4.455 56.1223 4.55125 55.0017 4.74203C54.5222 4.81078 54.4225 5.08063 54.4225 5.29547V6.06547C54.4225 6.24766 54.4912 6.55531 54.9553 6.55531H55.0773C56.3286 6.43672 57.4252 6.38 58.4306 6.38C59.2591 6.38 59.84 6.55016 60.1562 6.88703C60.4811 7.2325 60.6461 7.85297 60.6461 8.72781V9.47031H59.1559C57.2223 9.47031 55.8199 9.76766 54.9863 10.3538C54.1441 10.945 53.7178 11.8938 53.7178 13.1708V13.4355C53.7178 14.1384 53.8141 14.7159 54.0134 15.2023C54.218 15.7008 54.4981 16.0789 54.8728 16.3608C55.2802 16.6667 55.6411 16.8506 56.0416 16.9555C56.497 17.0758 56.968 17.1359 57.4406 17.1359C58.4547 17.1359 59.5203 16.8163 60.6908 16.158V16.4038C60.6908 16.5653 60.7441 16.6891 60.8627 16.8094C60.9812 16.928 61.1067 16.9813 61.2683 16.9813H62.2806C62.4422 16.9813 62.5659 16.928 62.6863 16.8094C62.8048 16.6908 62.8581 16.5653 62.8581 16.4038V8.72781C62.8581 7.35625 62.4972 6.28719 61.7856 5.55328C61.0706 4.81422 59.9723 4.455 58.4323 4.455M55.9281 13.1484C55.9281 12.4094 56.1498 11.8714 56.5709 11.5913C56.8872 11.3816 57.5902 11.1306 59.1559 11.1306H60.6461V14.453C59.6458 14.9927 58.6695 15.2763 57.8136 15.2763C57.1777 15.2763 56.6964 15.1388 56.3853 14.8706C56.0862 14.6111 55.9264 14.1058 55.9264 13.4131V13.1484H55.9281Z" fill="white"/>
+<path id="Vector_2" d="M52.0747 4.455C51.0555 4.455 50.0827 4.76094 49.1116 5.39V5.18547C49.1116 5.02391 49.0583 4.90016 48.9397 4.77984C48.8314 4.67156 48.7334 4.60797 48.5564 4.60797H47.5234C47.3619 4.60797 47.2381 4.66125 47.1178 4.77984C46.9855 4.91219 46.9683 5.05313 46.9683 5.18547V16.4038C46.9683 16.5653 47.0216 16.6891 47.1402 16.8094C47.257 16.9263 47.3791 16.9813 47.5234 16.9813H48.6011C48.7627 16.9813 48.8864 16.928 49.0067 16.8094C49.1184 16.6994 49.1786 16.555 49.1786 16.4038V7.26688C50.1634 6.69281 51.138 6.40234 52.0764 6.40234C52.6178 6.40234 52.6763 6.04484 52.6763 5.89016V4.98781C52.6763 4.64922 52.458 4.455 52.0764 4.455" fill="white"/>
+<path id="Vector_3" d="M42.6456 8.39266C43.2644 8.10219 43.7525 7.69484 44.1306 7.15688C44.5552 6.55188 44.7717 5.80766 44.7717 4.94484V4.5925C44.7717 1.68438 42.5563 0.209689 38.1889 0.209689C36.8913 0.209689 35.7088 0.269845 34.6792 0.38672C34.1378 0.438282 33.8508 0.766563 33.8508 1.33719V15.9861C33.8508 16.2886 33.9298 16.5395 34.0673 16.677C34.1963 16.8059 34.3888 16.885 34.693 16.9348C35.5438 17.0689 36.7245 17.1342 38.2989 17.1342C42.6525 17.1342 44.8594 15.5186 44.8594 12.3338V11.9591C44.8594 11.0911 44.6291 10.3177 44.1753 9.65938C43.7783 9.0836 43.2764 8.66594 42.6456 8.39094M36.1505 15.082V9.30531H39.4006C40.0331 9.30531 40.5591 9.3775 40.9613 9.51672C41.372 9.6611 41.7106 9.86906 41.9392 10.1183C42.1558 10.3555 42.3294 10.6425 42.4394 10.9519C42.5374 11.2269 42.5855 11.5569 42.5855 11.9608V12.3355C42.5855 12.8683 42.4875 13.3358 42.2916 13.7259C42.1094 14.0886 41.8258 14.3808 41.4459 14.5905C41.0678 14.8002 40.6244 14.9497 40.1259 15.0373C39.6292 15.1233 39.0156 15.168 38.3024 15.168C38.0841 15.168 37.7919 15.1559 37.4206 15.1388L37.0752 15.1233C36.8723 15.1147 36.6953 15.1061 36.5458 15.0992C36.3859 15.0923 36.2536 15.0855 36.1522 15.082M42.4961 4.94484C42.4961 6.61375 41.4837 7.425 39.4006 7.425H36.1505V2.23953C37.2952 2.19828 37.9809 2.17766 38.1906 2.17766C38.763 2.17766 39.2614 2.2 39.6722 2.24297C40.1414 2.29281 40.5367 2.36328 40.8822 2.45953C41.2517 2.56266 41.5456 2.70531 41.7777 2.89609C42.0372 3.10922 42.2022 3.31547 42.3105 3.56984C42.4359 3.86375 42.4978 4.19719 42.4978 4.59422V4.94656L42.4961 4.94484Z" fill="white"/>
+<path id="Vector_4" d="M116.841 4.455C116.21 4.455 115.605 4.5375 115.043 4.7025C114.587 4.83484 114.087 5.04969 113.48 5.37281V5.18547C113.48 5.00328 113.412 4.88641 113.343 4.79531C113.252 4.675 113.104 4.60797 112.925 4.60797H111.825C111.664 4.60797 111.54 4.66125 111.42 4.77984C111.287 4.91219 111.27 5.05313 111.27 5.18547V16.4037C111.27 16.5653 111.323 16.6891 111.442 16.8094C111.559 16.9263 111.681 16.9813 111.825 16.9813H112.903C113.065 16.9813 113.188 16.928 113.309 16.8094C113.42 16.6977 113.48 16.555 113.48 16.4037V7.20672C114.568 6.67219 115.521 6.40063 116.313 6.40063C117.105 6.40063 117.707 6.6 118.057 6.99188C118.408 7.38375 118.594 8.13656 118.594 9.16609V16.402C118.594 16.5636 118.647 16.6873 118.766 16.8077C118.884 16.9263 119.01 16.9795 119.171 16.9795H120.227C120.388 16.9795 120.512 16.9263 120.632 16.8077C120.751 16.6891 120.804 16.5636 120.804 16.402V9.16609C120.804 6.03969 119.47 4.45328 116.839 4.45328" fill="white"/>
+<path id="Vector_5" d="M109.022 4.60969H107.79C107.68 4.60969 107.566 4.65438 107.443 4.74719C107.331 4.83141 107.269 4.9225 107.238 5.04109L104.583 14.9909H104.337C104.271 14.9909 104.225 14.9755 104.192 14.9428C104.172 14.9222 104.103 14.8397 104.051 14.6077L101.456 5.06516C101.427 4.94656 101.367 4.83828 101.288 4.75922C101.191 4.66297 101.069 4.60969 100.949 4.60969H99.7391C99.4056 4.60969 99.2063 4.80047 99.2063 5.12188C99.2063 5.21125 99.2063 5.28172 99.2406 5.33672L102.159 15.3622C102.248 15.6939 102.36 15.9723 102.505 16.2113C102.652 16.457 102.773 16.6203 102.95 16.7217L103.022 16.7647C103.153 16.842 103.278 16.9142 103.412 16.9366C103.538 16.9572 103.727 16.983 103.919 16.983H104.051L103.873 17.7152C103.703 18.437 103.476 18.9148 103.195 19.1348C102.905 19.3634 102.444 19.4786 101.829 19.4786C101.503 19.4786 100.83 19.4339 99.8834 19.348H99.8044C99.3455 19.348 99.2492 19.6144 99.2492 19.8361V20.6508C99.2492 20.7608 99.3042 21.0272 99.8198 21.1372C100.42 21.2713 101.052 21.3383 101.697 21.3383C102.57 21.3383 103.276 21.2231 103.797 20.9963C104.313 20.7728 104.732 20.4153 105.045 19.9341C105.337 19.4855 105.609 18.8289 105.853 17.9833L109.476 5.33672C109.51 5.28 109.51 5.21125 109.51 5.12188C109.51 5.02219 109.496 4.87609 109.381 4.76094C109.283 4.66297 109.158 4.61141 109.02 4.61141" fill="white"/>
+<path id="Vector_6" d="M127.652 6.42297C128.631 6.42297 129.518 6.47281 130.362 6.57594H130.467C130.567 6.57594 130.713 6.56391 130.828 6.44875C130.902 6.37484 130.977 6.27688 130.977 6.11016V5.31781C130.977 5.1786 130.962 5.005 130.848 4.88984C130.776 4.81766 130.642 4.72484 130.422 4.69734C129.451 4.53578 128.52 4.45328 127.65 4.45328C126.125 4.45328 124.929 4.95859 124.092 5.95375C123.241 6.96438 122.829 8.26719 122.829 9.9361V11.6514C122.829 13.3186 123.243 14.6214 124.092 15.6338C124.929 16.6289 126.127 17.1342 127.65 17.1342C128.554 17.1342 129.461 17.0552 130.417 16.8919C130.642 16.8644 130.776 16.7716 130.848 16.6994C130.962 16.5859 130.977 16.4106 130.977 16.2714V15.4791C130.977 15.3123 130.902 15.2144 130.828 15.1405C130.713 15.0253 130.567 15.0116 130.467 15.0116H130.364C129.456 15.1147 128.569 15.1663 127.652 15.1663C125.893 15.1663 125.039 14.0164 125.039 11.6531V9.93781C125.039 7.57281 125.893 6.42469 127.652 6.42469" fill="white"/>
+<path id="Vector_7" d="M85.8808 0.165001H84.7584C84.5969 0.165001 84.4731 0.218282 84.3528 0.336876C84.2205 0.46922 84.2033 0.605001 84.2033 0.720158V4.6475C83.4213 4.51688 82.6237 4.45328 81.7678 4.45328C80.1573 4.45328 78.9164 4.93453 78.0794 5.885C77.2544 6.82172 76.835 8.20016 76.835 9.97906V11.562C76.835 13.2739 77.2458 14.642 78.0536 15.6303C78.8683 16.6272 80.1178 17.1325 81.7678 17.1325C83.1995 17.1325 84.5694 17.0053 85.8327 16.7578C85.9805 16.7389 86.1884 16.6977 86.3002 16.5498C86.3809 16.4416 86.4153 16.3127 86.4153 16.115V0.718439C86.4153 0.586095 86.3964 0.445157 86.2658 0.312814C86.1334 0.18047 85.9977 0.163282 85.8825 0.163282M84.2033 6.55531V15.0459C83.2047 15.125 82.3642 15.168 81.7678 15.168C80.7641 15.168 80.0748 14.8844 79.6589 14.3017C79.2464 13.7242 79.047 12.8305 79.047 11.5655V9.9825C79.047 8.78625 79.2602 7.88047 79.6813 7.29094C80.0972 6.70828 80.7812 6.42469 81.7695 6.42469C82.8902 6.42469 83.6705 6.46594 84.205 6.55703" fill="white"/>
+<path id="Vector_8" d="M95.028 7.99391L93.005 6.78391C92.1216 6.25453 91.5028 5.8025 91.1642 5.44328C90.8394 5.09781 90.6744 4.69219 90.6744 4.24016C90.6744 3.51656 90.8978 3.02156 91.3584 2.72766C91.8174 2.43547 92.6286 2.28766 93.7698 2.28766C95.0022 2.28766 96.238 2.33063 97.5528 2.42H97.5975C97.735 2.42 97.8605 2.36844 97.9584 2.27047C98.0323 2.19656 98.108 2.09688 98.108 1.93188V0.986563C98.108 0.720157 97.9309 0.534532 97.6164 0.476094C96.4494 0.299063 95.1552 0.211407 93.7681 0.211407C92.0494 0.211407 90.7053 0.544845 89.7738 1.20485C88.8319 1.87172 88.3747 2.86516 88.3747 4.24188C88.3747 5.12016 88.6291 5.88844 89.1292 6.52609C89.6466 7.18438 90.4578 7.85813 91.4753 8.47172L93.6083 9.76938C94.6086 10.3864 95.303 10.8969 95.6708 11.287C96.0111 11.6463 96.183 12.0897 96.183 12.6002C96.183 13.3822 95.9406 14.0164 95.48 14.4341C95.0245 14.8483 94.1823 15.058 92.9775 15.058C91.5802 15.058 90.3633 15.0133 89.3595 14.9256H89.2822C89.1825 14.9256 89.0364 14.9377 88.9212 15.0528C88.8233 15.1508 88.7717 15.2762 88.7717 15.4137V16.2937C88.7717 16.4777 88.8078 16.6066 88.8783 16.677C88.9728 16.7716 89.1894 16.8111 89.3063 16.8266C90.6709 17.0345 91.8723 17.1359 92.9775 17.1359C93.8283 17.1359 94.588 17.0448 95.2359 16.8678C95.9234 16.677 96.4494 16.4484 96.8413 16.1648C97.2606 15.8623 97.5786 15.5375 97.8433 15.1405C98.1148 14.7331 98.3005 14.3172 98.3916 13.9064C98.4981 13.4234 98.548 13.0092 98.548 12.6002C98.548 11.6669 98.2799 10.847 97.7488 10.163C97.2039 9.45828 96.3119 8.75016 95.028 7.99562" fill="white"/>
+<path id="Vector_9" d="M70.8469 4.455C70.2161 4.455 69.6111 4.5375 69.0491 4.7025C68.5936 4.83484 68.0934 5.04969 67.4867 5.37281V5.18547C67.4867 5.00328 67.418 4.88641 67.3492 4.79531C67.2581 4.675 67.1103 4.60797 66.9316 4.60797H65.8316C65.67 4.60797 65.5463 4.66125 65.4259 4.77984C65.2936 4.91219 65.2764 5.05313 65.2764 5.18547V16.4037C65.2764 16.5653 65.3297 16.6891 65.4483 16.8094C65.5652 16.9263 65.6872 16.9813 65.8316 16.9813H66.9092C67.0708 16.9813 67.1945 16.928 67.3148 16.8094C67.4266 16.6994 67.4867 16.555 67.4867 16.4037V7.20672C68.5747 6.67219 69.5269 6.40063 70.3192 6.40063C71.1116 6.40063 71.7131 6.6 72.0638 6.99188C72.4144 7.38375 72.6 8.13656 72.6 9.16609V16.402C72.6 16.5636 72.6533 16.6873 72.7719 16.8077C72.8905 16.928 73.0159 16.9795 73.1775 16.9795H74.2328C74.3944 16.9795 74.5181 16.9263 74.6384 16.8077C74.757 16.6891 74.8103 16.5636 74.8103 16.402V9.16609C74.8103 6.03969 73.4766 4.45328 70.8452 4.45328" fill="white"/>
+<path id="Vector_10" d="M4.96032 17.2288C3.33438 17.2288 2.09172 16.8816 1.265 16.1975C0.426254 15.5014 9.53674e-07 14.3791 9.53674e-07 12.8631V4.39484C9.53674e-07 2.87719 0.426254 1.75484 1.265 1.06047C2.09 0.376407 3.33438 0.0292195 4.96032 0.0292195C8.84813 0.0292195 10.132 0.0687515 11.1117 0.161564C11.3231 0.16672 11.4366 0.336876 11.4744 0.393595C11.5483 0.505314 11.5861 0.623908 11.5861 0.74422V1.84422C11.5861 2.0075 11.5363 2.13985 11.44 2.2361C11.3472 2.32891 11.2114 2.38219 11.0705 2.38219H4.98266C4.27625 2.38219 3.72625 2.45781 3.34469 2.60563C3.01297 2.73453 2.805 2.90984 2.70532 3.14016C2.60047 3.38422 2.55063 3.78469 2.55063 4.39484V7.1775H10.6373C10.835 7.1775 10.9948 7.24453 11.1392 7.39063C11.2836 7.535 11.3523 7.69484 11.3523 7.8925V8.72781C11.3523 8.92547 11.2853 9.08531 11.1392 9.22969C10.9948 9.37406 10.835 9.44281 10.6373 9.44281H2.55063V12.8631C2.55063 13.475 2.59875 13.8737 2.70532 14.1178C2.80329 14.3481 3.01297 14.5234 3.34469 14.6523C3.70907 14.7933 4.10438 14.8758 5.36938 14.8758H11.0705C11.2131 14.8758 11.3489 14.9291 11.4417 15.0219C11.538 15.1181 11.5878 15.2505 11.5878 15.4138V16.5361C11.5878 16.6564 11.55 16.775 11.4761 16.8867C11.4383 16.9434 11.3248 17.1136 11.1048 17.1188C10.3469 17.1892 8.81719 17.2288 6.80454 17.2288H4.96204H4.96032Z" fill="white"/>
+<path id="Vector_11" d="M26.8623 8.94094V16.1906C26.8623 16.6547 26.6114 16.7406 26.5048 16.7716C26.4498 16.7888 24.2086 17.2838 20.5717 17.2838C16.2456 17.2838 12.9095 14.8139 12.9095 10.3813C12.9095 9.96875 12.9044 9.8175 12.9044 7.08125C12.9044 1.32859 17.3542 1.07288e-06 20.8209 1.07288e-06C23.9456 1.07288e-06 25.0491 0.266407 26.2281 0.445157C26.3398 0.462344 26.4413 0.495001 26.5255 0.541408C26.5891 0.575783 26.6441 0.618751 26.6905 0.666876C26.785 0.766563 26.84 0.897189 26.84 1.05016V2.15531C26.84 2.25844 26.8073 2.57125 26.4327 2.64C26.3863 2.64859 26.333 2.65375 26.2745 2.65375C26.2745 2.65375 26.1834 2.65375 26.1577 2.65031C25.9428 2.63141 23.6569 2.36844 21.0203 2.36844C17.3663 2.36844 15.467 3.92734 15.467 7.23594V10.1372C15.467 13.5541 17.7255 14.9428 20.6903 14.9428C23.0244 14.9428 24.2963 14.7177 24.2963 14.7177V10.5016H22.715C22.3953 10.5016 22.0017 10.2678 22.0017 9.8725C22.0017 9.47719 21.9966 9.45828 21.9966 8.94266C21.9966 8.42703 22.4056 8.22422 22.715 8.22422H26.1645C26.5822 8.22422 26.8606 8.57485 26.8606 8.94266" fill="white"/>
+</g>
+</g>
+</svg>`;

package/dist/collection/components/bs-logo/brandsync-logo-full-light.js

@@ -0,0 +1,40 @@
+// BrandSync brand mark (icon + "EG BrandSync" wordmark) on a light background, exported directly
+// from Figma's "Logo" component set (node 10909:30421, Device=Desktop, Background=Light) and
+// inlined as a self-contained SVG string -- same pattern as bs-chatbot-header's GENIE_LOGO_SVG.
+// The mark and wordmark were exported as two separate flat SVGs (Figma's own source splits them
+// into several layered clip-path/mask groups that don't matter once flattened) and composited
+// here into one <svg>, since combining them in markup avoids a second HTTP request and keeps the
+// logo a single atomic asset.
+//
+// The icon-to-wordmark gap was tightened from Figma's own exported spacing (a ~48px gap, i.e. the
+// word group translated to x=92.015 against a 44px-wide icon) to 16px (translate-x=60) at the
+// user's request after seeing it rendered -- the original gap read as too much empty space
+// between the mark and the text. Not a Figma re-measurement -- a deliberate deviation. Word group
+// itself (130.977 wide, vertically centered at translate-y=11.3308 against the 44px-tall icon) is
+// unchanged, so the total width is just 60 + 130.977 = 190.977.
+export const BRANDSYNC_LOGO_FULL_LIGHT_SVG = `<svg width="190.977" height="44" viewBox="0 0 190.977 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M35.2 0.128906H8.8C4.01109 0.128906 0.128905 4.01109 0.128905 8.8V35.2C0.128905 39.9889 4.01109 43.8711 8.8 43.8711H35.2C39.9889 43.8711 43.8711 39.9889 43.8711 35.2V8.8C43.8711 4.01109 39.9889 0.128906 35.2 0.128906Z" fill="white"/>
+<path id="Vector_2" d="M35.2 0.257812C39.9094 0.257812 43.7422 4.08891 43.7422 8.8V35.2C43.7422 39.9094 39.9111 43.7422 35.2 43.7422H8.8C4.09063 43.7422 0.257812 39.9111 0.257812 35.2V8.8C0.257812 4.08891 4.08891 0.257812 8.8 0.257812H35.2ZM35.2 0H8.8C3.93938 0 0 3.93938 0 8.8V35.2C0 40.0606 3.93938 44 8.8 44H35.2C40.0606 44 44 40.0606 44 35.2V8.8C44 3.93938 40.0606 0 35.2 0Z" fill="#E8EAEE"/>
+<path id="Vector_3" d="M18.6038 21.5067L21.5067 18.6038C21.7748 18.3356 22.2097 18.3356 22.4795 18.6038L25.3962 21.5205C25.6644 21.7886 25.6644 22.2252 25.3962 22.4933L22.4933 25.3962C22.2252 25.6644 21.7886 25.6644 21.5205 25.3962L18.6038 22.4795C18.3356 22.2114 18.3356 21.7748 18.6038 21.5067Z" fill="#57B1FF"/>
+<path id="Vector_4" d="M15.6423 12.6586L6.7925 21.5084C6.52438 21.7766 6.52438 22.2114 6.7925 22.4813L9.82781 25.5166C10.0959 25.7847 10.5308 25.7847 10.8006 25.5166L19.6505 16.6667C19.9186 16.3986 19.9186 15.962 19.6505 15.6939L16.6152 12.6586C16.347 12.3905 15.9105 12.3905 15.6423 12.6586Z" fill="#57B1FF"/>
+<path id="Vector_5" d="M28.3559 31.3414L37.2161 22.4813C37.4842 22.2131 37.4842 21.7766 37.2161 21.5084L34.1808 18.4731C33.9127 18.205 33.4778 18.205 33.208 18.4731L24.3478 27.3333C24.0797 27.6014 24.0797 28.038 24.3478 28.3061L27.3831 31.3414C27.6512 31.6095 28.0878 31.6095 28.3559 31.3414Z" fill="#57B1FF"/>
+<path id="Vector_6" d="M28.3577 12.6586L37.2075 21.5084C37.4756 21.7766 37.4756 22.2114 37.2075 22.4813L34.1722 25.5166C33.9041 25.7847 33.4692 25.7847 33.1994 25.5166L24.3495 16.6667C24.0814 16.3986 24.0814 15.962 24.3495 15.6939L27.3848 12.6586C27.653 12.3905 28.0895 12.3905 28.3577 12.6586Z" fill="#1B85FF"/>
+<path id="Vector_7" d="M15.6441 31.3414L6.7839 22.4813C6.51578 22.2131 6.51578 21.7766 6.7839 21.5084L9.81922 18.4731C10.0873 18.205 10.5222 18.205 10.792 18.4731L19.6522 27.3333C19.9203 27.6014 19.9203 28.038 19.6522 28.3061L16.6169 31.3414C16.3487 31.6095 15.9122 31.6095 15.6441 31.3414Z" fill="#1B85FF"/>
+</g>
+<g transform="translate(60, 11.3308)">
+<g id="Group">
+<path id="Vector" d="M116.841 4.455C116.21 4.455 115.605 4.5375 115.043 4.7025C114.587 4.83485 114.087 5.04969 113.48 5.37282V5.18547C113.48 5.00328 113.412 4.88641 113.343 4.79532C113.252 4.675 113.104 4.60797 112.925 4.60797H111.825C111.664 4.60797 111.54 4.66125 111.42 4.77985C111.287 4.91219 111.27 5.05313 111.27 5.18547V16.4038C111.27 16.5653 111.323 16.6891 111.442 16.8094C111.559 16.9263 111.681 16.9813 111.825 16.9813H112.903C113.065 16.9813 113.188 16.928 113.309 16.8094C113.42 16.6977 113.48 16.555 113.48 16.4038V7.20672C114.568 6.67219 115.521 6.40063 116.313 6.40063C117.105 6.40063 117.707 6.6 118.057 6.99188C118.408 7.38375 118.594 8.13656 118.594 9.1661V16.402C118.594 16.5636 118.647 16.6873 118.766 16.8077C118.884 16.9263 119.01 16.9795 119.171 16.9795H120.227C120.388 16.9795 120.512 16.9263 120.632 16.8077C120.751 16.6891 120.804 16.5636 120.804 16.402V9.1661C120.804 6.03969 119.47 4.45328 116.839 4.45328" fill="#363C47"/>
+<path id="Vector_2" d="M52.0747 4.455C51.0555 4.455 50.0827 4.76094 49.1116 5.39V5.18547C49.1116 5.02391 49.0583 4.90016 48.9397 4.77985C48.8314 4.67156 48.7334 4.60797 48.5564 4.60797H47.5234C47.3619 4.60797 47.2381 4.66125 47.1178 4.77985C46.9855 4.91219 46.9683 5.05313 46.9683 5.18547V16.4038C46.9683 16.5653 47.0216 16.6891 47.1402 16.8094C47.257 16.9263 47.3791 16.9813 47.5234 16.9813H48.6011C48.7627 16.9813 48.8864 16.928 49.0067 16.8094C49.1184 16.6994 49.1786 16.555 49.1786 16.4038V7.26688C50.1634 6.69281 51.138 6.40235 52.0764 6.40235C52.6178 6.40235 52.6763 6.04485 52.6763 5.89016V4.98781C52.6763 4.64922 52.458 4.455 52.0764 4.455" fill="#363C47"/>
+<path id="Vector_3" d="M42.6456 8.39266C43.2644 8.10219 43.7525 7.69485 44.1306 7.15688C44.5552 6.55188 44.7717 5.80766 44.7717 4.94485V4.5925C44.7717 1.68438 42.5563 0.20969 38.1889 0.20969C36.8913 0.20969 35.7088 0.269846 34.6792 0.386721C34.1378 0.438284 33.8508 0.766565 33.8508 1.33719V15.9861C33.8508 16.2886 33.9298 16.5395 34.0673 16.677C34.1963 16.8059 34.3888 16.885 34.693 16.9348C35.5438 17.0689 36.7245 17.1342 38.2989 17.1342C42.6525 17.1342 44.8594 15.5186 44.8594 12.3338V11.9591C44.8594 11.0911 44.6291 10.3177 44.1753 9.65938C43.7783 9.0836 43.2764 8.66594 42.6456 8.39094M36.1505 15.082V9.30531H39.4006C40.0331 9.30531 40.5591 9.3775 40.9613 9.51672C41.372 9.6611 41.7106 9.86907 41.9392 10.1183C42.1558 10.3555 42.3294 10.6425 42.4394 10.9519C42.5374 11.2269 42.5855 11.5569 42.5855 11.9608V12.3355C42.5855 12.8683 42.4875 13.3358 42.2916 13.7259C42.1094 14.0886 41.8258 14.3808 41.4459 14.5905C41.0678 14.8002 40.6244 14.9497 40.1259 15.0373C39.6292 15.1233 39.0156 15.168 38.3024 15.168C38.0841 15.168 37.7919 15.1559 37.4206 15.1388L37.0752 15.1233C36.8723 15.1147 36.6953 15.1061 36.5458 15.0992C36.3859 15.0923 36.2536 15.0855 36.1522 15.082M42.4961 4.94485C42.4961 6.61375 41.4837 7.425 39.4006 7.425H36.1505V2.23953C37.2952 2.19828 37.9809 2.17766 38.1906 2.17766C38.763 2.17766 39.2614 2.2 39.6722 2.24297C40.1414 2.29281 40.5367 2.36328 40.8822 2.45953C41.2517 2.56266 41.5456 2.70531 41.7777 2.8961C42.0372 3.10922 42.2022 3.31547 42.3105 3.56985C42.4359 3.86375 42.4978 4.19719 42.4978 4.59422V4.94656L42.4961 4.94485Z" fill="#363C47"/>
+<path id="Vector_4" d="M127.652 6.42297C128.631 6.42297 129.518 6.47282 130.362 6.57594H130.467C130.567 6.57594 130.713 6.56391 130.828 6.44875C130.902 6.37485 130.977 6.27688 130.977 6.11016V5.31782C130.977 5.1786 130.962 5.005 130.848 4.88985C130.776 4.81766 130.642 4.72485 130.422 4.69735C129.451 4.53578 128.52 4.45328 127.65 4.45328C126.125 4.45328 124.929 4.9586 124.092 5.95375C123.241 6.96438 122.829 8.26719 122.829 9.9361V11.6514C122.829 13.3186 123.243 14.6214 124.092 15.6338C124.929 16.6289 126.127 17.1342 127.65 17.1342C128.554 17.1342 129.461 17.0552 130.417 16.8919C130.642 16.8644 130.776 16.7716 130.848 16.6994C130.962 16.5859 130.977 16.4106 130.977 16.2714V15.4791C130.977 15.3123 130.902 15.2144 130.828 15.1405C130.713 15.0253 130.567 15.0116 130.467 15.0116H130.364C129.456 15.1147 128.569 15.1663 127.652 15.1663C125.893 15.1663 125.039 14.0164 125.039 11.6531V9.93781C125.039 7.57281 125.893 6.42469 127.652 6.42469" fill="#363C47"/>
+<path id="Vector_5" d="M58.4306 4.455C57.2773 4.455 56.1223 4.55125 55.0017 4.74203C54.5222 4.81078 54.4225 5.08063 54.4225 5.29547V6.06547C54.4225 6.24766 54.4912 6.55532 54.9553 6.55532H55.0773C56.3286 6.43672 57.4252 6.38 58.4306 6.38C59.2591 6.38 59.84 6.55016 60.1562 6.88703C60.4811 7.2325 60.6461 7.85297 60.6461 8.72782V9.47031H59.1559C57.2223 9.47031 55.8199 9.76766 54.9863 10.3538C54.1441 10.945 53.7178 11.8938 53.7178 13.1708V13.4355C53.7178 14.1384 53.8141 14.7159 54.0134 15.2023C54.218 15.7008 54.4981 16.0789 54.8728 16.3608C55.2802 16.6667 55.6411 16.8506 56.0416 16.9555C56.497 17.0758 56.968 17.1359 57.4406 17.1359C58.4547 17.1359 59.5203 16.8163 60.6908 16.158V16.4038C60.6908 16.5653 60.7441 16.6891 60.8627 16.8094C60.9812 16.928 61.1067 16.9813 61.2683 16.9813H62.2806C62.4422 16.9813 62.5659 16.928 62.6863 16.8094C62.8048 16.6908 62.8581 16.5653 62.8581 16.4038V8.72782C62.8581 7.35625 62.4972 6.28719 61.7856 5.55328C61.0706 4.81422 59.9723 4.455 58.4323 4.455M55.9281 13.1484C55.9281 12.4094 56.1498 11.8714 56.5709 11.5913C56.8872 11.3816 57.5902 11.1306 59.1559 11.1306H60.6461V14.453C59.6458 14.9927 58.6695 15.2763 57.8136 15.2763C57.1777 15.2763 56.6964 15.1388 56.3853 14.8706C56.0862 14.6111 55.9264 14.1058 55.9264 13.4131V13.1484H55.9281Z" fill="#363C47"/>
+<path id="Vector_6" d="M95.028 7.99391L93.005 6.78391C92.1216 6.25453 91.5028 5.8025 91.1642 5.44328C90.8394 5.09781 90.6744 4.69219 90.6744 4.24016C90.6744 3.51656 90.8978 3.02157 91.3584 2.72766C91.8174 2.43547 92.6286 2.28766 93.7698 2.28766C95.0022 2.28766 96.238 2.33063 97.5528 2.42H97.5975C97.735 2.42 97.8605 2.36844 97.9584 2.27047C98.0323 2.19656 98.108 2.09688 98.108 1.93188V0.986564C98.108 0.720158 97.9309 0.534533 97.6164 0.476096C96.4494 0.299064 95.1552 0.211408 93.7681 0.211408C92.0494 0.211408 90.7053 0.544846 89.7738 1.20485C88.8319 1.87172 88.3747 2.86516 88.3747 4.24188C88.3747 5.12016 88.6291 5.88844 89.1292 6.5261C89.6466 7.18438 90.4578 7.85813 91.4753 8.47172L93.6083 9.76938C94.6086 10.3864 95.303 10.8969 95.6708 11.287C96.0111 11.6463 96.183 12.0897 96.183 12.6002C96.183 13.3822 95.9406 14.0164 95.48 14.4341C95.0245 14.8483 94.1823 15.058 92.9775 15.058C91.5802 15.058 90.3633 15.0133 89.3595 14.9256H89.2822C89.1825 14.9256 89.0364 14.9377 88.9212 15.0528C88.8233 15.1508 88.7717 15.2763 88.7717 15.4138V16.2938C88.7717 16.4777 88.8078 16.6066 88.8783 16.677C88.9728 16.7716 89.1894 16.8111 89.3063 16.8266C90.6709 17.0345 91.8723 17.1359 92.9775 17.1359C93.8283 17.1359 94.588 17.0448 95.2359 16.8678C95.9234 16.677 96.4494 16.4484 96.8413 16.1648C97.2606 15.8623 97.5786 15.5375 97.8433 15.1405C98.1148 14.7331 98.3005 14.3172 98.3916 13.9064C98.4981 13.4234 98.548 13.0092 98.548 12.6002C98.548 11.6669 98.2799 10.847 97.7488 10.163C97.2039 9.45828 96.3119 8.75016 95.028 7.99563" fill="#363C47"/>
+<path id="Vector_7" d="M109.022 4.60969H107.79C107.68 4.60969 107.566 4.65438 107.443 4.74719C107.331 4.83141 107.269 4.9225 107.238 5.0411L104.583 14.9909H104.337C104.271 14.9909 104.225 14.9755 104.192 14.9428C104.172 14.9222 104.103 14.8397 104.051 14.6077L101.456 5.06516C101.427 4.94656 101.367 4.83828 101.288 4.75922C101.191 4.66297 101.069 4.60969 100.949 4.60969H99.7391C99.4056 4.60969 99.2063 4.80047 99.2063 5.12188C99.2063 5.21125 99.2063 5.28172 99.2406 5.33672L102.159 15.3622C102.248 15.6939 102.36 15.9723 102.505 16.2113C102.652 16.457 102.773 16.6203 102.95 16.7217L103.022 16.7647C103.153 16.842 103.278 16.9142 103.412 16.9366C103.538 16.9572 103.727 16.983 103.919 16.983H104.051L103.873 17.7152C103.703 18.437 103.476 18.9148 103.195 19.1348C102.905 19.3634 102.444 19.4786 101.829 19.4786C101.503 19.4786 100.83 19.4339 99.8834 19.348H99.8044C99.3455 19.348 99.2492 19.6144 99.2492 19.8361V20.6508C99.2492 20.7608 99.3042 21.0272 99.8198 21.1372C100.42 21.2713 101.052 21.3383 101.697 21.3383C102.57 21.3383 103.276 21.2231 103.797 20.9963C104.313 20.7728 104.732 20.4153 105.045 19.9341C105.337 19.4855 105.609 18.8289 105.853 17.9833L109.476 5.33672C109.51 5.28 109.51 5.21125 109.51 5.12188C109.51 5.02219 109.496 4.8761 109.381 4.76094C109.283 4.66297 109.158 4.61141 109.02 4.61141" fill="#363C47"/>
+<path id="Vector_8" d="M85.8808 0.165002H84.7584C84.5969 0.165002 84.4731 0.218283 84.3528 0.336877C84.2205 0.469221 84.2033 0.605003 84.2033 0.720159V4.6475C83.4213 4.51688 82.6237 4.45328 81.7678 4.45328C80.1573 4.45328 78.9164 4.93453 78.0794 5.885C77.2544 6.82172 76.835 8.20016 76.835 9.97907V11.562C76.835 13.2739 77.2458 14.642 78.0536 15.6303C78.8683 16.6272 80.1178 17.1325 81.7678 17.1325C83.1995 17.1325 84.5694 17.0053 85.8327 16.7578C85.9805 16.7389 86.1884 16.6977 86.3002 16.5498C86.3809 16.4416 86.4153 16.3127 86.4153 16.115V0.71844C86.4153 0.586096 86.3964 0.445159 86.2658 0.312815C86.1334 0.180471 85.9977 0.163283 85.8825 0.163283M84.2033 6.55531V15.0459C83.2047 15.125 82.3642 15.168 81.7678 15.168C80.7641 15.168 80.0748 14.8844 79.6589 14.3017C79.2464 13.7242 79.047 12.8305 79.047 11.5655V9.9825C79.047 8.78625 79.2602 7.88047 79.6813 7.29094C80.0972 6.70828 80.7812 6.42469 81.7695 6.42469C82.8902 6.42469 83.6705 6.46594 84.205 6.55703" fill="#363C47"/>
+<path id="Vector_9" d="M70.8469 4.455C70.2161 4.455 69.6111 4.5375 69.0491 4.7025C68.5936 4.83485 68.0934 5.04969 67.4867 5.37282V5.18547C67.4867 5.00328 67.418 4.88641 67.3492 4.79532C67.2581 4.675 67.1103 4.60797 66.9316 4.60797H65.8316C65.67 4.60797 65.5463 4.66125 65.4259 4.77985C65.2936 4.91219 65.2764 5.05313 65.2764 5.18547V16.4038C65.2764 16.5653 65.3297 16.6891 65.4483 16.8094C65.5652 16.9263 65.6872 16.9813 65.8316 16.9813H66.9092C67.0708 16.9813 67.1945 16.928 67.3148 16.8094C67.4266 16.6994 67.4867 16.555 67.4867 16.4038V7.20672C68.5747 6.67219 69.5269 6.40063 70.3192 6.40063C71.1116 6.40063 71.7131 6.6 72.0638 6.99188C72.4144 7.38375 72.6 8.13656 72.6 9.1661V16.402C72.6 16.5636 72.6533 16.6873 72.7719 16.8077C72.8905 16.928 73.0159 16.9795 73.1775 16.9795H74.2328C74.3944 16.9795 74.5181 16.9263 74.6384 16.8077C74.757 16.6891 74.8103 16.5636 74.8103 16.402V9.1661C74.8103 6.03969 73.4766 4.45328 70.8452 4.45328" fill="#363C47"/>
+<path id="Vector_10" d="M4.96032 17.2288C3.33438 17.2288 2.09172 16.8816 1.265 16.1975C0.426254 15.5014 9.53674e-07 14.3791 9.53674e-07 12.8631V4.39485C9.53674e-07 2.87719 0.426254 1.75485 1.265 1.06047C2.09 0.376408 3.33438 0.0292208 4.96032 0.0292208C8.84813 0.0292208 10.132 0.0687528 11.1117 0.161565C11.3231 0.166722 11.4366 0.336878 11.4744 0.393596C11.5483 0.505315 11.5861 0.623909 11.5861 0.744221V1.84422C11.5861 2.0075 11.5363 2.13985 11.44 2.2361C11.3472 2.32891 11.2114 2.38219 11.0705 2.38219H4.98266C4.27625 2.38219 3.72625 2.45781 3.34469 2.60563C3.01297 2.73453 2.805 2.90985 2.70532 3.14016C2.60047 3.38422 2.55063 3.78469 2.55063 4.39485V7.1775H10.6373C10.835 7.1775 10.9948 7.24453 11.1392 7.39063C11.2836 7.535 11.3523 7.69485 11.3523 7.8925V8.72782C11.3523 8.92547 11.2853 9.08532 11.1392 9.22969C10.9948 9.37407 10.835 9.44281 10.6373 9.44281H2.55063V12.8631C2.55063 13.475 2.59875 13.8738 2.70532 14.1178C2.80329 14.3481 3.01297 14.5234 3.34469 14.6523C3.70907 14.7933 4.10438 14.8758 5.36938 14.8758H11.0705C11.2131 14.8758 11.3489 14.9291 11.4417 15.0219C11.538 15.1181 11.5878 15.2505 11.5878 15.4138V16.5361C11.5878 16.6564 11.55 16.775 11.4761 16.8867C11.4383 16.9434 11.3248 17.1136 11.1048 17.1188C10.3469 17.1892 8.81719 17.2288 6.80454 17.2288H4.96204H4.96032Z" fill="#363C47"/>
+<path id="Vector_11" d="M26.8623 8.94094V16.1906C26.8623 16.6547 26.6114 16.7406 26.5048 16.7716C26.4498 16.7888 24.2086 17.2838 20.5717 17.2838C16.2456 17.2838 12.9095 14.8139 12.9095 10.3813C12.9095 9.96875 12.9044 9.8175 12.9044 7.08125C12.9044 1.3286 17.3542 2.38419e-06 20.8209 2.38419e-06C23.9456 2.38419e-06 25.0491 0.266408 26.2281 0.445158C26.3398 0.462346 26.4413 0.495003 26.5255 0.541409C26.5891 0.575784 26.6441 0.618752 26.6905 0.666877C26.785 0.766564 26.84 0.89719 26.84 1.05016V2.15532C26.84 2.25844 26.8073 2.57125 26.4327 2.64C26.3863 2.6486 26.333 2.65375 26.2745 2.65375C26.2745 2.65375 26.1834 2.65375 26.1577 2.65031C25.9428 2.63141 23.6569 2.36844 21.0203 2.36844C17.3663 2.36844 15.467 3.92735 15.467 7.23594V10.1372C15.467 13.5541 17.7255 14.9428 20.6903 14.9428C23.0244 14.9428 24.2963 14.7177 24.2963 14.7177V10.5016H22.715C22.3953 10.5016 22.0017 10.2678 22.0017 9.8725C22.0017 9.47719 21.9966 9.45828 21.9966 8.94266C21.9966 8.42703 22.4056 8.22422 22.715 8.22422H26.1645C26.5822 8.22422 26.8606 8.57485 26.8606 8.94266" fill="#363C47"/>
+</g>
+</g>
+</svg>`;

package/dist/collection/components/bs-logo/brandsync-logo-mark.js

@@ -0,0 +1,17 @@
+// BrandSync icon mark only (no wordmark), extracted from the icon portion of
+// brandsync-logo-full-light.ts's BRANDSYNC_LOGO_FULL_LIGHT_SVG (its first <g id="Group"> block,
+// viewBox 0 0 44 44) and wrapped as its own standalone <svg>. Figma's "Logo" component set (node
+// 10909:30421) only has one real designed instance of the icon-only mark (Device="Tab and
+// mobile", Background="Default") -- there is no separate dark-background version of it, so this
+// single asset is used regardless of bs-logo's `background` prop when `variant="mark"`.
+export const BRANDSYNC_LOGO_MARK_SVG = `<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M35.2 0.128906H8.8C4.01109 0.128906 0.128905 4.01109 0.128905 8.8V35.2C0.128905 39.9889 4.01109 43.8711 8.8 43.8711H35.2C39.9889 43.8711 43.8711 39.9889 43.8711 35.2V8.8C43.8711 4.01109 39.9889 0.128906 35.2 0.128906Z" fill="white"/>
+<path id="Vector_2" d="M35.2 0.257812C39.9094 0.257812 43.7422 4.08891 43.7422 8.8V35.2C43.7422 39.9094 39.9111 43.7422 35.2 43.7422H8.8C4.09063 43.7422 0.257812 39.9111 0.257812 35.2V8.8C0.257812 4.08891 4.08891 0.257812 8.8 0.257812H35.2ZM35.2 0H8.8C3.93938 0 0 3.93938 0 8.8V35.2C0 40.0606 3.93938 44 8.8 44H35.2C40.0606 44 44 40.0606 44 35.2V8.8C44 3.93938 40.0606 0 35.2 0Z" fill="#E8EAEE"/>
+<path id="Vector_3" d="M18.6038 21.5067L21.5067 18.6038C21.7748 18.3356 22.2097 18.3356 22.4795 18.6038L25.3962 21.5205C25.6644 21.7886 25.6644 22.2252 25.3962 22.4933L22.4933 25.3962C22.2252 25.6644 21.7886 25.6644 21.5205 25.3962L18.6038 22.4795C18.3356 22.2114 18.3356 21.7748 18.6038 21.5067Z" fill="#57B1FF"/>
+<path id="Vector_4" d="M15.6423 12.6586L6.7925 21.5084C6.52438 21.7766 6.52438 22.2114 6.7925 22.4813L9.82781 25.5166C10.0959 25.7847 10.5308 25.7847 10.8006 25.5166L19.6505 16.6667C19.9186 16.3986 19.9186 15.962 19.6505 15.6939L16.6152 12.6586C16.347 12.3905 15.9105 12.3905 15.6423 12.6586Z" fill="#57B1FF"/>
+<path id="Vector_5" d="M28.3559 31.3414L37.2161 22.4813C37.4842 22.2131 37.4842 21.7766 37.2161 21.5084L34.1808 18.4731C33.9127 18.205 33.4778 18.205 33.208 18.4731L24.3478 27.3333C24.0797 27.6014 24.0797 28.038 24.3478 28.3061L27.3831 31.3414C27.6512 31.6095 28.0878 31.6095 28.3559 31.3414Z" fill="#57B1FF"/>
+<path id="Vector_6" d="M28.3577 12.6586L37.2075 21.5084C37.4756 21.7766 37.4756 22.2114 37.2075 22.4813L34.1722 25.5166C33.9041 25.7847 33.4692 25.7847 33.1994 25.5166L24.3495 16.6667C24.0814 16.3986 24.0814 15.962 24.3495 15.6939L27.3848 12.6586C27.653 12.3905 28.0895 12.3905 28.3577 12.6586Z" fill="#1B85FF"/>
+<path id="Vector_7" d="M15.6441 31.3414L6.7839 22.4813C6.51578 22.2131 6.51578 21.7766 6.7839 21.5084L9.81922 18.4731C10.0873 18.205 10.5222 18.205 10.792 18.4731L19.6522 27.3333C19.9203 27.6014 19.9203 28.038 19.6522 28.3061L16.6169 31.3414C16.3487 31.6095 15.9122 31.6095 15.6441 31.3414Z" fill="#1B85FF"/>
+</g>
+</svg>`;

package/dist/collection/components/bs-logo/bs-logo.cmp.test.js

@@ -0,0 +1,113 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-logo', () => {
+    it('renders role="img" and aria-label="BrandSync"', async () => {
+        const { root } = await render(h("bs-logo", null));
+        const logo = root.shadowRoot.querySelector('[part="logo"]');
+        expect(logo).not.toBeNull();
+        expect(logo).toEqualAttribute('role', 'img');
+        expect(logo).toEqualAttribute('aria-label', 'BrandSync');
+    });
+    it('renders both the light and dark full-wordmark assets in the shadow DOM regardless of background', async () => {
+        // variant="full" always renders both assets and picks one via CSS (see bs-logo.css) -- this
+        // lets background="auto" react to the ambient theme with no re-render needed.
+        const { root } = await render(h("bs-logo", null));
+        const lightSvg = root.shadowRoot.querySelector('.bs-logo__asset--light svg');
+        const darkSvg = root.shadowRoot.querySelector('.bs-logo__asset--dark svg');
+        expect(lightSvg).toEqualAttribute('width', '190.977');
+        expect(lightSvg).toEqualAttribute('height', '44');
+        // Light asset's icon mark is a two-path composition (solid fill + a subtle #E8EAEE border ring).
+        expect(lightSvg.querySelector('path[fill="#E8EAEE"]')).not.toBeNull();
+        expect(darkSvg).toEqualAttribute('width', '190.0');
+        expect(darkSvg).toEqualAttribute('height', '44');
+        // Dark asset's icon mark is a single solid-white path -- no #E8EAEE border-ring path, and no
+        // #363C47 wordmark fills (all wordmark paths are solid white instead).
+        expect(darkSvg.querySelector('path[fill="#E8EAEE"]')).toBeNull();
+        expect(darkSvg.querySelector('path[fill="#363C47"]')).toBeNull();
+    });
+    describe('background="auto" (default)', () => {
+        it('applies the bs-logo--bg-auto class', async () => {
+            const { root } = await render(h("bs-logo", null));
+            expect(root.shadowRoot.querySelector('[part="logo"]')).toHaveClass('bs-logo--bg-auto');
+        });
+        it('shows the light asset and hides the dark one when no ambient theme is set', async () => {
+            const { root } = await render(h("bs-logo", null));
+            const lightAsset = root.shadowRoot.querySelector('.bs-logo__asset--light');
+            const darkAsset = root.shadowRoot.querySelector('.bs-logo__asset--dark');
+            expect(getComputedStyle(lightAsset).display).not.toBe('none');
+            expect(getComputedStyle(darkAsset).display).toBe('none');
+        });
+        it('shows the dark asset and hides the light one when an ambient dark theme sets --bs-logo-asset-*-display', async () => {
+            // Simulates what src/global/base.css's [data-theme="dark"] rule sets on <html> in a real
+            // app -- setting the same custom properties directly on the render stage container here,
+            // since this isolated component test doesn't load that global stylesheet. CSS custom
+            // properties inherit through the shadow boundary regardless of where they're defined.
+            const { root } = await render(h("bs-logo", null), {
+                stageAttrs: { style: '--bs-logo-asset-light-display: none; --bs-logo-asset-dark-display: block;' },
+            });
+            const lightAsset = root.shadowRoot.querySelector('.bs-logo__asset--light');
+            const darkAsset = root.shadowRoot.querySelector('.bs-logo__asset--dark');
+            expect(getComputedStyle(lightAsset).display).toBe('none');
+            expect(getComputedStyle(darkAsset).display).not.toBe('none');
+        });
+    });
+    describe('background="light"/"dark" (explicit)', () => {
+        it('pins the light asset even when an ambient dark theme is set', async () => {
+            const { root } = await render(h("bs-logo", { background: "light" }), {
+                stageAttrs: { style: '--bs-logo-asset-light-display: none; --bs-logo-asset-dark-display: block;' },
+            });
+            expect(root.shadowRoot.querySelector('[part="logo"]')).toHaveClass('bs-logo--bg-light');
+            expect(getComputedStyle(root.shadowRoot.querySelector('.bs-logo__asset--light')).display).not.toBe('none');
+            expect(getComputedStyle(root.shadowRoot.querySelector('.bs-logo__asset--dark')).display).toBe('none');
+        });
+        it('pins the dark asset even when no ambient theme is set', async () => {
+            const { root } = await render(h("bs-logo", { background: "dark" }));
+            expect(root.shadowRoot.querySelector('[part="logo"]')).toHaveClass('bs-logo--bg-dark');
+            expect(getComputedStyle(root.shadowRoot.querySelector('.bs-logo__asset--light')).display).toBe('none');
+            expect(getComputedStyle(root.shadowRoot.querySelector('.bs-logo__asset--dark')).display).not.toBe('none');
+        });
+    });
+    it('renders the icon-only mark asset for variant="mark"', async () => {
+        const { root } = await render(h("bs-logo", { variant: "mark" }));
+        const svg = root.shadowRoot.querySelector('[part="logo"] svg');
+        expect(svg).toEqualAttribute('width', '44');
+        expect(svg).toEqualAttribute('height', '44');
+        expect(svg).toEqualAttribute('viewBox', '0 0 44 44');
+    });
+    it('applies the bs-logo--full/bs-logo--mark class matching the variant', async () => {
+        const { root: fullRoot } = await render(h("bs-logo", { variant: "full" }));
+        expect(fullRoot.shadowRoot.querySelector('[part="logo"]')).toHaveClass('bs-logo--full');
+        const { root: markRoot } = await render(h("bs-logo", { variant: "mark" }));
+        expect(markRoot.shadowRoot.querySelector('[part="logo"]')).toHaveClass('bs-logo--mark');
+    });
+    it('renders identical markup for variant="mark" regardless of background (no separate dark mark asset)', async () => {
+        const { root: lightRoot } = await render(h("bs-logo", { variant: "mark", background: "light" }));
+        const { root: darkRoot } = await render(h("bs-logo", { variant: "mark", background: "dark" }));
+        const lightMarkup = lightRoot.shadowRoot.querySelector('[part="logo"]').innerHTML;
+        const darkMarkup = darkRoot.shadowRoot.querySelector('[part="logo"]').innerHTML;
+        expect(lightMarkup).toBe(darkMarkup);
+    });
+    describe('variant="custom"', () => {
+        it('renders a real <img> with the given src/alt instead of a built-in asset', async () => {
+            const { root } = await render(h("bs-logo", { variant: "custom", src: "https://example.com/logo.png", alt: "Acme Co" }));
+            const img = root.shadowRoot.querySelector('[part="logo"]');
+            expect(img.tagName).toBe('IMG');
+            expect(img).toEqualAttribute('src', 'https://example.com/logo.png');
+            expect(img).toEqualAttribute('alt', 'Acme Co');
+            expect(img).toHaveClass('bs-logo--custom');
+        });
+        it('falls back to alt="" (not a missing attribute) when alt is not provided', async () => {
+            const { root } = await render(h("bs-logo", { variant: "custom", src: "https://example.com/logo.png" }));
+            const img = root.shadowRoot.querySelector('[part="logo"]');
+            expect(img).toEqualAttribute('alt', '');
+        });
+        it('does not fetch/render any built-in BrandSync asset when custom', async () => {
+            const { root } = await render(h("bs-logo", { variant: "custom", src: "https://example.com/logo.png", alt: "Acme Co" }));
+            expect(root.shadowRoot.querySelector('svg')).toBeNull();
+        });
+        it('ignores background for variant="custom"', async () => {
+            const { root: lightRoot } = await render(h("bs-logo", { variant: "custom", background: "light", src: "https://example.com/logo.png", alt: "Acme" }));
+            const { root: darkRoot } = await render(h("bs-logo", { variant: "custom", background: "dark", src: "https://example.com/logo.png", alt: "Acme" }));
+            expect(lightRoot.shadowRoot.querySelector('[part="logo"]').outerHTML).toBe(darkRoot.shadowRoot.querySelector('[part="logo"]').outerHTML);
+        });
+    });
+});

package/dist/collection/components/bs-logo/bs-logo.css

@@ -0,0 +1,79 @@
+/**
+ * @prop --bs-logo-width-full: Width of the rendered logo when variant="full". 190.977px -- the
+ *   light asset's natural width after its icon-to-wordmark gap was tightened from Figma's own
+ *   exported spacing (see brandsync-logo-full-light.ts) -- a literal size, not a brandsync-tokens
+ *   alias, since this is a fixed asset's natural dimensions rather than a themeable design token.
+ * @prop --bs-logo-height-full: Height of the rendered logo when variant="full". 44px.
+ * @prop --bs-logo-width-mark: Width of the rendered logo when variant="mark". 44px.
+ * @prop --bs-logo-height-mark: Height of the rendered logo when variant="mark". 44px.
+ * @prop --bs-logo-height-custom: Height of the rendered image when variant="custom". Width is
+ *   `auto` (not a fixed custom property) so a consumer's own logo keeps its natural aspect ratio --
+ *   only the height is constrained, matching `full`/`mark`'s shared 44px height. Defaults to 44px.
+ * @prop --bs-logo-asset-light-display: Only read when background="auto" (the default). Defined in
+ *   src/global/base.css, not here -- that's this library's own bridge from the ambient
+ *   [data-theme="dark"] attribute to which full-wordmark asset shows, not a per-component override
+ *   point most consumers need to touch directly.
+ * @prop --bs-logo-asset-dark-display: The background="auto" counterpart to
+ *   --bs-logo-asset-light-display above -- see that entry.
+ */
+:host {
+  display: inline-block;
+
+  --bs-logo-width-full: 190.977px;
+  --bs-logo-height-full: 44px;
+  --bs-logo-width-mark: 44px;
+  --bs-logo-height-mark: 44px;
+  --bs-logo-height-custom: 44px;
+}
+
+.bs-logo {
+  display: block;
+}
+
+.bs-logo--full {
+  width: var(--bs-logo-width-full);
+  height: var(--bs-logo-height-full);
+}
+
+.bs-logo--mark {
+  width: var(--bs-logo-width-mark);
+  height: var(--bs-logo-height-mark);
+}
+
+.bs-logo svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* variant="full" renders both the light and dark assets at once (see bs-logo.tsx) and picks one
+   via these display toggles -- "auto" reacts to --bs-logo-asset-light-display/-dark-display
+   (defined in src/global/base.css, flipped by [data-theme="dark"]); "light"/"dark" pin one
+   directly regardless of that ambient token. */
+.bs-logo__asset {
+  display: none;
+  width: 100%;
+  height: 100%;
+}
+
+.bs-logo--bg-auto .bs-logo__asset--light {
+  display: var(--bs-logo-asset-light-display, block);
+}
+
+.bs-logo--bg-auto .bs-logo__asset--dark {
+  display: var(--bs-logo-asset-dark-display, none);
+}
+
+.bs-logo--bg-light .bs-logo__asset--light {
+  display: block;
+}
+
+.bs-logo--bg-dark .bs-logo__asset--dark {
+  display: block;
+}
+
+.bs-logo--custom {
+  width: auto;
+  height: var(--bs-logo-height-custom);
+  object-fit: contain;
+}

package/dist/collection/components/bs-logo/bs-logo.js

@@ -0,0 +1,193 @@
+import { h } from "@stencil/core";
+import { BRANDSYNC_LOGO_FULL_LIGHT_SVG } from "./brandsync-logo-full-light";
+import { BRANDSYNC_LOGO_FULL_DARK_SVG } from "./brandsync-logo-full-dark";
+import { BRANDSYNC_LOGO_MARK_SVG } from "./brandsync-logo-mark";
+/**
+ * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
+ * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
+ * (the drawer's collapsed state even faked an icon-only look by clipping the full wordmark asset
+ * down to a narrowed box, rather than using a real icon-only asset).
+ *
+ * ## When to use
+ * - Anywhere the BrandSync logo/icon needs to render: a navigation header, a nav drawer, etc.
+ *
+ * ## When not to use
+ * - The Genie AI chat panel's own brand mark -- that's a different logo (`bs-chatbot-header`'s
+ *   own inline Genie asset), not this one.
+ *
+ * `variant` mirrors Figma's "Logo" component set (node 10909:30421) `Device` property
+ * ("Desktop" / "Tab and mobile"), which was originally meant to distinguish the full lockup from
+ * the icon-only mark at different responsive breakpoints -- renamed here to
+ * `variant: 'full' | 'mark'` since that's what it actually controls (how much of the logo
+ * renders), not literally a device/breakpoint switch.
+ *
+ * `variant="custom"` is not a Figma variant at all -- it's an escape hatch for a consuming app
+ * that needs to show a DIFFERENT product's logo in the same slot (e.g. a white-labeled deployment,
+ * or a logo fetched at runtime from a service like brand.dev), via `src`/`alt`, instead of the
+ * built-in BrandSync assets. This component deliberately does NOT fetch that image itself --
+ * network calls, loading/error states, and caching are the consuming app's responsibility, same as
+ * every other component in this library (e.g. `bs-attachment` takes `imageSrc` rather than fetching
+ * an image on its own). `background` has no effect on `variant="custom"` -- a consumer's own image
+ * is already designed for whatever surface it's placed on.
+ *
+ * @part logo - The rendered SVG/image's wrapper.
+ */
+// Note: this component's CSS Custom Properties are documented via @prop comments in bs-logo.css,
+// not here -- see bs-navigation-header.css's identical note.
+export class BsLogo {
+    /** How much of the logo to render. `full` is the icon + "EG BrandSync" wordmark (190.977x44
+     * natural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a
+     * consumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class
+     * doc above. */
+    variant = 'full';
+    /**
+     * Which pre-built asset to use for `variant="full"` -- Figma ships a genuinely separate,
+     * differently-drawn dark-background asset (every wordmark path filled solid white, and the
+     * icon's outer shape a single solid-white path instead of the light version's two-path
+     * white-fill-plus-border-ring), not a CSS currentColor swap of identical paths.
+     *
+     * `"auto"` (default) renders both assets and lets CSS pick one via
+     * `--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in
+     * `src/global/base.css`, flipped by the same `[data-theme="dark"]` attribute every other
+     * `--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring
+     * needed, the same way a consuming app's own dark mode already re-themes every other part of
+     * this library via ordinary CSS custom property inheritance. Set `"light"`/`"dark"` explicitly
+     * to pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise
+     * dark-themed.
+     *
+     * Has no effect on `variant="mark"`: Figma's component set only has one real designed instance
+     * of the icon-only mark (`Device="Tab and mobile"`, `Background="Default"`) -- there's no
+     * separate dark version of it, so the mark renders identically regardless of this prop.
+     */
+    background = 'auto';
+    /** `variant="custom"` only: the image URL to render (e.g. a URL your app already fetched from a
+     * logo API). Ignored for `full`/`mark`. */
+    src = null;
+    /**
+     * `variant="custom"` only: accessible alt text for the image -- a product logo is meaningful
+     * content (whose brand is this?), not decorative, so set this to something real (e.g. the
+     * product/company name). Falls back to `alt=""` (marking the image decorative to assistive
+     * tech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no
+     * `alt` attribute at all is a harder accessibility failure than one explicitly marked
+     * decorative, but an empty fallback is still worse than a real name, so don't rely on it.
+     * Ignored for `full`/`mark` (those already carry their own fixed `aria-label="BrandSync"`).
+     */
+    alt = null;
+    render() {
+        if (this.variant === 'custom') {
+            return h("img", { part: "logo", class: "bs-logo bs-logo--custom", src: this.src ?? undefined, alt: this.alt ?? '' });
+        }
+        if (this.variant === 'mark') {
+            return h("div", { part: "logo", class: "bs-logo bs-logo--mark", role: "img", "aria-label": "BrandSync", innerHTML: BRANDSYNC_LOGO_MARK_SVG });
+        }
+        return (h("div", { part: "logo", class: `bs-logo bs-logo--full bs-logo--bg-${this.background}`, role: "img", "aria-label": "BrandSync" }, h("div", { class: "bs-logo__asset bs-logo__asset--light", innerHTML: BRANDSYNC_LOGO_FULL_LIGHT_SVG }), h("div", { class: "bs-logo__asset bs-logo__asset--dark", innerHTML: BRANDSYNC_LOGO_FULL_DARK_SVG })));
+    }
+    static get is() { return "bs-logo"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-logo.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-logo.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsLogoVariant",
+                    "resolved": "\"custom\" | \"full\" | \"mark\"",
+                    "references": {
+                        "BsLogoVariant": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-logo/bs-logo.tsx",
+                            "id": "src/components/bs-logo/bs-logo.tsx::BsLogoVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How much of the logo to render. `full` is the icon + \"EG BrandSync\" wordmark (190.977x44\nnatural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a\nconsumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class\ndoc above."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'full'"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsLogoBackground",
+                    "resolved": "\"auto\" | \"dark\" | \"light\"",
+                    "references": {
+                        "BsLogoBackground": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-logo/bs-logo.tsx",
+                            "id": "src/components/bs-logo/bs-logo.tsx::BsLogoBackground"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which pre-built asset to use for `variant=\"full\"` -- Figma ships a genuinely separate,\ndifferently-drawn dark-background asset (every wordmark path filled solid white, and the\nicon's outer shape a single solid-white path instead of the light version's two-path\nwhite-fill-plus-border-ring), not a CSS currentColor swap of identical paths.\n\n`\"auto\"` (default) renders both assets and lets CSS pick one via\n`--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in\n`src/global/base.css`, flipped by the same `[data-theme=\"dark\"]` attribute every other\n`--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring\nneeded, the same way a consuming app's own dark mode already re-themes every other part of\nthis library via ordinary CSS custom property inheritance. Set `\"light\"`/`\"dark\"` explicitly\nto pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise\ndark-themed.\n\nHas no effect on `variant=\"mark\"`: Figma's component set only has one real designed instance\nof the icon-only mark (`Device=\"Tab and mobile\"`, `Background=\"Default\"`) -- there's no\nseparate dark version of it, so the mark renders identically regardless of this prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background",
+                "defaultValue": "'auto'"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`variant=\"custom\"` only: the image URL to render (e.g. a URL your app already fetched from a\nlogo API). Ignored for `full`/`mark`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "null"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`variant=\"custom\"` only: accessible alt text for the image -- a product logo is meaningful\ncontent (whose brand is this?), not decorative, so set this to something real (e.g. the\nproduct/company name). Falls back to `alt=\"\"` (marking the image decorative to assistive\ntech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no\n`alt` attribute at all is a harder accessibility failure than one explicitly marked\ndecorative, but an empty fallback is still worse than a real name, so don't rely on it.\nIgnored for `full`/`mark` (those already carry their own fixed `aria-label=\"BrandSync\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "null"
+            }
+        };
+    }
+}

package/dist/collection/components/bs-logo/bs-logo.stories.js

@@ -0,0 +1,69 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const variants = ['full', 'mark', 'custom'];
+const backgrounds = ['auto', 'light', 'dark'];
+const meta = {
+    title: 'Components/bs-logo',
+    parameters: { docs: { description: { component: componentDescription('bs-logo') } } },
+    render: args => html `<bs-logo variant=${args.variant} background=${args.background} src=${args.src} alt=${args.alt}></bs-logo>`,
+    argTypes: {
+        variant: { control: 'select', options: variants, description: propDescription('bs-logo', 'variant') },
+        background: { control: 'select', options: backgrounds, description: propDescription('bs-logo', 'background') },
+        src: { control: 'text', description: propDescription('bs-logo', 'src') },
+        alt: { control: 'text', description: propDescription('bs-logo', 'alt') },
+    },
+    args: {
+        variant: 'full',
+        background: 'auto',
+        src: '',
+        alt: '',
+    },
+};
+export default meta;
+export const Full = {
+    name: 'Full (light)',
+};
+// `data-theme="dark"` is set on a wrapper scoped to just this story, NOT via a globals override on
+// the toolbar's Theme switch -- that switch's decorator (see .storybook/preview.ts) sets the
+// attribute on the shared document root, which breaks down on this component's Docs page (every
+// story renders together in one document there, so one story forcing a document-wide theme while
+// its siblings render under the *other* theme thrashes). A local wrapper gets the identical CSS
+// custom property cascade (tokens.css's dark block matches any `[data-theme="dark"]` element, not
+// specifically <html>) without touching shared state. background is left at its "auto" default
+// (via args below) so this demonstrates the logo following the ambient theme on its own, the same
+// way every other --bs-* token already does (see the CSS bridge in src/global/base.css).
+export const FullAutoDark = {
+    name: 'Full (auto, dark theme)',
+    render: args => html `
+    <div data-theme="dark" style="background: var(--bs-surface-base); padding: 24px; display: inline-flex;">
+      <bs-logo variant=${args.variant} background=${args.background}></bs-logo>
+    </div>
+  `,
+};
+// Pins the dark asset explicitly via background="dark", regardless of the page's own theme --
+// for a consumer that places this on a dark surface without setting [data-theme="dark"] itself.
+// Rendered on a manually dark canvas (not the global theme switch) to prove the override doesn't
+// depend on that switch at all.
+export const FullDark = {
+    name: 'Full (dark, explicit)',
+    args: { background: 'dark' },
+    render: args => html `
+    <div style="background: var(--bs-surface-inverse); padding: 24px; display: inline-flex;">
+      <bs-logo variant=${args.variant} background=${args.background}></bs-logo>
+    </div>
+  `,
+};
+export const Mark = {
+    name: 'Mark',
+    args: { variant: 'mark' },
+};
+// A consumer-supplied logo (e.g. fetched at runtime from a service like brand.dev) instead of the
+// built-in BrandSync assets -- this component only renders the image, it never fetches it itself.
+export const Custom = {
+    name: 'Custom (consumer-supplied image)',
+    args: {
+        variant: 'custom',
+        src: 'https://placehold.co/160x44/0062c1/white?text=Acme+Co',
+        alt: 'Acme Co',
+    },
+};