@deriv-web-design/ui 0.1.28 → 0.1.30

package/block-registry.json

@@ -4793,8 +4793,8 @@
     "name": "Navbar",
     "component": "Navbar",
     "category": "chrome",
-    "description": "Global site header with logo, mega-nav dropdowns, language picker, login, and primary open-account CTA.",
-    "purpose": "Global site header for marketing pages: brand logo, primary navigation (with optional mega-dropdowns), language picker, Log in, and Open account CTA. Themes adapt to light or dark content beneath. This block is designed as fixed page chrome — not a mid-page content section.",
+    "description": "Global site header with logo, mega-nav dropdowns, language picker, login, and primary open-account CTA. Desktop dual logo/CTA copies for the scroll pill transition; inactive copy is inert (out of tab order / a11y tree).",
+    "purpose": "Global site header for marketing pages: brand logo, primary navigation (with optional mega-dropdowns), language picker, Log in, and Open account CTA. Themes adapt to light or dark content beneath. This block is designed as fixed page chrome — not a mid-page content section. On desktop (≥992px) the logo and auth CTAs exist in two visual copies (outer bar vs condensed pill) so the scroll transition can crossfade. The inactive copy is marked `inert` — it is removed from the keyboard tab order and the accessibility tree — so consumers must not add their own `tabindex`/`aria-hidden` workarounds for “hidden” navbar CTAs, and must not treat missing focus rings on those copies as a `Button` defect (visible buttons already ship a `:focus-visible` ring).",
     "keywords": [
       "navigation",
       "navbar",
@@ -5822,8 +5822,8 @@
     "name": "Sticky Market Cards",
     "component": "StickyMarketCards",
     "category": "cards",
-    "description": "Scroll-driven stack of overlapping market cards that pile up via position sticky, scaling and dimming as each card slides over the previous one. Default cards use a tinted background image; the lottie variant places a manual-play animation beside stacked title and copy (tactical indices).",
-    "purpose": "A scroll-driven stack of overlapping, text-first market cards. Each card piles on top of the previous one via `position: sticky` as the user scrolls, scaling down and dimming the card underneath for a layered depth effect. This block is designed to showcase a list of markets, products, or benefits one at a time as the user scrolls, with a maximum of 4 cards visibly stacked at once regardless of total count. The `lottie` variant swaps the background image for a manual-play animation panel beside the copy — the same pattern as tactical indices cards on the live site.",
+    "description": "Scroll-driven stack of overlapping, text-first market cards that pile up via position sticky, scaling and dimming as each card slides over the previous one.",
+    "purpose": "A scroll-driven stack of overlapping, text-first market cards. Each card piles on top of the previous one via `position: sticky` as the user scrolls, scaling down and dimming the card underneath for a layered depth effect. This block is designed to showcase a list of markets, products, or benefits one at a time as the user scrolls, with a maximum of 4 cards visibly stacked at once regardless of total count.",
     "keywords": [
       "sticky",
       "cards",
@@ -5837,10 +5837,7 @@
       "synthetics",
       "cfd",
       "trading",
-      "deriv",
-      "lottie",
-      "tactical",
-      "animation"
+      "deriv"
     ],
     "sectionType": "sticky-cards",
     "global": false,
@@ -5849,12 +5846,10 @@
       "items"
     ],
     "optionalFields": [
-      "sectionDescription",
-      "variant"
+      "sectionDescription"
     ],
     "variants": [
-      "default",
-      "lottie"
+      "default"
     ],
     "recommendedPosition": 3,
     "placement": [
@@ -5873,21 +5868,15 @@
       "cardImage": true,
       "cardThemes": true,
       "scrollAnimation": true,
-      "lottie": true,
-      "manualPlayback": true,
       "primaryButton": false,
       "secondaryButton": false,
       "badge": false,
       "avatar": false
     },
     "imageRoles": [
-      "card-background",
-      "animation",
-      "poster"
+      "card-background"
     ],
-    "defaultValues": {
-      "variant": "default"
-    },
+    "defaultValues": {},
     "fields": {
       "items": {
         "type": "array",
@@ -5896,22 +5885,11 @@
           "description": {
             "type": "string",
             "required": true,
-            "maxLength": 300
+            "maxLength": 150
           },
           "imageUrl": {
             "type": "image",
-            "required": false,
-            "description": "Background image for the default variant. Ignored when variant is \"lottie\"."
-          },
-          "lottiePosterUrl": {
-            "type": "image",
-            "required": false,
-            "description": "Optional still frame while the Lottie is paused or loading."
-          },
-          "lottieSrc": {
-            "type": "string",
-            "required": false,
-            "description": "`.lottie` URL for the media panel when variant is \"lottie\"."
+            "required": false
           },
           "theme": {
             "type": "string",
@@ -5941,16 +5919,6 @@
         "type": "string",
         "required": true,
         "maxLength": 80
-      },
-      "variant": {
-        "type": "string",
-        "required": false,
-        "default": "default",
-        "enum": [
-          "default",
-          "lottie"
-        ],
-        "description": "Card layout mode. \"default\" uses a background image with title | description columns; \"lottie\" uses a solid theme card with a manual-play Lottie panel and stacked copy (tactical-indices)."
       }
     }
   },

package/components.manifest.json

@@ -3357,17 +3357,7 @@
             "imageUrl": {
               "type": "string",
               "required": false,
-              "description": "URL of the card's hero image (default variant). Ignored when the section `variant` is `\"lottie\"`."
-            },
-            "lottiePosterUrl": {
-              "type": "string",
-              "required": false,
-              "description": "Optional still frame shown while the Lottie is paused / loading (`variant: \"lottie\"` only)."
-            },
-            "lottieSrc": {
-              "type": "string",
-              "required": false,
-              "description": "`.lottie` (or animation-hosting `.json`) URL for the card media panel. Used when the section `variant` is `\"lottie\"`."
+              "description": "URL of the card's hero image."
             },
             "theme": {
               "type": "StickyMarketCardTheme",
@@ -3390,12 +3380,6 @@
           "type": "string",
           "required": true,
           "description": "Section heading rendered as H2"
-        },
-        "variant": {
-          "type": "StickyMarketCardsVariant",
-          "required": false,
-          "description": "Card layout mode.",
-          "default": "default"
         }
       }
     },

package/dist/index.css

@@ -4871,6 +4871,8 @@
   gap: var(--spacing-8);
   flex-shrink: 0;
   overflow: hidden;
+  overflow: clip;
+  overflow-clip-margin: 4px;
   white-space: nowrap;
   max-width: 0;
   opacity: 0;
@@ -6326,15 +6328,6 @@
     246,
     247,
     248;
-  --smc-lottie-min-height: 18.75rem;
-  --smc-lottie-aspect: 1312 / 854;
-  --smc-lottie-panel-bg: transparent;
-  --smc-lottie-radius: var(--radius-xl);
-  --smc-lottie-gap: var(--spacing-32);
-  --smc-control-bg: var(--color-slate-50);
-  --smc-control-color: var(--color-slate-1200);
-  --smc-scrim: rgb(0 0 0 / 10%);
-  --smc-focus: var(--border-focus);
 }
 .smc {
   width: 100%;
@@ -6469,106 +6462,6 @@
 .smc__card-desc-wrap {
   flex: 1;
 }
-.smc__card-inner--lottie {
-  padding: var(--smc-lottie-gap);
-  min-height: var(--smc-lottie-min-height);
-  align-items: stretch;
-}
-.smc__card-content--lottie {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
-  align-items: stretch;
-  gap: var(--smc-lottie-gap);
-}
-.smc__card-text {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: var(--spacing-16);
-  height: 100%;
-  min-width: 0;
-}
-.smc__lottie {
-  position: relative;
-  isolation: isolate;
-  align-self: start;
-  width: 100%;
-  min-width: 0;
-  aspect-ratio: var(--smc-lottie-aspect);
-  overflow: hidden;
-  border-radius: var(--smc-lottie-radius);
-  background-color: var(--smc-lottie-panel-bg);
-}
-.smc__lottie-media {
-  position: absolute;
-  z-index: 1;
-  inset: 0;
-}
-.smc__lottie-media > *,
-.smc__lottie-player {
-  width: 100% !important;
-  height: 100% !important;
-}
-.smc__lottie-player {
-  display: flex !important;
-  align-items: stretch !important;
-  justify-content: stretch !important;
-}
-.smc__lottie-media canvas,
-.smc__lottie-player canvas {
-  width: 100% !important;
-  height: 100% !important;
-  display: block;
-}
-.smc__lottie-media img,
-.smc__lottie-poster {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-}
-.smc__lottie-poster {
-  position: absolute;
-  z-index: 2;
-  inset: 0;
-}
-.smc__playback-toggle {
-  position: absolute;
-  z-index: 3;
-  display: grid;
-  inset: 0;
-  padding: 0;
-  place-items: center;
-  border: 0;
-  background: var(--smc-scrim);
-  cursor: pointer;
-}
-.smc__playback-toggle--playing {
-  background: transparent;
-}
-.smc__playback-toggle:focus-visible {
-  outline: 2px solid var(--smc-focus);
-  outline-offset: -4px;
-}
-.smc__control-icon {
-  width: 64px;
-  height: 64px;
-  transition: opacity 150ms ease;
-}
-.smc__playback-toggle--playing .smc__control-icon {
-  opacity: 0;
-}
-.smc__playback-toggle--playing:hover .smc__control-icon,
-.smc__playback-toggle--playing:focus-visible .smc__control-icon {
-  opacity: 1;
-}
-.smc__control-disc {
-  fill: var(--smc-control-bg);
-  fill-opacity: 0.88;
-}
-.smc__control-glyph {
-  fill: var(--smc-control-color);
-}
 .smc__card-title {
   margin: 0;
   font-family: var(--font-family-base);
@@ -6590,18 +6483,11 @@
   .smc__card-inner {
     padding: var(--spacing-24) var(--spacing-32);
   }
-  .smc__card-inner--lottie {
-    padding: var(--spacing-24);
-  }
   .smc__card-content {
     grid-template-columns: 1fr;
     align-items: flex-start;
     gap: var(--spacing-24);
   }
-  .smc__card-content--lottie {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-24);
-  }
 }
 
 /* templates/Table/Table.css */