@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/light-carousel/light-carousel.css.js

@@ -1,15 +1,47 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export default css`
+  /* One stylesheet for both public variants.
+
+     The two implementations were copies of each other: twenty-three rule
+     blocks each, the same selectors under the same media conditions, seventeen
+     of them byte-identical and every responsive block identical. The simple
+     copy differed only in the six values below, and carried them by suffixing
+     every class name with -s.
+
+     So the variant is a set of values, not a set of rules. It used to be
+     selected by tag name, which is why there were two public element pairs at
+     all; P6E.1 folded those into one pair and the set is now selected by
+     the variant attribute. Everything after that is shared, which is what keeps the 480,
+     600 and 1024 queries in one place instead of two. */
   :host {
     display: block;
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
+
+    --bd-lc-columns: 3;
+    --bd-lc-gap: 30px;
+    --bd-lc-icon-size: var(--spacing-32);
+    --bd-lc-header-direction: row;
+    --bd-lc-header-align: center;
+    --bd-lc-title-align: start;
+    --bd-lc-section-padding-block: var(--spacing-0);
+    --bd-lc-carousel-padding-top: var(--spacing-32);
   }
-  .bd-section-title {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-    font-size: 2em;
+
+  :host([variant="simple"]) {
+    --bd-lc-columns: 4;
+    --bd-lc-gap: var(--spacing-24);
+    --bd-lc-icon-size: var(--spacing-44);
+    --bd-lc-header-direction: column;
+    --bd-lc-header-align: flex-start;
+    --bd-lc-title-align: center;
+    --bd-lc-section-padding-block: var(--spacing-32);
+    --bd-lc-carousel-padding-top: var(--spacing-0);
+  }
+
+  :host(bd-light-carousel-section[variant="simple"]) {
+    padding-top: var(--bd-lc-section-padding-block);
+    padding-bottom: var(--bd-lc-section-padding-block);
   }
   .bd-header-light-carousel {
     margin-bottom: 50px;
@@ -21,42 +53,34 @@ export default css`
     align-items: center;
     justify-content: center;
     position: relative;
+    /* The section is the page column (bd-ensemble), so its cards land on the
+       same content edge as every other module's. It used to be 1400 wide with a
+       14px gutter of its own; the track below carried a second 20px one, which
+       put these cards 20px inside the column everything else aligned to. The
+       column owns the gutter now, the track none. */
+    box-sizing: border-box;
     width: 100%;
     margin: var(--spacing-0) auto;
     overflow: hidden;
     flex-direction: column;
-    padding-left: var(--spacing-14);
-    padding-right: var(--spacing-14);
-    max-width: 1400px;
-    margin: 0 auto;
-        padding-top: var(--spacing-32);
-
-  }
-  .bd-light-carousel-title {
-    font-size: 28px;
-    font-weight: 700;
-    text-align: center;
-    color: #e4002b; /* roșu Bitdefender */
-    margin-bottom: 32px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+    padding-top: var(--bd-lc-carousel-padding-top);
   }
   .bd-light-carousel-track {
     scroll-behavior: smooth;
     flex: 1;
     position: relative;
-    padding: var(--spacing-0) var(--spacing-20);
+    padding: var(--spacing-0);
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    z-index: 1;
+    z-index: var(--z-base);
     scroll-snap-type: x mandatory;
   }
   .bd-light-carousel-track {
     display: grid;
-    gap: 30px;
-    grid-template-columns: repeat(3, 1fr); /* default fix 3 */
+    gap: var(--bd-lc-gap);
+    grid-template-columns: repeat(var(--bd-lc-columns), 1fr);
   }
   .bd-light-carousel-track::-webkit-scrollbar {
     display: none;
@@ -64,67 +88,84 @@ export default css`
 
   .bd-light-box {
     flex: var(--spacing-0) var(--spacing-0) auto;
-    background: var(--background-card-grey);
-    border-radius: 28px;
-    // border: var(--spacing-2) solid var(--border-card-grey);
-    padding: var(--spacing-32);
+    background: var(--color-surface-container);
+    /* 2xl is the card radius: the card box, the card-features card, the trust
+       panel card, the bento item and the awards root all use it. This was the
+       only one of them at 3xl, and nothing about a carousel item asks for a
+       softer corner than the same card sitting in a grid. */
+    border-radius: var(--card-radius);
+    padding: var(--card-padding);
     flex-direction: column;
     align-items: start;
     justify-content: center;
     text-align: start;
-    transition: transform 0.2s ease-in-out;
+    transition: transform var(--transition-duration-normal) var(--transition-easing-smooth);
     min-height: 135px;
+    /* The inset sits inside the declared width, exactly as it already does on
+       bd-card and bd-bento-item. Without this the box is content-box: the two
+       width rules below mean content width, the 32px inset is added outside
+       them, and at 480 the card rendered 311 + 64 = 375px inside a 343px
+       section -- 64px past its own parent, clipping its text off the right of
+       a 375px phone. cards/card.css.js carries the same note for the same
+       reason. The em paddings that used to be in those media queries were
+       compensating for this rather than expressing an inset. */
+    box-sizing: border-box;
     position: relative;
-    z-index: 2;
+    z-index: var(--z-raised);
     scroll-snap-align: start;
     font-family: var(--typography-fontFamily-sans);
   }
 
-  .bd-light-box h3 {
-    font-size: var(--heading-xsmall);
-    margin: var(--spacing-0) var(--spacing-8) var(--spacing-8) var(--spacing-0);
-    font-weight: 600;
-    font-family: var(--typography-fontFamily-sans);
-  }
-
-  .bd-light-box p {
-    font-size: var(--spacing-16);
-    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
-    font-family: var(--typography-fontFamily-sans);
-  }
+  /* Two rules stood here, matching a bare h3 and a bare p inside the box.
+     Neither can match: the item renders its title through bd-h and its copy
+     through bd-p, so both elements live in their own shadow roots, and a
+     descendant selector from this stylesheet does not cross that boundary.
+     Measured 0 matches for each across 105 .bd-light-box instances. P5E.1
+     removed the responsive half of this pair; the base half kept declaring
+     spacing that nothing has ever been able to read. */
 
   .bd-light-icon {
     position: relative;
     bottom: var(--spacing-6);
     max-width: 100%;
-    height: var(--spacing-32);
-    width: var(--spacing-32);
+    height: var(--bd-lc-icon-size);
+    width: var(--bd-lc-icon-size);
   }
   .bd-light-box-header {
     display: flex;
-    align-items: center;
+    flex-direction: var(--bd-lc-header-direction);
+    align-items: var(--bd-lc-header-align);
     gap: var(--spacing-8);
   }
   .bd-light-title-badge-wrapper {
     display: flex;
     align-items: center;
-    gap: var(--spacing-4, 4px);
+    gap: var(--spacing-4);
   }
 
+  /* No inset change at 1024. This box used to drop to 1.5em here and 1em at
+     480, and it was an outlier twice over: it started shrinking 256px of
+     viewport before any sibling did, and it kept going to 16px where the rest
+     stop at 24. It takes the compact inset with the family at md instead --
+     see the below('md') block further down.
+
+     The literals were also ems, so the inset scaled with whatever font-size the
+     box inherited while every sibling card's stayed put.
+
+     The width line is unrelated and stays. With box-sizing: border-box above,
+     the 380 is the card's whole width rather than its content width, so the
+     card measures 380 here instead of the 444 it used to render -- 64px
+     narrower, two still to a row, each one exactly filling its grid item. The
+     declared width was chosen over the rendered one on purpose: a rule that
+     says 380 and paints 444 is the kind of thing this file is being cleaned
+     of. */
   @media (max-width: 1024px) {
     .bd-light-box {
       width: 380px;
-      padding: 1.5em;
-    }
-    .bd-light-box h3 {
-      font-size: 1.1em;
-    }
-    .bd-light-box p {
-      font-size: 0.95em;
     }
   }
 
-  @media (max-width: 768px) {
+  @media ${unsafeCSS(below('md'))} {
     .bd-light-carousel-track {
       display: flex;
       flex-direction: column;
@@ -138,6 +179,11 @@ export default css`
       width: 100%;
       max-width: 400px;
       margin: var(--spacing-0) auto;
+      /* The compact inset, at the breakpoint the family takes it. Bento, the
+         Comparison Panel and the Trust Panel all step down here; this box used
+         to step down at 1024 and again at 480, which is why it read as the odd
+         one out when it was really just early and twice. */
+      padding: var(--card-padding-compact);
     }
 
     .bd-arrow {
@@ -148,15 +194,8 @@ export default css`
   @media (max-width: 480px) {
     .bd-light-box {
       width: 100%;
-      padding: 1em;
       min-height: 300px;
     }
-    .bd-light-box h3 {
-      font-size: 1em;
-    }
-    .bd-light-box p {
-      font-size: 0.9em;
-    }
     .bd-light-icon {
       bottom: var(--spacing-10);
     }
@@ -173,4 +212,13 @@ export default css`
       grid-template-columns: 1fr;
     }
   }
+
+  /* A reader who asked for less motion was still getting the item lift. Twenty-three
+     of the thirty animated directories in this package honour the query; this
+     one did not. */
+  @media (prefers-reduced-motion: reduce) {
+    .bd-light-box {
+      transition: none;
+    }
+  }
 `;

package/src/components/light-carousel/light-carousel.js

@@ -1,25 +1,66 @@
 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 "../badge/badge.js";
 import "../heading/heading.js";
 import carouselCSS from "../light-carousel/light-carousel.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 
 class CustomLightCarousel extends LitElement {
   static properties = {
-    title: { type: String }
+    title       : { type: String },
+    headingLevel: { type: Number, attribute: "heading-level" },
+    /**
+     * Which value set the stylesheet uses: "standard" or "simple". Reflected,
+     * because light-carousel.css.js selects the set with an attribute selector.
+     *
+     * These were two public element pairs until P6E.1 --
+     * bd-light-carousel-simple-section and -item. They were never a different
+     * component: one stylesheet already served both and differed on eight
+     * custom properties. The names are the ones this component's own stories
+     * and docs table have always used, Standard and Simple, rather than new
+     * ones invented at consolidation time.
+     */
+    variant     : { type: String, reflect: true }
   };
 
   constructor() {
     super();
     this.title = "";
+    this.headingLevel = 2;
+    this.variant = "standard";
+  }
+
+
+  /**
+   * The heading element this section renders. Level is the document-outline
+   * question and belongs to whoever composes the page; the type scale is this
+   * component's own and does not move with it. Defaults to h2, because a
+   * reusable section cannot know it is the only thing on the page, and two of
+   * these used to put two h1s on one.
+   */
+  get _headingTag() {
+    const n = Number(this.headingLevel);
+    return Number.isInteger(n) && n >= 1 && n <= 6 ? `h${n}` : "h2";
+  }
+
+  /* bd-h already builds the dynamic tag, and it keeps the two questions apart
+     the way this component needs: as= is the outline level the page composes,
+     visual-level= is the type role, which is ours. Building the element here
+     meant re-implementing bd-h and then hand-writing the type on top of it. */
+  _renderTitle(className) {
+    return html`<bd-h as=${this._headingTag} visual-level="h3" class=${className}
+      >${this.title}</bd-h
+    >`;
   }
 
   render() {
     return html`
-    <section class="bd-light-carousel">
+    <section class="bd-ensemble bd-light-carousel">
       ${this.title
         ? html`
             <div class="bd-header-light-carousel">
-              <h1 class="bd-section-title">${this.title}</h1>
+              ${this._renderTitle("bd-section-title")}
             </div>
           `
         : null}
@@ -32,9 +73,12 @@ class CustomLightCarousel extends LitElement {
 }
 class LightCarouselItem extends LitElement {
   static properties = {
-    title: { type: String },
-    badge: { type: String },
-    icon : { type: String }
+    title       : { type: String },
+    badge       : { type: String },
+    icon        : { type: String },
+    headingLevel: { type: Number, attribute: "heading-level" },
+    /** See the note on the section. Reflected for the same reason. */
+    variant     : { type: String, reflect: true }
   };
 
   constructor() {
@@ -42,6 +86,36 @@ class LightCarouselItem extends LitElement {
     this.title = "";
     this.badge = "";
     this.icon = "";
+    this.headingLevel = 3;
+    this.variant = "standard";
+  }
+
+
+  /**
+   * One level below the section default, so a section and the items inside it
+   * read as a hierarchy rather than a jump. The two variants render the same
+   * role at different sizes, which is a type decision and stays on
+   * visual-level; before this they said h6 and h4, which was a document-outline
+   * difference nobody chose.
+   */
+  get _headingTag() {
+    const n = Number(this.headingLevel);
+    return Number.isInteger(n) && n >= 1 && n <= 6 ? `h${n}` : "h3";
+  }
+
+  /**
+   * The title, at whichever type the variant renders it.
+   *
+   * Standard draws it at h5, bold, with 10px of vertical padding; simple draws
+   * it at h4 with neither. That is a real difference, and it is the reason
+   * omitting `badge` could not have reproduced the simple item on its own --
+   * the two treatments disagree about the type of the title as well as about
+   * the eight layout values in the stylesheet.
+   */
+  _renderItemTitle() {
+    return this.variant === "simple"
+      ? html`<bd-h as="${this._headingTag}" visual-level="h4">${this.title}</bd-h>`
+      : html`<bd-h as="${this._headingTag}" visual-level="h5" padding="10 0" fontWeight="bold">${this.title}</bd-h>`;
   }
 
   render() {
@@ -55,9 +129,9 @@ class LightCarouselItem extends LitElement {
         ${this.title || this.badge
           ? html`
               <div class="bd-light-title-badge-wrapper">
-                ${this.title ? html`<bd-h as="h6" padding="10px 0" fontWeight="700">${this.title}</bd-h>` : ""}
+                ${this.title ? this._renderItemTitle() : ""}
                 ${this.badge
-                  ? html`<bd-badge color="#026DFF">${this.badge}</bd-badge>`
+                  ? html`<bd-badge tone="primary" variant="fill">${this.badge}</bd-badge>`
                   : ""}
               </div>
             `
@@ -68,8 +142,8 @@ class LightCarouselItem extends LitElement {
   `;
   }
 }
-CustomLightCarousel.styles = [tokens, carouselCSS];
-LightCarouselItem.styles = [tokens, carouselCSS];
+CustomLightCarousel.styles = [ensembleCSS, carouselCSS];
+LightCarouselItem.styles = [carouselCSS];
 
 customElements.define("bd-light-carousel-item", LightCarouselItem);
 customElements.define("bd-light-carousel-section", CustomLightCarousel);