@deriv-web-design/ui 0.1.24 → 0.1.26

package/block-registry.json

@@ -4825,6 +4825,7 @@
       "ctaHref",
       "languageLabel",
       "languageItems",
+      "languageRows",
       "activeLanguageCode"
     ],
     "variants": [
@@ -4900,6 +4901,11 @@
         "maxLength": 10,
         "description": "Current language code shown in the switcher, e.g. \"EN\". No default — omit it and the language switcher is not rendered at all."
       },
+      "languageRows": {
+        "type": "number",
+        "required": false,
+        "description": "Max items per column in the language dropdown. When set, columns are derived (ceil(items / languageRows)); when omitted, the existing 3-column layout is unchanged."
+      },
       "loginHref": {
         "type": "url",
         "required": false,

package/components.manifest.json

@@ -2929,6 +2929,11 @@
           "required": false,
           "description": "Language label rendered next to the globe icon, e.g. \"EN\""
         },
+        "languageRows": {
+          "type": "number",
+          "required": false,
+          "description": "Max items per column in the language dropdown. When set (integer ≥ 1), the number of columns is derived (`ceil(items / languageRows)`); when omitted, the existing 3-column layout is unchanged."
+        },
         "loginHref": {
           "type": "string",
           "required": false,

package/dist/index.css

@@ -4739,8 +4739,12 @@
 .navbar__lang-dropdown {
   position: absolute;
   top: calc(100% + var(--spacing-8));
-  left: calc(50% - 352px);
-  width: 704px;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  width: max-content;
+  min-width: 704px;
+  max-width: calc(100vw - 2 * var(--spacing-24));
   background-color: var(--color-slate-50);
   border: 1px solid var(--color-slate-100);
   border-radius: var(--navbar-dropdown-radius);
@@ -4752,7 +4756,7 @@
 }
 .navbar__lang-dropdown-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(var(--lang-cols, 3), 1fr);
   grid-auto-flow: column;
   grid-template-rows: repeat(var(--lang-rows, 7), auto);
   gap: 0;
@@ -12131,128 +12135,128 @@
 
 /* components/LinkModal/LinkModal.css */
 :root {
-  --lm-scrim-color: rgb(0 0 0 / 72%);
-  --lm-scrim-blur: 4px;
-  --lm-z-index: 9999;
-  --lm-panel-background: var(--background-surface);
-  --lm-panel-radius: var(--radius-xl);
-  --lm-panel-shadow: var(--elevation-modal);
-  --lm-panel-max-width: var(--content-width-846);
-  --lm-panel-padding-block: var(--spacing-40);
-  --lm-panel-padding-inline: var(--spacing-24);
-  --lm-panel-gap: var(--spacing-24);
-  --lm-panel-margin: var(--spacing-16);
-  --lm-title-color: var(--text-primary);
-  --lm-close-inset: var(--spacing-8);
-  --lm-close-size: var(--spacing-48);
-  --lm-close-glyph-size: var(--spacing-24);
-  --lm-close-icon-color: var(--icon-primary);
-  --lm-close-hover-background: var(--color-opacity-slate-8);
-  --lm-close-active-background: var(--color-opacity-slate-16);
-  --lm-focus-ring-color: var(--border-focus);
-}
-.lm {
+  --lkm-scrim-color: rgb(0 0 0 / 72%);
+  --lkm-scrim-blur: 4px;
+  --lkm-z-index: 9999;
+  --lkm-panel-background: var(--background-surface);
+  --lkm-panel-radius: var(--radius-xl);
+  --lkm-panel-shadow: var(--elevation-modal);
+  --lkm-panel-max-width: var(--content-width-846);
+  --lkm-panel-padding-block: var(--spacing-40);
+  --lkm-panel-padding-inline: var(--spacing-24);
+  --lkm-panel-gap: var(--spacing-24);
+  --lkm-panel-margin: var(--spacing-16);
+  --lkm-title-color: var(--text-primary);
+  --lkm-close-inset: var(--spacing-8);
+  --lkm-close-size: var(--spacing-48);
+  --lkm-close-glyph-size: var(--spacing-24);
+  --lkm-close-icon-color: var(--icon-primary);
+  --lkm-close-hover-background: var(--color-opacity-slate-8);
+  --lkm-close-active-background: var(--color-opacity-slate-16);
+  --lkm-focus-ring-color: var(--border-focus);
+}
+.lkm {
   position: fixed;
   inset: 0;
-  z-index: var(--lm-z-index);
+  z-index: var(--lkm-z-index);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--lm-panel-margin);
+  padding: var(--lkm-panel-margin);
   box-sizing: border-box;
   overflow-y: auto;
 }
-.lm__scrim {
+.lkm__scrim {
   position: fixed;
   inset: 0;
-  background-color: var(--lm-scrim-color);
-  -webkit-backdrop-filter: blur(var(--lm-scrim-blur));
-  backdrop-filter: blur(var(--lm-scrim-blur));
+  background-color: var(--lkm-scrim-color);
+  -webkit-backdrop-filter: blur(var(--lkm-scrim-blur));
+  backdrop-filter: blur(var(--lkm-scrim-blur));
 }
-.lm__panel {
+.lkm__panel {
   position: relative;
   z-index: 1;
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--lm-panel-max-width);
-  max-height: calc(100dvh - (var(--lm-panel-margin) * 2));
+  max-width: var(--lkm-panel-max-width);
+  max-height: calc(100dvh - (var(--lkm-panel-margin) * 2));
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--lm-panel-gap);
-  padding: var(--lm-panel-padding-block) var(--lm-panel-padding-inline);
-  border-radius: var(--lm-panel-radius);
-  background-color: var(--lm-panel-background);
-  box-shadow: var(--lm-panel-shadow);
+  gap: var(--lkm-panel-gap);
+  padding: var(--lkm-panel-padding-block) var(--lkm-panel-padding-inline);
+  border-radius: var(--lkm-panel-radius);
+  background-color: var(--lkm-panel-background);
+  box-shadow: var(--lkm-panel-shadow);
   outline: none;
 }
-.lm__panel:focus-visible {
-  outline: 2px solid var(--lm-focus-ring-color);
+.lkm__panel:focus-visible {
+  outline: 2px solid var(--lkm-focus-ring-color);
   outline-offset: 2px;
 }
-.lm__close {
+.lkm__close {
   position: absolute;
-  top: var(--lm-close-inset);
-  right: var(--lm-close-inset);
+  top: var(--lkm-close-inset);
+  right: var(--lkm-close-inset);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--lm-close-size);
-  height: var(--lm-close-size);
+  width: var(--lkm-close-size);
+  height: var(--lkm-close-size);
   box-sizing: border-box;
   padding: 0;
   border: none;
   border-radius: var(--radius-full);
   background: none;
-  color: var(--lm-close-icon-color);
+  color: var(--lkm-close-icon-color);
   cursor: pointer;
   outline: none;
   transition: background-color 100ms ease;
 }
-.lm__close:hover {
-  background-color: var(--lm-close-hover-background);
+.lkm__close:hover {
+  background-color: var(--lkm-close-hover-background);
 }
-.lm__close:active {
-  background-color: var(--lm-close-active-background);
+.lkm__close:active {
+  background-color: var(--lkm-close-active-background);
 }
-.lm__close:focus-visible {
-  outline: 2px solid var(--lm-focus-ring-color);
+.lkm__close:focus-visible {
+  outline: 2px solid var(--lkm-focus-ring-color);
   outline-offset: 2px;
 }
-.lm__close svg {
-  width: var(--lm-close-glyph-size);
-  height: var(--lm-close-glyph-size);
+.lkm__close svg {
+  width: var(--lkm-close-glyph-size);
+  height: var(--lkm-close-glyph-size);
 }
-.lm__title {
+.lkm__title {
   margin: 0;
-  padding-inline: var(--lm-close-size);
+  padding-inline: var(--lkm-close-size);
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
   line-height: var(--typography-h5-line-height);
   letter-spacing: var(--typography-h5-letter-spacing);
-  color: var(--lm-title-color);
+  color: var(--lkm-title-color);
   text-align: center;
 }
-.lm__body {
+.lkm__body {
   width: 100%;
   min-height: 0;
   overflow-y: auto;
 }
 @media (min-width: 768px) {
   :root {
-    --lm-panel-padding-inline: var(--spacing-32);
+    --lkm-panel-padding-inline: var(--spacing-32);
   }
 }
 @media (min-width: 992px) {
   :root {
-    --lm-panel-padding-block: var(--spacing-80);
-    --lm-panel-padding-inline: var(--spacing-96);
-    --lm-panel-gap: var(--spacing-40);
+    --lkm-panel-padding-block: var(--spacing-80);
+    --lkm-panel-padding-inline: var(--spacing-96);
+    --lkm-panel-gap: var(--spacing-40);
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .lm__close {
+  .lkm__close {
     transition: none;
   }
 }