@repobit/dex-system-design 0.11.0 → 0.12.0

package/src/components/footer/footer.js

@@ -0,0 +1,465 @@
+import { LitElement, html } from 'lit';
+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 { tokens } from "../../tokens/tokens.js";
+import footerCSS from './footer.css.js';
+import { localeMap } from './localeMap.js';
+
+export class BdFooter extends LitElement {
+  static properties = {
+    _countriesOpen     : { state: true },
+    selectedCountry    : { state: true },
+    currentLocale      : { type: String },
+    maxColumnsPerRow   : { type: Number },
+    _isMobile          : { state: true },
+    _countriesContainer: { state: true }
+  };
+
+  constructor() {
+    super();
+    this._countriesOpen = false;
+    this.maxColumnsPerRow = 2;
+    this.currentLocale = 'en';
+    this.selectedCountry = 'Choose your country';
+    this._isMobile = window.innerWidth <= 768;
+    this._countriesContainer = null;
+    console.log('Constructor - isMobile:', this._isMobile, 'Window width:', window.innerWidth);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._initLocaleFromUrl();
+    window.addEventListener('resize', this._handleResize.bind(this));
+    console.log('Connected - isMobile:', this._isMobile);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('resize', this._handleResize.bind(this));
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this._updateNavLinks();
+    // Obține referința la containerul cu țări
+    // this._countriesContainer = this.shadowRoot.querySelector('.footer-countries-container');
+  }
+
+  updated(changedProps) {
+    if (changedProps.has('currentLocale')) {
+      this._updateNavLinks();
+    }
+
+    // Dacă s-a deschis lista de țări, fac scroll smooth către ea
+    if (changedProps.has('_countriesOpen') && this._countriesOpen) {
+    // Obține referința la containerul cu țări doar când este deschis
+      this._countriesContainer = this.shadowRoot.querySelector('.footer-countries-container');
+      this._scrollToCountries();
+    }
+  }
+
+  _scrollToCountries() {
+  // Obține referința la container doar atunci când este necesar
+    const container = this.shadowRoot.querySelector('.footer-countries-container');
+    if (container) {
+    // Așteaptă ca render-ul să se finalizeze
+      setTimeout(() => {
+        container.scrollIntoView({
+          behavior: 'smooth',
+          block   : 'start'
+        });
+      }, 100);
+    }
+  }
+
+  _scrollToTop() {
+    // Scroll smooth către începutul footer-ului
+    this.scrollIntoView({
+      behavior: 'smooth',
+      block   : 'start'
+    });
+  }
+
+  _handleResize() {
+    this._isMobile = window.innerWidth <= 768;
+    const newIsMobile = window.innerWidth <= 768;
+    console.log('Resize - Old isMobile:', this._isMobile, 'New isMobile:', newIsMobile, 'Window width:', window.innerWidth);
+
+    if (this._isMobile !== newIsMobile) {
+      this._isMobile = newIsMobile;
+      console.log('isMobile changed to:', this._isMobile);
+    }
+  }
+
+  _initLocaleFromUrl() {
+    const urlLocale = window.location.pathname.split('/')[1]?.toLowerCase();
+
+    if (!urlLocale) {
+      this._updateNavLinks();
+      return;
+    }
+
+    // Creează o versiune normalized a localeMap cu cheile lowercase
+    const normalizedLocaleMap = {};
+    Object.entries(localeMap).forEach(([key, value]) => {
+      normalizedLocaleMap[key.toLowerCase()] = value;
+    });
+
+    // Încearcă mai întâi potrivire exactă
+    let country = normalizedLocaleMap[urlLocale];
+
+    // Dacă nu găsești potrivire exactă, încearcă să găsești cea mai bună potrivire
+    if (!country && urlLocale) {
+      const localeParts = urlLocale.split('-');
+      const language = localeParts[0];
+      const region = localeParts[1];
+
+      // Caută o potrivire care să înceapă cu același limbaj
+      const possibleMatches = Object.entries(normalizedLocaleMap)
+        .filter(([key]) => key.startsWith(language));
+
+      if (possibleMatches.length > 0) {
+        // Preferă potrivirea cu aceeași regiune dacă există
+        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 (exactRegionMatch) {
+          country = exactRegionMatch[1];
+          // Recuperează cheia originală din localeMap
+          const originalKey = Object.keys(localeMap).find(k =>
+            k.toLowerCase() === exactRegionMatch[0]
+          );
+          this.currentLocale = originalKey || exactRegionMatch[0];
+        } else {
+          // Altfel, ia prima potrivire
+          country = possibleMatches[0][1];
+          const originalKey = Object.keys(localeMap).find(k =>
+            k.toLowerCase() === possibleMatches[0][0]
+          );
+          this.currentLocale = originalKey || possibleMatches[0][0];
+        }
+      }
+    }
+
+    // Setează valorile pentru țară și locale
+    if (country) {
+      this.selectedCountry = country;
+    }
+
+    if (this.currentLocale !== urlLocale) {
+      const originalKey = Object.keys(localeMap).find(k =>
+        k.toLowerCase() === urlLocale
+      );
+      this.currentLocale = originalKey || urlLocale;
+    }
+
+    // Actualizează linkurile de navigație
+    this._updateNavLinks();
+  }
+
+  _toggleCountries() {
+    this._countriesOpen = !this._countriesOpen;
+
+    // Dacă se închide dropdown-ul, fac scroll înapoi sus
+    if (!this._countriesOpen) {
+      this._scrollToTop();
+    }
+  }
+
+  _closeCountries() {
+    this._countriesOpen = false;
+
+    // Doar pentru desktop, facem scroll înapoi sus
+    if (!this._isMobile) {
+      this._scrollToTop();
+    }
+  }
+
+  _handleCountryClick(e, countryLabel, locale) {
+    e.preventDefault();
+    this._selectCountry(countryLabel);
+
+    // Redirect către pagina cu noul locale
+    const newPath = `/${locale.toLowerCase()}/`;
+    window.location.href = newPath;
+  }
+
+  _selectCountry(countryLabel) {
+    this.selectedCountry = countryLabel;
+    this._countriesOpen = false;
+
+    // Găsește locale-ul corespunzător pentru țara selectată
+    const localeEntry = Object.entries(localeMap).find(
+      ([, country]) => country === countryLabel
+    );
+
+    if (localeEntry) {
+      this.currentLocale = localeEntry[0];
+    }
+
+    this._updateNavLinks();
+    this._scrollToTop();
+  }
+
+  getCountriesList() {
+    return Object.entries(localeMap).map(([locale, country]) => ({
+      locale,
+      label: country
+    }));
+  }
+
+  renderQuickLinksSection(slotName) {
+    const assignedElements = this.shadowRoot?.querySelector(`slot[name="${slotName}"]`)?.assignedElements({ flatten: true }) || [];
+    if (assignedElements.length === 0) return null;
+
+    const maxCols = this.maxColumnsPerRow || 3;
+    const rows = Math.ceil(assignedElements.length / maxCols);
+
+    const groupedRows = Array.from({ length: rows }, (_, rowIndex) => {
+      const start = rowIndex * maxCols;
+      return assignedElements.slice(start, start + maxCols);
+    });
+
+    return html`
+      <div class="quick-links-section" style="display: flex; flex-direction: column; gap: 1rem;">
+        ${groupedRows.map(row => html`
+          <div style="display: grid; grid-template-columns: repeat(${row.length}, 1fr); gap: 1rem;">
+            ${row.map(el => html`${el}`)}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  get locale() {
+    const val = (this.currentLocale || 'en').toLowerCase();
+    return val;
+  }
+
+  _updateSlotStyles() {
+    const isMobile = window.innerWidth <= 768;
+    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');
+      } else {
+        element.style.color = '';
+        element.style.removeProperty('color');
+      }
+    });
+  }
+
+  _updateNavLinks() {
+    // Actualizează linkurile care sunt acum în shadow DOM
+    const links = this.shadowRoot.querySelectorAll('.footer-nav-main a');
+    const linkPaths = ['consumer', 'small-business', 'business', 'partners'];
+    const currentLocale = this.locale;
+
+    links.forEach((link, index) => {
+      if (index < linkPaths.length) {
+        link.href = `/${currentLocale}/${linkPaths[index]}/`;
+      }
+    });
+  }
+
+  render() {
+    const year = new Date().getFullYear();
+    const showAnpc = this.locale.startsWith('ro');
+    const showImpressum = this.locale === 'de-de' || this.locale === 'de';
+    const countriesList = this.getCountriesList();
+    console.log('Render - isMobile:', this._isMobile, 'Window width:', window.innerWidth);
+
+    const masterbrandUrl = this._isMobile
+      ? '/assets/Bitdefender-Masterbrand_mobile.png'
+      : '/assets/Bitdefender-Masterbrand.png';
+
+    const anpcUrl = this._isMobile
+      ? '/assets/anpc_mobile.png'
+      : '/assets/anpc.png';
+
+    const logoUrl = '/assets/BD_logo.png';
+    const facebookIcon = '/assets/facebook_vector.png';
+    const xIcon = '/assets/x_vector.png';
+    const linkedinIcon = '/assets/linkedin_vector.png';
+    const youtubeIcon = '/assets/youtube_vector.png';
+    const instagramIcon = '/assets/instagram_vector.png';
+    const tiktokIcon = '/assets/tiktok_vector.png';
+    const leadingIcon = '/assets/leading.png';
+    const closeIcon = '/assets/close_icon.png'; // Adaugă un icon pentru butonul de închidere
+
+    const chunkSize = Math.ceil(countriesList.length / 3);
+    const countryChunks = [
+      countriesList.slice(0, chunkSize),
+      countriesList.slice(chunkSize, chunkSize * 2),
+      countriesList.slice(chunkSize * 2)
+
+    ];
+
+    return html`
+    <div class="footer-top-bleed">
+      <div class="container">
+        <div class="footer-top">
+          <div class="footer-logo">
+            <slot name="logo">
+              <span><img src="${logoUrl}" alt="Bitdefender Logo"></span>
+            </slot>
+          </div>
+          <div class="footer-top-right">
+            <slot name="top-right">
+              <div slot="top-right">
+                <span slot="logo">
+                  <img src="${masterbrandUrl}" alt="Bitdefender Masterbrand">
+                </span>
+              </div>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="container">
+      <bd-footer-nav bold>
+        <div class="footer-nav-main">
+          <a href="/${this.locale}/consumer/">For Consumer</a>
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <a href="/${this.locale}/small-business/">For Small Business</a>
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <a href="/${this.locale}/business/">For Enterprise</a>
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <a href="/${this.locale}/partners/">For Partners</a>
+        </div>
+      </bd-footer-nav>
+
+      <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+
+      <div class="footer-links">
+        <div class="footer-links-left">
+          <bd-footer-links-group slot="quick-links" title="Quick links">
+            <a href="https://central.bitdefender.com/?adobe_mc=TS%3D1755696435%7CMCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg">Bitdefender Central</a>
+            <a href="https://gravityzone.bitdefender.com/?adobe_mc=TS%3D1755696435%7CMCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg">GravityZone Cloud Control Center</a>
+            <a href="https://www.bitdefender.com/en-us/cyberpedia/">Bitdefender Cyberpedia</a>
+            <a href="https://pan.bitdefender.com/partners/save/?adobe_mc=TS%3D1755696435%7CMCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg">Partner Advantage Network Portal</a>
+            <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/104804?adobe_mc=TS%3D1755696435%7CMCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg">Brand Portal</a>
+          </bd-footer-links-group>
+
+          <bd-footer-links-group slot="quick-links">
+            <a href="https://www.bitdefender.com/consumer/support/">Support for Home Products</a>
+            <a href="https://www.bitdefender.com/business/support/">Support for Business Products</a>
+            <a href="/${this.locale}/company/">Investors</a>
+            <a href="/${this.locale}/company/job-opportunities/">Careers</a>
+            <a href="/${this.locale}/business/infozone/">InfoZone</a>
+          </bd-footer-links-group>
+        </div>
+        
+       <div class="footer-links-right social-icons">
+  <a href="https://www.facebook.com/bitdefender"><img src="${facebookIcon}" alt="Facebook"></a>
+  <a href="https://twitter.com/bitdefender"><img src="${xIcon}" alt="X"></a>
+  <a href="https://www.linkedin.com/company/bitdefender"><img src="${linkedinIcon}" alt="LinkedIn"></a>
+  <a href="https://www.youtube.com/c/Bitdefender"><img src="${youtubeIcon}" alt="YouTube"></a>
+  <a href="https://www.instagram.com/bitdefender/"><img src="${instagramIcon}" alt="Instagram"></a>
+  <a href="https://www.tiktok.com/@bitdefender"><img src="${tiktokIcon}" alt="TikTok"></a>
+</div>
+      </div>
+
+      <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+
+      <div class="footer-middle-line">
+         <bd-footer-nav>
+        <div class="footer-nav-main">
+          <a href="legal/">Legal Information</a>
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <a href="site/view/legal-privacy-policy-for-bitdefender-websites/">Privacy Policy</a>
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <a href="sitemap/">Site Map</a>
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <a href="company/">Company</a>
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <a href="https://www.bitdefender.com/consumer/support/">Contact Us</a>
+          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+            <a href="#">Privacy Settings</a>
+          ${showImpressum
+            ? html`
+            <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+            <a href="#" class="impressum-link">Impressum</a>
+          `
+            : ''}
+        </div>
+      </bd-footer-nav>
+        <div class="footer-address">
+          <slot name="address">
+            <div slot="address">
+              111 W. Houston Street, Suite 2105, Frost Tower Building<br />
+              San Antonio, Texas 78205
+            </div>
+          </slot>
+        </div>
+      </div>
+
+      <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+
+      <div class="footer-extra">
+        <div class="footer-copy">Copyright © 1997 - ${year} Bitdefender</div>
+        ${showAnpc
+          ? html`
+          <div class="footer-anpc">
+            <slot name="anpc">
+              <div slot="anpc">
+                <img src="${anpcUrl}" alt="Certificat" />
+              </div>
+            </slot>
+          </div>
+        `
+          : null}
+        <div class="footer-countries-toggle">
+          <button class="country-toggle" @click="${this._toggleCountries}">
+            <img src="${leadingIcon}" alt="Leading icon">
+            ${this.selectedCountry}
+            <span class="arrow">
+              ${this._countriesOpen
+                ? html`<img src="/assets/arrow_up.png" alt="Arrow up">`
+                : html`<img src="/assets/arrow_down.png" alt="Arrow down">`}
+            </span>
+          </button>
+        </div>
+      </div>
+
+    ${this._countriesOpen
+      ? html`
+    <div class="footer-countries-container">
+      <button class="close-countries-button" @click="${this._closeCountries}">
+        <img src="${closeIcon}" alt="Close countries list">
+      </button>
+      ${countryChunks.map(chunk => html`
+        <bd-footer-links-group slot="countries" title="${chunk === countryChunks[0] ? 'Choose your country' : ''}">
+          ${chunk.map(c => html`
+            <a href="/${c.locale.toLowerCase()}/" 
+               data-locale="${c.locale}" 
+               class="${this.selectedCountry === c.label ? 'selected' : ''}" 
+               @click="${(e) => this._handleCountryClick(e, c.label, c.locale)}">
+              ${c.label}
+            </a>
+          `)}
+        </bd-footer-links-group>
+      `)}
+    </div>
+  `
+      : null}
+    </footer>
+  `;
+  }
+  static styles = [tokens, footerCSS];
+}
+
+customElements.define('bd-footer', BdFooter);

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

@@ -0,0 +1,60 @@
+// BdFooter.stories.js
+import { html } from 'lit';
+import './footer.js';
+
+export default {
+  title    : 'Components/Footer',
+  component: 'bd-footer',
+  argTypes : {
+    currentLocale   : { control: 'text' },
+    selectedCountry : { control: 'text' },
+    maxColumnsPerRow: { control: { type: 'number', min: 1, max: 4 } },
+    quickLinks1     : { control: 'object' },
+    quickLinks2     : { control: 'object' },
+    address         : { control: 'text' }
+  }
+};
+
+const Template = ({ currentLocale, selectedCountry, maxColumnsPerRow, quickLinks1, quickLinks2, address }) => {
+  return html`
+    <bd-footer
+      .currentLocale=${currentLocale}
+      .selectedCountry=${selectedCountry}
+      .maxColumnsPerRow=${maxColumnsPerRow}
+    >
+      <span slot="logo"><img src="/assets/BD_logo.png" alt="Bitdefender Logo"></span>
+
+      <bd-footer-links-group slot="quick-links" title="Quick Links 1">
+        ${quickLinks1.map(
+          link => html`<a href="${link.href}" target="_blank">${link.label}</a>`
+        )}
+      </bd-footer-links-group>
+
+      <bd-footer-links-group slot="quick-links" title="Quick Links 2">
+        ${quickLinks2.map(
+          link => html`<a href="${link.href}" target="_blank">${link.label}</a>`
+        )}
+      </bd-footer-links-group>
+
+      <div slot="address">${address}</div>
+    </bd-footer>
+  `;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  currentLocale   : 'en',
+  selectedCountry : 'Choose your country',
+  maxColumnsPerRow: 2,
+  quickLinks1     : [
+    { label: 'Bitdefender Central', href: 'https://central.bitdefender.com/' },
+    { label: 'GravityZone Cloud Control Center', href: 'https://gravityzone.bitdefender.com/' },
+    { label: 'Bitdefender Cyberpedia', href: 'https://www.bitdefender.com/en-us/cyberpedia/' }
+  ],
+  quickLinks2: [
+    { label: 'Support for Home Products', href: 'https://www.bitdefender.com/consumer/support/' },
+    { label: 'Support for Business Products', href: 'https://www.bitdefender.com/business/support/' },
+    { label: 'Careers', href: '/en/company/job-opportunities/' }
+  ],
+  address: '111 W. Houston Street, Suite 2105, Frost Tower Building<br/>San Antonio, Texas 78205'
+};

package/src/components/footer/localeMap.js

@@ -0,0 +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": "日本 - 日本語" };

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

@@ -0,0 +1,38 @@
+import { css } from "lit";
+
+export default css`
+ :host {
+      display: block;
+    }
+
+    .grid {
+      display: grid;
+      gap: var(--space-md);
+      align-items: stretch;
+      justify-items: start;
+    }
+
+    /* Default */
+    .grid {
+      grid-template-columns: repeat(var(--grid-cols), 1fr);
+    }
+
+    /* Responsive overrides */
+    @media (min-width: 576px) {
+      .grid {
+        grid-template-columns: repeat(var(--grid-cols-sm), 1fr);
+      }
+    }
+
+    @media (min-width: 768px) {
+      .grid {
+        grid-template-columns: repeat(var(--grid-cols-md), 1fr);
+      }
+    }
+
+    @media (min-width: 992px) {
+      .grid {
+        grid-template-columns: repeat(var(--grid-cols-lg), 1fr);
+      }
+    }
+`;

package/src/components/grid/grid.js

@@ -0,0 +1,55 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import gridCSS from "../grid/grid.css.js";
+
+class BdGrid extends LitElement {
+  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
+    gap    : { type: String },          // e.g., 'sm', 'md'
+    align  : { type: String },        // start, center, end, stretch
+    justify: { type: String },      // start, center, end, space-between
+    padding: { type: String } // e.g., 'none', 'sm', 'md', 'lg'
+
+  };
+
+  constructor() {
+    super();
+    this.cols = 1;
+    this.colsSm = 1;
+    this.colsMd = 2;
+    this.colsLg = 3;
+    this.gap = "md";
+    this.align = "stretch";
+    this.justify = "start";
+    this.padding = "none";
+
+  }
+
+
+  render() {
+    return html`
+      <div
+        class="grid"
+        style="
+          --grid-cols: ${this.cols};
+          --grid-cols-sm: ${this.colsSm};
+          --grid-cols-md: ${this.colsMd};
+          --grid-cols-lg: ${this.colsLg};
+          gap: var(--space-${this.gap});
+          align-items: ${this.align};
+          justify-items: ${this.justify};
+            padding: var(--space-${this.padding});
+
+        "
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+BdGrid.styles = [tokens, gridCSS];
+
+customElements.define("bd-grid", BdGrid);