@repobit/dex-system-design 0.23.70 → 0.23.72

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.72](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.71...@repobit/dex-system-design@0.23.72) (2026-07-08)
+
+### Bug Fixes
+
+* **DEX-1014:** tabs component family
+* **DEX-1014:** tabs component family
+
+
+## [0.23.71](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.70...@repobit/dex-system-design@0.23.71) (2026-07-07)
+
+### Bug Fixes
+
+* **DEX-1014:** card adjustments css
+* **DEX-1014:** card adjustments css
+
+
 ## [0.23.70](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.69...@repobit/dex-system-design@0.23.70) (2026-07-07)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.70",
+  "version": "0.23.72",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -52,6 +52,8 @@
     "./pricing-cards": "./src/components/pricing-cards/pricing-card.js",
     "./radio": "./src/components/radio/radio.js",
     "./tabs": "./src/components/tabs/tabs.js",
+    "./tabsComponent": "./src/components/tabsComponent/tabsComponent.js",
+    "./tabsComponentFamily": "./src/components/tabsComponentFamily/tabsComponentFamily.js",
     "./terms": "./src/components/termsOfUse/terms.js"
   },
   "publishConfig": {
@@ -72,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.66",
-    "@repobit/dex-store-elements": "1.4.58",
+    "@repobit/dex-store": "1.3.68",
+    "@repobit/dex-store-elements": "1.4.60",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -90,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "345b65276e5c71e0106f563d644b713645b98221"
+  "gitHead": "7f992fcac9ee0c02c66190d68b6713b10b7589a8"
 }

package/src/components/cards/card.css.js

@@ -5,8 +5,6 @@ export default css`
     display: block;
     --background-card-grey: var(--color-neutral-25);
     --border-card-grey: var(--color-neutral-50);
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
     max-width: 1290px;
     margin: 0 auto;
   }

package/src/components/cards/card.js

@@ -187,15 +187,29 @@ class CardItem extends LitElement {
       clone.style.height    = "auto";
       clone.style.objectFit = "contain";
       clone.style.display   = "block";
+
+      // Aplica si pe img din interior (ex: picture > img)
+      const innerImg = clone.querySelector("img");
+      if (innerImg) {
+        innerImg.style.maxWidth  = "120px";
+        innerImg.style.maxHeight = "120px";
+        innerImg.style.width     = "auto";
+        innerImg.style.height    = "auto";
+        innerImg.style.objectFit = "contain";
+        innerImg.style.display   = "block";
+        innerImg.removeAttribute("width");
+        innerImg.removeAttribute("height");
+      }
+
       return clone;
     }
 
     if (this.icon) {
       return html`<img
-        src="${this.icon}"
-        alt="icon"
-        class="bd-light-icon-s"
-      />`;
+      src="${this.icon}"
+      alt="icon"
+      class="bd-light-icon-s"
+    />`;
     }
 
     return "";

package/src/components/tabsComponentFamily/tabsComponentFamily.css.js

@@ -0,0 +1,181 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    --bd-accessibility-focus: var(--color-blue-500);
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+    font-size: 100%;
+    padding-top: var(--spacing-64);
+    padding-bottom: var(--spacing-64);
+  }
+
+  bd-highlight {
+    max-width: 660px;
+    padding-top: var(--spacing-32);
+  }
+
+  .bd-tabs-component {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 990px;
+    margin-inline: auto;
+    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+  }
+
+  .bd-tabs-subtitle {
+    font-size: var(--typography-body-regular-fontSize);
+    max-width: 560px;
+    text-align: center;
+    margin-top: var(--spacing-32);
+    margin-bottom: var(--spacing-32);
+  }
+
+  .bd-tabs-container {
+    display: inline-flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    border-bottom: 1px solid var(--color-neutral-100);
+    width: 100%;
+    margin-bottom: var(--spacing-32);
+  }
+
+  .bd-tab-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    background: none;
+    border: none;
+    padding: var(--spacing-10) var(--spacing-32);
+    cursor: pointer;
+    color: var(--color-blue-500);
+    position: relative;
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-body-large-fontSize);
+    font-weight: var(--typography-fontWeight-semibold);
+    transition: color var(--transition-duration-fast, 150ms) ease;
+  }
+
+  .bd-tab-button::after {
+    content: "";
+    height: 3px;
+    background: var(--color-blue-500);
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 0;
+    transition: width var(--transition-duration-slow, 300ms) ease;
+  }
+
+  .bd-tab-button.bd-selected::after {
+    width: 100%;
+  }
+
+  .bd-tab-button.bd-selected {
+    color: var(--color-neutral-900);
+  }
+
+  .bd-tab-button:focus-visible {
+    outline: 2px solid var(--bd-accessibility-focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  .bd-tab-icon {
+    width: 28px;
+    height: 28px;
+    object-fit: contain;
+  }
+
+  .bd-tab-label {
+    pointer-events: none;
+  }
+
+  .bd-panel-wrapper {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .bd-card-container {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-64);
+    width: 100%;
+    animation: bd-fade-slide-right 350ms ease forwards;
+  }
+
+  .bd-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-24);
+  }
+
+  .bd-panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
+
+  .bd-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .bd-panel-image {
+    width: 100%;
+    max-width: 520px;
+    height: auto;
+    border-radius: var(--radius-lg, 16px);
+    object-fit: cover;
+    display: block;
+  }
+
+  @keyframes bd-fade-slide-right {
+    from {
+      opacity: 0;
+      transform: translateX(24px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @media (max-width: 992px) {
+    .bd-card-container {
+      flex-direction: column-reverse;
+      gap: var(--spacing-32);
+    }
+
+    .bd-left {
+      align-items: center;
+      text-align: center;
+    }
+
+    .bd-panel-image {
+      max-width: 100%;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .bd-tabs-container {
+      gap: var(--spacing-4);
+    }
+
+    .bd-tab-button {
+      padding: var(--spacing-8) var(--spacing-12);
+      font-size: var(--typography-fontSize-sm);
+    }
+
+    .bd-tab-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;

package/src/components/tabsComponentFamily/tabsComponentFamily.js

@@ -0,0 +1,180 @@
+import { LitElement, html } from "lit";
+import { keyed } from "lit/directives/keyed.js";
+import { tokens } from "../../tokens/tokens.js";
+import "../button/button.js";
+import "../heading/heading.js";
+import "../highlight/highlight.js";
+import "../paragraph/paragraph.js";
+import tabsChildCSS from "./tabsComponentFamily.css.js";
+
+class BdTabContentPanelFamily extends HTMLElement {
+  connectedCallback() {
+    this.style.display = "none";
+  }
+}
+customElements.define("bd-tab-content-panel-family", BdTabContentPanelFamily);
+
+class TabsComponentFamily extends LitElement {
+  static properties = {
+    title          : { type: String },
+    subtitle       : { type: String },
+    highlightText  : { type: String, attribute: "highlight-text" },
+    selectedTab    : { type: Number, state: true },
+    _panelMinHeight: { type: Number, state: true }
+  };
+
+  static styles = [tokens, tabsChildCSS];
+
+  constructor() {
+    super();
+    this.title           = "";
+    this.subtitle        = "";
+    this.highlightText   = "";
+    this.selectedTab     = 0;
+    this._panelMinHeight = 0;
+  }
+
+  _getPanels() {
+    return Array.from(this.querySelectorAll(":scope > bd-tab-content-panel-family"));
+  }
+
+  selectTab(index) {
+    this.selectedTab = index;
+  }
+
+  async firstUpdated() {
+    await this.updateComplete;
+    await this._measureAllPanels();
+  }
+
+  async _measureAllPanels() {
+    const panels  = this._getPanels();
+    const wrapper = this.renderRoot.querySelector(".bd-panel-wrapper");
+    if (!wrapper || !panels.length) return;
+
+    const originalTab = this.selectedTab;
+    let maxHeight     = 0;
+
+    for (let i = 0; i < panels.length; i++) {
+      this.selectedTab = i;
+      await this.updateComplete;
+      await new Promise(r => requestAnimationFrame(r));
+      await new Promise(r => requestAnimationFrame(r));
+
+      const h = wrapper.scrollHeight;
+      if (h > maxHeight) maxHeight = h;
+    }
+
+    this.selectedTab     = originalTab;
+    await this.updateComplete;
+    this._panelMinHeight = maxHeight;
+  }
+
+  _renderPanel(panel) {
+    const headingEl = panel.querySelector("[slot='heading']");
+    const contentEl = panel.querySelector("[slot='content']");
+    const imageEl   = panel.querySelector("[slot='image']");
+    const ctaEl     = panel.querySelector("[slot='cta']");
+
+    const heading  = panel.getAttribute("heading");
+    const imageSrc = panel.getAttribute("image-src");
+    const imageAlt = panel.getAttribute("image-alt") || "";
+    const ctaLabel = panel.getAttribute("cta-label");
+    const ctaHref  = panel.getAttribute("cta-href") || "#";
+    const ctaKind  = panel.getAttribute("cta-kind") || "danger";
+    const ctaSize  = panel.getAttribute("cta-size") || "md";
+
+    return html`
+      <div class="bd-card-container">
+
+        <div class="bd-left">
+          ${headingEl
+            ? headingEl.cloneNode(true)
+            : heading
+              ? html`<bd-h as="h3" color="var(--color-blue-600)">${heading}</bd-h>`
+              : ""}
+
+          ${contentEl
+            ? html`<div class="bd-panel-content">${contentEl.cloneNode(true)}</div>`
+            : ""}
+
+          ${ctaEl
+            ? ctaEl.cloneNode(true)
+            : ctaLabel
+              ? html`
+                  <bd-button-link
+                    href="${ctaHref}"
+                    kind="${ctaKind}"
+                    size="${ctaSize}"
+                    label="${ctaLabel}"
+                    strong="true"
+                  >
+                    ${ctaLabel}
+                  </bd-button-link>`
+              : ""}
+        </div>
+
+        <div class="bd-right">
+          ${imageEl
+            ? imageEl.cloneNode(true)
+            : imageSrc
+              ? html`<img src="${imageSrc}" alt="${imageAlt}" class="bd-panel-image" loading="lazy" />`
+              : ""}
+        </div>
+
+      </div>
+    `;
+  }
+
+  render() {
+    const panels      = this._getPanels();
+    const activePanel = panels[this.selectedTab];
+
+    return html`
+      <div class="bd-tabs-component">
+
+        ${this.title
+          ? html`<bd-highlight highlight-text="${this.highlightText}">${this.title}</bd-highlight>`
+          : ""}
+
+        ${this.subtitle
+          ? html`<bd-p kind="regular" class="bd-tabs-subtitle">${this.subtitle}</bd-p>`
+          : ""}
+
+        <div class="bd-tabs-container" role="tablist">
+          ${panels.map((panel, index) => {
+            const icon = panel.getAttribute("icon");
+            return html`
+              <button
+                role="tab"
+                aria-selected="${this.selectedTab === index ? "true" : "false"}"
+                aria-controls="tab-panel-${index}"
+                id="tab-btn-${index}"
+                class="bd-tab-button ${this.selectedTab === index ? "bd-selected" : ""}"
+                @click=${() => this.selectTab(index)}
+              >
+                ${icon ? html`<img src="${icon}" alt="" class="bd-tab-icon" />` : ""}
+                <span class="bd-tab-label">${panel.getAttribute("title")}</span>
+              </button>
+            `;
+          })}
+        </div>
+
+        <div
+          id="tab-panel-${this.selectedTab}"
+          role="tabpanel"
+          aria-labelledby="tab-btn-${this.selectedTab}"
+          class="bd-panel-wrapper"
+          style="${this._panelMinHeight ? `min-height: ${this._panelMinHeight}px;` : ""}"
+        >
+          ${activePanel
+            ? keyed(this.selectedTab, this._renderPanel(activePanel))
+            : ""}
+        </div>
+
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-tabs-component-family", TabsComponentFamily);

package/src/components/tabsComponentFamily/tabsComponentFamily.stories.js

@@ -0,0 +1,319 @@
+import { html } from 'lit';
+import './tabsComponentFamily.js';
+
+export default {
+  title     : 'Components/TabsComponentFamily',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**TabsComponentFamily** is a fully slotted Lit component for a tab-based content showcase with left content and right image.
+
+### Usage
+\`\`\`html
+<bd-tabs-component-family
+  title="Customized online protection for each family member"
+  highlight-text="family member"
+  subtitle="Your subtitle here."
+>
+  <bd-tab-content-panel-family
+    title="Admin"
+    image-alt="Description"
+    cta-label="Stay worry free"
+    cta-href="#"
+  >
+    <bd-h as="h3" slot="heading">Your heading here.</bd-h>
+    <div slot="content">
+      <bd-p kind="small">Your content here.</bd-p>
+    </div>
+    <img slot="image" src="/assets/image.png" alt="Description" loading="lazy" />
+  </bd-tab-content-panel-family>
+</bd-tabs-component-family>
+\`\`\`
+
+### Atribute \`bd-tab-content-panel-family\`
+| Atribut | Tip | Descriere |
+|---|---|---|
+| \`title\` | String | Label-ul butonului de tab |
+| \`icon\` | String | Cale imagine icon lângă label (opțional) |
+| \`image-src\` | String | Imaginea din dreapta (fallback când nu există slot="image") |
+| \`image-alt\` | String | Alt text imagine |
+| \`cta-label\` | String | Text buton CTA (alternativă la slot) |
+| \`cta-href\` | String | Href buton CTA |
+| \`cta-kind\` | String | Kind buton CTA (default: danger) |
+| \`cta-size\` | String | Size buton CTA (default: md) |
+
+### Slot-uri \`bd-tab-content-panel-family\`
+| Slot | Descriere |
+|---|---|
+| \`heading\` | Heading custom |
+| \`content\` | Orice conținut: paragrafe, liste, etc. |
+| \`image\` | Imagine custom — suprascrie \`image-src\` |
+| \`cta\` | Buton/link custom — suprascrie \`cta-label\` |
+        `
+      }
+    }
+  },
+  argTypes: {
+    title: {
+      control    : 'text',
+      description: 'Titlul principal al componentei',
+      table      : { type: { summary: 'string' }, category: 'TabsComponentFamily' }
+    },
+    subtitle: {
+      control    : 'text',
+      description: 'Subtitlul componentei',
+      table      : { type: { summary: 'string' }, category: 'TabsComponentFamily' }
+    },
+    highlightText: {
+      control    : 'text',
+      description: 'Textul care se highlightează în titlu',
+      table      : { type: { summary: 'string' }, category: 'TabsComponentFamily' }
+    }
+  }
+};
+
+const panels = [
+  {
+    title   : 'Admin',
+    imageSrc: '/assets/tabs-img1.png',
+    imageAlt: 'Admin using laptop',
+    heading : 'Keep your loved ones protected.',
+    content : 'As the Subscription Manager, you can oversee and adjust online safety through an intuitive dashboard. Effortlessly manage settings, monitor real-time alerts, and maintain control without compromising simplicity or security.',
+    ctaLabel: 'Stay worry free',
+    ctaHref : '#admin'
+  },
+  {
+    title   : 'Adult',
+    imageSrc: '/assets/tabs-img2.png',
+    imageAlt: 'Adult protection',
+    heading : 'Stay safe online, every day.',
+    content : 'Advanced privacy and security tools tailored for adults. Browse safely, protect your identity, and keep your data private at all times.',
+    ctaLabel: 'Learn more',
+    ctaHref : '#adult'
+  },
+  {
+    title   : 'Teen',
+    imageSrc: '/assets/tabs-img3.png',
+    imageAlt: 'Teen protection',
+    heading : 'Safe browsing for teens.',
+    content : 'Give teens the freedom to explore online while keeping them protected from inappropriate content, cyberbullying, and online threats.',
+    ctaLabel: 'Explore features',
+    ctaHref : '#teen'
+  },
+  {
+    title   : 'Child',
+    imageSrc: '/assets/tabs-img3.png',
+    imageAlt: 'Child protection',
+    heading : 'A safe digital world for children.',
+    content : 'Comprehensive parental controls and content filtering ensure your child has a safe, age-appropriate online experience every time they connect.',
+    ctaLabel: 'Protect your child',
+    ctaHref : '#child'
+  }
+];
+
+const renderPanels = () => panels.map(p => html`
+  <bd-tab-content-panel-family
+    title="${p.title}"
+    image-src="${p.imageSrc}"
+    image-alt="${p.imageAlt}"
+    cta-label="${p.ctaLabel}"
+    cta-href="${p.ctaHref}"
+  >
+    <bd-h as="h3" slot="heading" style="color: var(--color-blue-600);">${p.heading}</bd-h>
+    <div slot="content">
+      <bd-p kind="small">${p.content}</bd-p>
+    </div>
+  </bd-tab-content-panel-family>
+`);
+
+export const Default = {
+  name  : 'Default (4 tabs)',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member – Smart, Private & Safe"
+      highlight-text="family member"
+      subtitle="Your family is unique and so should be your online security. Our family protection plan adapts to each member's needs, offering the ideal mix of privacy, freedom, and safety."
+    >
+      ${renderPanels()}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Default cu 4 tab-uri și conținut complet.' } } }
+};
+
+export const WithImageSlot = {
+  name  : 'Cu slot="image" (picture element)',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member – Smart, Private & Safe"
+      highlight-text="family member"
+      subtitle="Folosind slot='image' pentru control complet asupra imaginii."
+    >
+      ${panels.map(p => html`
+        <bd-tab-content-panel-family
+          title="${p.title}"
+          cta-label="${p.ctaLabel}"
+          cta-href="${p.ctaHref}"
+        >
+          <bd-h as="h3" slot="heading" style="color: var(--color-blue-600);">${p.heading}</bd-h>
+          <div slot="content">
+            <bd-p kind="small">${p.content}</bd-p>
+          </div>
+          <picture slot="image" style="display:block;">
+            <source type="image/webp" srcset="${p.imageSrc}?width=2000&format=webp&optimize=medium" media="(min-width: 600px)" />
+            <source type="image/webp" srcset="${p.imageSrc}?width=750&format=webp&optimize=medium" />
+            <img
+              src="${p.imageSrc}"
+              alt="${p.imageAlt}"
+              loading="lazy"
+              style="width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg,16px);object-fit:cover;display:block;"
+            />
+          </picture>
+        </bd-tab-content-panel-family>
+      `)}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Imaginea furnizată via slot="image" cu element picture complet.' } } }
+};
+
+export const NoTitleNoSubtitle = {
+  name  : 'No Title / No Subtitle',
+  render: () => html`
+    <bd-tabs-component-family>
+      ${renderPanels()}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Fără titlu și subtitlu.' } } }
+};
+
+export const SingleTab = {
+  name  : 'Single Tab (edge case)',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Protection for your family"
+      highlight-text="family"
+      subtitle="Stay protected."
+    >
+      <bd-tab-content-panel-family
+        title="Admin"
+        image-src="/assets/tabs-img1.png"
+        image-alt="Admin"
+        cta-label="Get started"
+        cta-href="#"
+      >
+        <bd-h as="h3" slot="heading" style="color: var(--color-blue-600);">Keep your loved ones protected.</bd-h>
+        <div slot="content">
+          <bd-p kind="small">Single tab edge case — only one panel available.</bd-p>
+        </div>
+      </bd-tab-content-panel-family>
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Edge case cu un singur tab.' } } }
+};
+
+export const NoCTA = {
+  name  : 'No CTA Button',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member"
+      highlight-text="family member"
+      subtitle="Stay protected at all times."
+    >
+      ${panels.map(p => html`
+        <bd-tab-content-panel-family
+          title="${p.title}"
+          image-src="${p.imageSrc}"
+          image-alt="${p.imageAlt}"
+        >
+          <bd-h as="h3" slot="heading" style="color: var(--color-blue-600);">${p.heading}</bd-h>
+          <div slot="content">
+            <bd-p kind="small">${p.content}</bd-p>
+          </div>
+        </bd-tab-content-panel-family>
+      `)}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Fără buton CTA.' } } }
+};
+
+export const WithIcons = {
+  name  : 'With Tab Icons',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member"
+      highlight-text="family member"
+      subtitle="Stay protected at all times."
+    >
+      ${panels.map((p, i) => html`
+        <bd-tab-content-panel-family
+          title="${p.title}"
+          icon="/assets/pic${i + 1}.png"
+          image-src="${p.imageSrc}"
+          image-alt="${p.imageAlt}"
+          cta-label="${p.ctaLabel}"
+          cta-href="${p.ctaHref}"
+        >
+          <bd-h as="h3" slot="heading" style="color: var(--color-blue-600);">${p.heading}</bd-h>
+          <div slot="content">
+            <bd-p kind="small">${p.content}</bd-p>
+          </div>
+        </bd-tab-content-panel-family>
+      `)}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Tab-uri cu iconiță lângă label.' } } }
+};
+
+export const MobileView = {
+  name  : 'Mobile View (375px)',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member"
+      highlight-text="family member"
+      subtitle="Stay protected at all times."
+    >
+      ${renderPanels()}
+    </bd-tabs-component-family>
+  `,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs    : { description: { story: 'Vedere mobilă la 375px.' } }
+  }
+};
+
+export const TabletView = {
+  name  : 'Tablet View (768px)',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member"
+      highlight-text="family member"
+      subtitle="Stay protected at all times."
+    >
+      ${renderPanels()}
+    </bd-tabs-component-family>
+  `,
+  parameters: {
+    viewport: { defaultViewport: 'tablet' },
+    docs    : { description: { story: 'Vedere tabletă la 768px.' } }
+  }
+};
+
+export const Playground = {
+  name: '🛝 Playground',
+  args: {
+    title        : 'Customized online protection for each family member – Smart, Private & Safe',
+    subtitle     : 'Your family is unique and so should be your online security.',
+    highlightText: 'family member'
+  },
+  render: (args) => html`
+    <bd-tabs-component-family
+      title="${args.title}"
+      highlight-text="${args.highlightText}"
+      subtitle="${args.subtitle}"
+    >
+      ${renderPanels()}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Playground interactiv.' } } }
+};