@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/footer/footer.js

@@ -1,24 +1,54 @@
 import { LitElement, html } from 'lit';
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
+/* The md boundary comes from the shared breakpoint source so the CSS and the
+   JS cannot drift apart again: bd-footer switched at 767 while bd-footer-lp,
+   sharing footer-nav-menu.css.js, switched at 768 — so at exactly 768px the
+   LP footer rendered its mobile markup under the desktop stylesheet. */
+import { matchesBelow } from '../shared/token-scales.js';
 import '../../components/divider/divider-horizontal.js';
 import '../../components/divider/divider-vertical.js';
 import '../../components/footer/footer-links-group.js';
 import '../../components/footer/footer-nav-menu.js';
 import '../../components/grid/grid.js';
 import '../../components/link/link.js';
-import { tokens } from "../../tokens/tokens.js";
 import "../icons/arrow-down-icon.js";
 import "../icons/arrow-up-icon.js";
 import "../icons/close-icon.js";
 import "../icons/globe-icon.js";
 import footerCSS from './footer.css.js';
+import { ensembleCSS } from '../shared/ensemble.css.js';
 import { localeMap } from './localeMap.js';
 
+/* The locale a footer shows when neither the page nor the URL says otherwise. */
+const DEFAULT_LOCALE = 'en';
+
 export class BdFooter extends LitElement {
   static properties = {
     _countriesOpen     : { state: true },
     selectedCountry    : { state: true },
-    currentLocale      : { type: String },
-    maxColumnsPerRow   : { type: Number },
+    /* `current-locale` and `max-columns-per-row`, both documented dash-cased
+       and both previously inert for the same reason as bd-header above: Lit
+       lowercases a property name to get its observed attribute, so these were
+       listening for `currentlocale` and `maxcolumnsperrow`.
+
+       current-locale is the consequential one, and it did not merely fail --
+       it failed into nonsense. The attribute was ignored, so the locale fell
+       through to URL detection, and under Storybook the path is /iframe.html:
+       measured on Components/Footer Default, Romanian Locale and German
+       Locale, all three reported currentLocale "iframe.html" while their
+       markup asked for "en", "ro" and "de". Twelve usages in footer.stories.js
+       write it, including the documented usage example.
+
+       max-columns-per-row has a single usage, in the playground, and it passes
+       2 -- which is already the default -- so repairing it changes no rendered
+       output today. It is fixed with the other one because it is the same
+       defect in the same declaration block, not because it was visible.
+
+       Zero consumers of either working lowercase spelling across src, schemas
+       and docs, and no property bindings, so naming the attributes is safe. */
+    currentLocale      : { type: String, attribute: "current-locale" },
+    maxColumnsPerRow   : { type: Number, attribute: "max-columns-per-row" },
     _isMobile          : { state: true },
     _countriesContainer: { state: true }
   };
@@ -27,14 +57,21 @@ export class BdFooter extends LitElement {
     super();
     this._countriesOpen = false;
     this.maxColumnsPerRow = 2;
-    this.currentLocale = 'en';
+    this.currentLocale = DEFAULT_LOCALE;
     this.selectedCountry = 'Choose your country';
-    this._isMobile = window.innerWidth <= 767;
+    this._isMobile = matchesBelow('md');
     this._countriesContainer = null;
   }
 
   connectedCallback() {
     super.connectedCallback();
+    /* Whether the consuming page asked for a locale, captured before inference
+       runs. An attribute in the markup counts, and so does a property assigned
+       before the element connects -- both are the page stating its intent. A
+       page that explicitly asks for 'en' is indistinguishable from one that
+       said nothing, and that costs nothing: it asked for the value it gets. */
+    this._localeExplicit =
+      this.hasAttribute('current-locale') || this.currentLocale !== DEFAULT_LOCALE;
     this._initLocaleFromUrl();
     window.addEventListener('resize', this._handleResize.bind(this));
   }
@@ -46,12 +83,10 @@ export class BdFooter extends LitElement {
 
   firstUpdated() {
     super.firstUpdated();
-    this._updateNavLinks();
   }
 
   updated(changedProps) {
     if (changedProps.has('currentLocale')) {
-      this._updateNavLinks();
       this._toggleImpressumVisibility();
     }
 
@@ -61,6 +96,30 @@ export class BdFooter extends LitElement {
     }
   }
 
+  /* maxColumnsPerRow, finally read. The property has been declared here with
+     a default of 2 since it was written, the manifest claims it, and
+     footer.stories.js documents it as "Max columns per row in the quick-links
+     grid" -- and nothing ever looked at it. P7H.1 made the attribute reach the
+     property; this makes the property reach the layout.
+
+     It drives the grid the documentation names, through the cols-* attributes
+     bd-grid observes since P7H. Mobile and sm stay at one column because the
+     footer stacks there regardless of the cap, and md is capped at 2 because
+     that is what md has always shown -- the property raises the ceiling at the
+     widest breakpoint rather than redesigning the ladder.
+
+     The default therefore renders exactly what it rendered before:
+     min(2, 2) = 2 at md and 2 at lg, which is the pair that was hard-coded.
+     Verified by measurement, not by reading.
+
+     Clamped because the attribute is public: a 0, a negative or a fractional
+     value would otherwise reach grid-template-columns as
+     `repeat(0, 1fr)`. */
+  get _maxColumns() {
+    const n = Math.floor(Number(this.maxColumnsPerRow));
+    return Number.isFinite(n) && n >= 1 ? n : 2;
+  }
+
   _toggleImpressumVisibility() {
     const showImpressum = this.locale === 'de-de' || this.locale === 'de';
     const slot = this.shadowRoot.querySelector('slot[name="secondary-nav"]');
@@ -101,75 +160,80 @@ export class BdFooter extends LitElement {
   }
 
   _handleResize() {
-    this._isMobile = window.innerWidth <= 767;
-    const newIsMobile = window.innerWidth <= 767;
+    this._isMobile = matchesBelow('md');
+    const newIsMobile = matchesBelow('md');
 
     if (this._isMobile !== newIsMobile) {
       this._isMobile = newIsMobile;
     }
   }
 
+  /* Locale precedence, and it is a precedence rather than a sequence of
+     assignments -- which is what went wrong.
+
+     1. the country selector, when a reader picks one (see _selectCountry)
+     2. an explicit current-locale attribute or currentLocale property
+     3. a locale inferred from the first path segment, IF it resolves to a
+        supported locale
+     4. DEFAULT_LOCALE
+
+     Two defects sat in the old version, both in its closing lines. It ended
+     with an unconditional `this.currentLocale = originalKey || urlLocale`,
+     so:
+
+     - an explicit input was silently overwritten by the environment. Measured:
+       <bd-footer current-locale="ro"> served from /de/ reported "de".
+     - any first path segment became the locale verbatim, supported or not.
+       Measured: /iframe.html reported currentLocale "iframe.html", and /zz-zz/
+       reported "zz-zz".
+
+     The second is why Storybook showed "iframe.html" as a locale, and the fix
+     is not a Storybook exception -- there is none here. A segment that does
+     not resolve against localeMap is simply not a locale, on any host. The
+     resolution itself (exact key, then language with a matching region, then
+     any key sharing the language) is unchanged; only its authority is. */
   _initLocaleFromUrl() {
-    const urlLocale = window.location.pathname.split('/')[1]?.toLowerCase();
+    if (this._localeExplicit) return;
 
-    if (!urlLocale) {
-      this._updateNavLinks();
-      return;
-    }
+    const urlLocale = window.location.pathname.split('/')[1]?.toLowerCase();
+    if (!urlLocale) return;
 
-    const normalizedLocaleMap = {};
+    const normalized = {};
     Object.entries(localeMap).forEach(([key, value]) => {
-      normalizedLocaleMap[key.toLowerCase()] = value;
+      normalized[key.toLowerCase()] = value;
     });
-
-    let country = normalizedLocaleMap[urlLocale];
-
-    if (!country && urlLocale) {
-      const localeParts = urlLocale.split('-');
-      const language = localeParts[0];
-      const region = localeParts[1];
-
-      const possibleMatches = Object.entries(normalizedLocaleMap)
+    const originalKeyFor = lower =>
+      Object.keys(localeMap).find(k => k.toLowerCase() === lower);
+
+    let resolvedKey = null;
+    let country = null;
+
+    if (normalized[urlLocale]) {
+      resolvedKey = originalKeyFor(urlLocale) || urlLocale;
+      country = normalized[urlLocale];
+    } else {
+      const [language, region] = urlLocale.split('-');
+      const sameLanguage = Object.entries(normalized)
         .filter(([key]) => key.startsWith(language));
 
-      if (possibleMatches.length > 0) {
-        const exactRegionMatch = possibleMatches.find(([key]) => {
-          const keyParts = key.split('-');
-          const keyRegion = keyParts[1];
-          const regionMatch = region && keyRegion === region;
-          const languageOnlyMatch = !region && keyParts.length === 1;
-
-          return regionMatch || languageOnlyMatch;
+      if (sameLanguage.length) {
+        const exactRegion = sameLanguage.find(([key]) => {
+          const keyRegion = key.split('-')[1];
+          return (region && keyRegion === region) || (!region && !keyRegion);
         });
-
-        if (exactRegionMatch) {
-          country = exactRegionMatch[1];
-          const originalKey = Object.keys(localeMap).find(k =>
-            k.toLowerCase() === exactRegionMatch[0]
-          );
-          this.currentLocale = originalKey || exactRegionMatch[0];
-        } else {
-          country = possibleMatches[0][1];
-          const originalKey = Object.keys(localeMap).find(k =>
-            k.toLowerCase() === possibleMatches[0][0]
-          );
-          this.currentLocale = originalKey || possibleMatches[0][0];
-        }
+        const [matchKey, matchCountry] = exactRegion || sameLanguage[0];
+        resolvedKey = originalKeyFor(matchKey) || matchKey;
+        country = matchCountry;
       }
     }
 
-    if (country) {
-      this.selectedCountry = country;
-    }
-
-    if (this.currentLocale !== urlLocale) {
-      const originalKey = Object.keys(localeMap).find(k =>
-        k.toLowerCase() === urlLocale
-      );
-      this.currentLocale = originalKey || urlLocale;
-    }
+    /* Nothing resolved: the segment is not a locale, so neither the locale nor
+       the country is touched. This is the line that used to assign the raw
+       path segment. */
+    if (!resolvedKey) return;
 
-    this._updateNavLinks();
+    this.currentLocale = resolvedKey;
+    this.selectedCountry = country;
   }
 
   _toggleCountries() {
@@ -208,7 +272,6 @@ export class BdFooter extends LitElement {
       this.currentLocale = localeEntry[0];
     }
 
-    this._updateNavLinks();
     this._scrollToTop();
   }
 
@@ -225,14 +288,14 @@ export class BdFooter extends LitElement {
   }
 
   _updateSlotStyles() {
-    const isMobile = window.innerWidth <= 767;
+    const isMobile = matchesBelow('md');
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
     const assignedElements = slot.assignedElements();
 
     assignedElements.forEach(element => {
       if (isMobile) {
-        element.style.color = '#151719';
-        element.style.setProperty('color', '#151719', 'important');
+        element.style.color = 'var(--color-neutral-900)';
+        element.style.setProperty('color', 'var(--color-neutral-900)', 'important');
       } else {
         element.style.color = '';
         element.style.removeProperty('color');
@@ -240,21 +303,19 @@ export class BdFooter extends LitElement {
     });
   }
 
-  _updateNavLinks() {
-    // Fixed: the wrapping div in render() below is class
-    // "footer-nav-main-container", not "footer-nav-main" — the old
-    // selector never matched anything, so link hrefs were never updated
-    // when the locale changed.
-    const links = this.shadowRoot.querySelectorAll('.footer-nav-main-container bd-link');
-    const linkPaths = ['consumer', 'small-business', 'business', 'partners'];
-    const currentLocale = this.locale;
-
-    links.forEach((link, index) => {
-      if (index < linkPaths.length) {
-        link.href = `/${currentLocale}/${linkPaths[index]}/`;
-      }
-    });
-  }
+  /* No _updateNavLinks. It queried '.footer-nav-main bd-link' inside this
+     shadow root and wrote a locale into the href of everything it found, and it
+     could never find anything: .footer-nav-main is rendered by bd-footer-nav
+     into bd-footer-nav's own shadow root, and this template has only
+     .footer-nav-main-container, the box its slot sits in. Measured 0 matches
+     across the 22 built footer stories.
+
+     So the four locale-aware nav hrefs it promised -- consumer,
+     small-business, business, partners -- were never written, and no story
+     depended on them. Localising slotted navigation is real work with a real
+     API question (whose hrefs are they, and does a component rewrite markup it
+     does not own); it is not this, and leaving this here made it look
+     answered. */
 
   render() {
     const year = new Date().getFullYear();
@@ -292,7 +353,7 @@ export class BdFooter extends LitElement {
 
     return html`
   <div class="footer-top-bleed">
-    <div class="container">
+    <div class="bd-ensemble container">
       <div class="footer-top">
         <div class="footer-logo">
           <slot name="logo">
@@ -312,19 +373,19 @@ export class BdFooter extends LitElement {
     </div>
   </div>
 
-  <footer class="container">
+  <footer class="bd-ensemble container">
     <div class="footer-nav-main-container">
       <slot name="nav"></slot>
     </div>
-    <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+    <bd-divider-horizontal width="100%" color="inverse" opacity="0.25"></bd-divider-horizontal>
 
     <div class="footer-links">
       <div class="footer-links-left">
-        <bd-grid 
-          cols="1" 
-          cols-sm="1" 
-          cols-md="2" 
-          cols-lg="2" 
+        <bd-grid
+          cols="1"
+          cols-sm="1"
+          cols-md="${Math.min(2, this._maxColumns)}"
+          cols-lg="${this._maxColumns}"
           gap="lg"
           align="start"
           justify="start"
@@ -333,32 +394,32 @@ export class BdFooter extends LitElement {
           <slot name="quick-links"></slot>
         </bd-grid>
       </div>
-      <bd-divider-horizontal class="tablet-divider" width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+      <bd-divider-horizontal class="tablet-divider" width="100%" color="inverse" opacity="0.25"></bd-divider-horizontal>
       ${this._isMobile
-        ? html`<bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>`
+        ? html`<bd-divider-horizontal width="100%" color="inverse" opacity="0.25"></bd-divider-horizontal>`
         : ''}
-      
+
       <div class="footer-links-right social-icons">
         <slot name="social-links">
-          <bd-link href="https://www.facebook.com/bitdefender" target="_blank" kind="secondary" class="bd-facebook">Facebook</bd-link>
-          <bd-link href="https://twitter.com/bitdefender" target="_blank" kind="secondary" class="bd-twitter">Twitter</bd-link>
-          <bd-link href="https://www.linkedin.com/company/bitdefender" target="_blank" kind="secondary" class="bd-linkedin">LinkedIn</bd-link>
-          <bd-link href="https://www.youtube.com/c/Bitdefender" target="_blank" kind="secondary" class="bd-youtube">YouTube</bd-link>
-          <bd-link href="https://www.instagram.com/bitdefender/" target="_blank" kind="secondary" class="bd-instagram">Instagram</bd-link>
-          <bd-link href="https://www.tiktok.com/@bitdefender" target="_blank" kind="secondary" class="bd-tiktok">TikTok</bd-link>
+          <bd-link href="https://www.facebook.com/bitdefender" target="_blank" variant="secondary" class="bd-facebook">Facebook</bd-link>
+          <bd-link href="https://twitter.com/bitdefender" target="_blank" variant="secondary" class="bd-twitter">Twitter</bd-link>
+          <bd-link href="https://www.linkedin.com/company/bitdefender" target="_blank" variant="secondary" class="bd-linkedin">LinkedIn</bd-link>
+          <bd-link href="https://www.youtube.com/c/Bitdefender" target="_blank" variant="secondary" class="bd-youtube">YouTube</bd-link>
+          <bd-link href="https://www.instagram.com/bitdefender/" target="_blank" variant="secondary" class="bd-instagram">Instagram</bd-link>
+          <bd-link href="https://www.tiktok.com/@bitdefender" target="_blank" variant="secondary" class="bd-tiktok">TikTok</bd-link>
         </slot>
       </div>
     </div>
 
     ${!this._isMobile
-      ? html`<bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>`
+      ? html`<bd-divider-horizontal width="100%" color="inverse" opacity="0.25"></bd-divider-horizontal>`
       : ''}
 
     <div class="footer-middle-line">
       <div class="secondary-nav-container">
         <slot name="secondary-nav"></slot>
         ${this._isMobile
-          ? html`<bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>`
+          ? html`<bd-divider-horizontal width="100%" color="inverse" opacity="0.25"></bd-divider-horizontal>`
           : ''}
       </div>
       <div class="footer-address">
@@ -371,7 +432,7 @@ export class BdFooter extends LitElement {
       </div>
     </div>
 
-    <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+    <bd-divider-horizontal width="100%" color="inverse" opacity="0.25"></bd-divider-horizontal>
 
     <div class="footer-extra">
       <div class="footer-copy">
@@ -379,7 +440,7 @@ export class BdFooter extends LitElement {
           Copyright © 1997 - ${year} Bitdefender
         </slot>
       </div>
-      
+
       ${showAnpc
         ? html`
           <div class="footer-anpc">
@@ -389,7 +450,7 @@ export class BdFooter extends LitElement {
           </div>
         `
         : null}
-        
+
       <div class="footer-countries-toggle">
         <button class="country-toggle" @click="${this._toggleCountries}">
           <bd-globe-icon size="20" color="white"></bd-globe-icon>
@@ -405,17 +466,26 @@ export class BdFooter extends LitElement {
     ${this._countriesOpen
       ? html`
         <div class="footer-countries-container">
-          <button class="close-countries-button" @click="${this._closeCountries}">
+          <!-- The icon is the only content and bd-close-icon's svg is aria-hidden,
+               so without a label this button had no accessible name at all: a
+               screen reader announced "button" and nothing else. WCAG 2.2 SC
+               4.1.2. The name goes on the control, never on the icon -- naming
+               both makes it announce twice. -->
+          <button
+            class="close-countries-button"
+            aria-label="Close country list"
+            @click="${this._closeCountries}"
+          >
             <bd-close-icon size="18" color="white"></bd-close-icon>
           </button>
           ${countryChunks.map(chunk => html`
             <bd-footer-links-group slot="countries" title="${chunk === countryChunks[0] ? 'Choose your country' : ''}">
               ${chunk.map(c => html`
-                <bd-link 
-                  href="/${c.locale.toLowerCase()}/" 
-                  data-locale="${c.locale}" 
-                  kind="light"
-                  class="${this.selectedCountry === c.label ? 'selected' : ''}" 
+                <bd-link
+                  href="/${c.locale.toLowerCase()}/"
+                  data-locale="${c.locale}"
+                  variant="light"
+                  class="${this.selectedCountry === c.label ? 'selected' : ''}"
                   @click="${(e) => this._handleCountryClick(e, c.label, c.locale)}">
                   ${c.label}
                 </bd-link>
@@ -429,7 +499,7 @@ export class BdFooter extends LitElement {
 `;
   }
 
-  static styles = [tokens, footerCSS];
+  static styles = [ensembleCSS, footerCSS];
 }
 
 customElements.define('bd-footer', BdFooter);

package/src/components/footer/footer.stories.js

@@ -69,14 +69,14 @@ export default {
 
 const quickLinks = html`
   <bd-footer-links-group slot="quick-links" title="Products">
-    <bd-link href="/antivirus" kind="light">Antivirus</bd-link>
-    <bd-link href="/total-security" kind="light">Total Security</bd-link>
-    <bd-link href="/vpn" kind="light">VPN</bd-link>
+    <bd-link href="/antivirus" variant="light">Antivirus</bd-link>
+    <bd-link href="/total-security" variant="light">Total Security</bd-link>
+    <bd-link href="/vpn" variant="light">VPN</bd-link>
   </bd-footer-links-group>
   <bd-footer-links-group slot="quick-links" title="Support">
-    <bd-link href="/support" kind="light">Help Center</bd-link>
-    <bd-link href="/contact" kind="light">Contact Us</bd-link>
-    <bd-link href="/community" kind="light">Community</bd-link>
+    <bd-link href="/support" variant="light">Help Center</bd-link>
+    <bd-link href="/contact" variant="light">Contact Us</bd-link>
+    <bd-link href="/community" variant="light">Community</bd-link>
   </bd-footer-links-group>
 `;
 
@@ -108,11 +108,11 @@ export const GermanLocale = {
     <bd-footer current-locale="de">
       ${quickLinks}
       <div slot="secondary-nav">
-        <bd-link href="/privacy" kind="secondary">Privacy Policy</bd-link>
+        <bd-link href="/privacy" variant="secondary">Privacy Policy</bd-link>
         <bd-divider-vertical></bd-divider-vertical>
-        <bd-link href="/terms" kind="secondary">Terms</bd-link>
+        <bd-link href="/terms" variant="secondary">Terms</bd-link>
         <bd-divider-vertical class="impressum-link"></bd-divider-vertical>
-        <bd-link href="/impressum" kind="secondary" class="impressum-link">Impressum</bd-link>
+        <bd-link href="/impressum" variant="secondary" class="impressum-link">Impressum</bd-link>
       </div>
     </bd-footer>
   `,

package/src/components/footer/localeMap.js

@@ -1 +1 @@
-export const localeMap = { "en-AU": "Australia - English", "nl-BE": "België - Nederlands", "fr-BE": "Belgique - Français", "en-BZ": "Belize - English", "pt-BR": "Brasil - Português", "en-BG": "Bulgaria - English", "en-CA": "Canada - English", "es-CL": "Chile - Español", "es-CO": "Colombia - Español", "en-CZ": "Czechia - English", "en-DK": "Denmark - English", "de-DE": "Deutschland - Deutsch", "es-ES": "España - Español", "fr-FR": "France - Français", "zh-HK": "Hong Kong - China", "hu-HU": "Hungary - Magyar", "en-IN": "India - English", "en-ID": "Indonesia - English", "en-IL": "Israel - English", "it-IT": "Italia - Italiano", "en-JM": "Jamaica - English", "en-LV": "Latvia - English", "en-MY": "Malaysia - English", "en-MT": "Malta - English", "es-MX": "México - Español", "nl-NL": "Nederland - Nederlands", "en-NZ": "New Zealand - English", "en-NO": "Norway - English", "de-AT": "Österreich - Deutsch", "es-PE": "Perú - Español", "en-PH": "Philippines - English", "en-PL": "Poland - English", "pt-PT": "Portugal - Português", "ro-RO": "România - Română", "en-SA": "Saudi Arabia - English", "de-CH": "Schweiz - Deutsch", "en-SG": "Singapore - English", "en-ZA": "South Africa - English", "en-KR": "South Korea - English", "sv-SE": "Sverige - Svenska", "zh-TW": "Taiwan - 台灣", "en-TH": "Thailand - English", "en-AE": "United Arab Emirates - English", "en-GB": "United Kingdom - English", "en-US": "United States - English", "ja-JP": "日本 - 日本語" };
+export const localeMap = { "en-AU": "Australia - English", "nl-BE": "België - Nederlands", "fr-BE": "Belgique - Français", "en-BZ": "Belize - English", "pt-BR": "Brasil - Português", "en-BG": "Bulgaria - English", "en-CA": "Canada - English", "es-CL": "Chile - Español", "es-CO": "Colombia - Español", "en-CZ": "Czechia - English", "en-DK": "Denmark - English", "de-DE": "Deutschland - Deutsch", "es-ES": "España - Español", "fr-FR": "France - Français", "zh-HK": "Hong Kong - China", "en-HU": "Hungary - English", "en-IN": "India - English", "en-ID": "Indonesia - English", "en-IL": "Israel - English", "it-IT": "Italia - Italiano", "en-JM": "Jamaica - English", "en-LV": "Latvia - English", "en-MY": "Malaysia - English", "en-MT": "Malta - English", "es-MX": "México - Español", "nl-NL": "Nederland - Nederlands", "en-NZ": "New Zealand - English", "en-NO": "Norway - English", "de-AT": "Österreich - Deutsch", "es-PE": "Perú - Español", "en-PH": "Philippines - English", "en-PL": "Poland - English", "pt-PT": "Portugal - Português", "ro-RO": "România - Română", "en-SA": "Saudi Arabia - English", "de-CH": "Schweiz - Deutsch", "en-SG": "Singapore - English", "en-ZA": "South Africa - English", "en-KR": "South Korea - English", "sv-SE": "Sverige - Svenska", "zh-TW": "Taiwan - 台灣", "en-TH": "Thailand - English", "en-AE": "United Arab Emirates - English", "en-GB": "United Kingdom - English", "en-US": "United States - English", "ja-JP": "日本 - 日本語" };

package/src/components/grid/grid.css.js

@@ -7,7 +7,7 @@ export default css`
 
     .grid {
       display: grid;
-      gap: var(--space-md);
+      gap: var(--spacing-24);
       align-items: stretch;
       justify-items: start;
     }

package/src/components/grid/grid.js

@@ -1,13 +1,55 @@
 import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import gridCSS from "../grid/grid.css.js";
+import { space } from "../shared/token-scales.js";
 
 class BdGrid extends LitElement {
+  /* The three responsive properties name their attribute, and that is the
+     whole fix. Lit derives an observed attribute by LOWERCASING the property
+     name -- not by dash-casing it -- so `colsSm` observed `colssm` and the
+     `cols-sm` this component documents was not an attribute it had ever been
+     listening for. observedAttributes read
+     ["cols","colssm","colsmd","colslg","gap","align","justify","padding"];
+     `cols` worked because it is one word, which is why the failure looked like
+     a responsive bug rather than a naming one.
+
+     So every dash-cased column attribute in the package was inert and the
+     properties kept their constructor defaults 1/1/2/3. Those defaults sit one
+     step under the 2/3/4 the Responsive columns story asks for, which is why
+     the rendered grid looked merely one breakpoint late instead of ignoring
+     the markup entirely. Measured across five stories x six viewports, 25 of
+     66 readings rendered a column count nobody had asked for:
+
+       Layout/Grid "Single column"   cols-lg="1"  ->  3 columns at 992 and 1440
+       Layout/Grid "Gap scale"       cols-sm="3"  ->  1 column  at 576-767
+       Layout/Grid "Alignment"       cols-sm="3"  ->  1 column  at 576-767
+       bd-footer quick links         cols-lg="2"  ->  3 columns at 992 and 1440
+
+     The last one is not a story: footer.js writes cols-md/cols-lg in its own
+     shadow root, so a shipped component's layout was running on the defaults
+     too.
+
+     Naming the attribute is what this package already does everywhere else --
+     94 explicit dash-cased mappings across 40 files, `heading-level`,
+     `visual-level`, `max-columns`, `min-card-width` -- and it is what the
+     component's own documentation promises: grid.stories.js reads "`cols`
+     below 576, then `cols-sm`, `cols-md` at 768 and `cols-lg` at 992", and its
+     argTypes map colsSm to the control name "cols-sm". The code was the only
+     part that disagreed.
+
+     An explicit name replaces the lowercase one rather than adding to it, so
+     `colssm` stops being observed. Nothing reads it: grepped for colssm,
+     colsmd, colslg and fallbacksrc across src, schemas and docs -- zero
+     occurrences outside these declarations. The responsive behaviour itself is
+     untouched; the media queries in grid.css.js and the 576/768/992 steps are
+     the ones that were already there, and this adds no smartness to a layout
+     primitive -- it only lets the primitive hear what it is told. */
   static properties = {
     cols   : { type: Number },         // default cols
-    colsSm : { type: Number },       // optional cols on small screens
-    colsMd : { type: Number },       // optional cols on medium
-    colsLg : { type: Number },       // optional cols on large
+    colsSm : { type: Number, attribute: "cols-sm" },  // optional cols on small screens
+    colsMd : { type: Number, attribute: "cols-md" },  // optional cols on medium
+    colsLg : { type: Number, attribute: "cols-lg" },  // optional cols on large
     gap    : { type: String },          // e.g., 'sm', 'md'
     align  : { type: String },        // start, center, end, stretch
     justify: { type: String },      // start, center, end, space-between
@@ -38,10 +80,10 @@ class BdGrid extends LitElement {
           --grid-cols-sm: ${this.colsSm};
           --grid-cols-md: ${this.colsMd};
           --grid-cols-lg: ${this.colsLg};
-          gap: var(--space-${this.gap});
+          gap: ${space(this.gap)};
           align-items: ${this.align};
           justify-items: ${this.justify};
-            padding: var(--space-${this.padding});
+          padding: ${space(this.padding)};
 
         "
       >
@@ -50,6 +92,6 @@ class BdGrid extends LitElement {
     `;
   }
 }
-BdGrid.styles = [tokens, gridCSS];
+BdGrid.styles = [gridCSS];
 
 customElements.define("bd-grid", BdGrid);