@cyberskill/design 2.3.0 → 2.4.0

package/_ds_manifest.json

@@ -5750,7 +5750,7 @@
       "scope": ".cs-display-face",
       "important": false,
       "declarationOrder": 1050,
-      "sourceLine": 24
+      "sourceLine": 25
     },
     {
       "name": "--cs-term-border",
@@ -5760,7 +5760,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1053,
-      "sourceLine": 346
+      "sourceLine": 347
     },
     {
       "name": "--cs-term-bar",
@@ -5770,7 +5770,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1054,
-      "sourceLine": 347
+      "sourceLine": 348
     },
     {
       "name": "--cs-term-dot",
@@ -5780,7 +5780,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1055,
-      "sourceLine": 348
+      "sourceLine": 349
     },
     {
       "name": "--cs-term-bg",
@@ -5790,7 +5790,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1056,
-      "sourceLine": 349
+      "sourceLine": 350
     },
     {
       "name": "--cs-term-fg",
@@ -5800,7 +5800,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1057,
-      "sourceLine": 350
+      "sourceLine": 351
     },
     {
       "name": "--cs-term-muted",
@@ -5810,7 +5810,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1058,
-      "sourceLine": 351
+      "sourceLine": 352
     },
     {
       "name": "--cs-code-bg",
@@ -5857,6 +5857,7 @@
       "value": "color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1066,
       "sourceLine": 15
@@ -5866,6 +5867,7 @@
       "value": "transparent",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1067,
       "sourceLine": 16
@@ -5875,6 +5877,7 @@
       "value": "color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1068,
       "sourceLine": 17
@@ -5884,6 +5887,7 @@
       "value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 50%, transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1069,
       "sourceLine": 18
@@ -5893,6 +5897,7 @@
       "value": "color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-standard-opacity, 80%), transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1070,
       "sourceLine": 19
@@ -5902,6 +5907,7 @@
       "value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 60%, transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1071,
       "sourceLine": 20
@@ -5911,6 +5917,7 @@
       "value": "color-mix(in oklab, var(--cs-color-surface-raised, #fbf4e9) var(--cs-glass-heavy-opacity, 90%), transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1072,
       "sourceLine": 21
@@ -5920,6 +5927,7 @@
       "value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 80%, transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1073,
       "sourceLine": 22

package/_esm/cs.mjs

@@ -1,4 +1,4 @@
-// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.3.0).
+// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.4.0).
 // No build step: import this module directly in a browser. It loads the pinned umd-react@19.2.8
 // distribution; its retained React and ReactDOM files report runtime version 19.2.4.
 // (official React 19 dropped UMD; pinned + SRI; skipped when window.React already exists), side-loads
@@ -33,7 +33,7 @@ if (!found()) await ensureScript("../_ds_bundle.js");
 export const CS = g[found()];
 if (!CS) throw new Error("cs.js: bundle loaded but no CyberSkillDesignSystem_* namespace found");
 export default CS;
-export const VERSION = "2.3.0";
+export const VERSION = "2.4.0";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;

package/base/collections.css

@@ -47,7 +47,7 @@ div.cs-item.is-disabled { opacity: 1; }
 .cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: var(--cs-space-5); position: relative; }
 .cs-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block: 26px 0; inset-inline-start: 12px; inline-size: 2px; background: var(--cs-color-border-default); }
 .cs-timeline__marker { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg, #fff); font-size: var(--cs-font-size-xs); font-weight: 700; z-index: 1; }
-.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-accent-on); }
+.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
 .cs-timeline__item--todo .cs-timeline__marker { background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); }
 .cs-timeline__title { font-weight: 700; margin: 2px 0 2px; }
 .cs-timeline__meta { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); font-family: var(--cs-font-family-mono); }

package/base/components.css

@@ -91,8 +91,8 @@
 .cs-button--full { inline-size: 100%; }
 
 .cs-button.is-disabled,
-.cs-button.is-loading,
 .cs-field.is-disabled { opacity: 0.58; cursor: not-allowed; }
+.cs-button.is-loading { opacity: 0.88; cursor: progress; }
 
 .cs-button__spinner {
   inline-size: 1em; block-size: 1em; border-radius: 999px;
@@ -132,7 +132,7 @@
 .cs-dialog__overlay { background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); inset: 0; position: absolute; }
 .cs-dialog {
   background: var(--cs-color-surface-panel, #ffffff);
-  border-radius: var(--cs-radius-md, 8px);
+  border-radius: var(--cs-radius-lg, 14px);
   box-shadow: var(--cs-shadow-xl, 0 24px 80px rgba(31, 19, 11, 0.26));
   color: var(--cs-color-text-primary, #45210e);
   left: 0;

package/base/controls.css

@@ -81,6 +81,7 @@
 /* ---- v3 Batch 2 part 2 (Jul 2026): Combobox · InputGroup · TagInput ---- */
 .cs-combobox { position: relative; display: inline-block; min-inline-size: 260px; }
 .cs-combobox input { inline-size: 100%; box-sizing: border-box; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 34px 10px var(--cs-space-3); min-block-size: 44px; }
+.is-invalid .cs-combobox input, .cs-combobox input[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger, #b42318); }
 .cs-combobox input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-combobox__caret { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; color: var(--cs-color-text-muted); }
 .cs-combobox__popup { color: var(--cs-color-text-primary); position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; }
@@ -114,7 +115,7 @@
 .cs-cal__grid button { border: 0; background: none; color: var(--cs-color-text-primary); font: 500 13px var(--cs-font-family-ui); block-size: 34px; border-radius: var(--cs-radius-sm); cursor: pointer; }
 .cs-cal__grid button:hover { background: var(--cs-color-surface-raised); }
 .cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-accent); }
-.cs-cal__grid button.sel { background: var(--cs-accent); color: var(--cs-accent-on); font-weight: 700; }
+.cs-cal__grid button.sel { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); font-weight: 700; box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
 .cs-cal__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-datepicker { position: relative; display: inline-block; max-inline-size: 100%; }
 .cs-datepicker__field { display: inline-flex; align-items: center; gap: var(--cs-space-2); min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: var(--cs-space-2) var(--cs-space-3); cursor: pointer; }
@@ -137,7 +138,7 @@
 .cs-ctxmenu-zone { position: relative; }
 .cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 80); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
 .cs-fab--static { position: static; align-items: flex-start; }
-.cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent); color: var(--cs-accent-on); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }
+.cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 2px var(--cs-accent-strong), var(--cs-shadow-lg); }
 .cs-fab__main:hover { filter: brightness(1.05); }
 .cs-fab__main:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-md); }
 .cs-fab__dial { display: flex; flex-direction: column; gap: 8px; align-items: center; }

package/base/data.css

@@ -4,7 +4,7 @@
 .cs-card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-sm); color: var(--cs-color-text-primary); overflow: hidden; }
 .cs-card--flat { box-shadow: none; }
 .cs-card--raised { background: var(--cs-color-surface-raised); }
-.cs-card--featured { background: var(--_cs-light, var(--cs-color-surface-raised))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 12%, var(--cs-color-surface-panel))); border-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); box-shadow: var(--cs-shadow-md); }
+.cs-card--featured { background: color-mix(in oklab, var(--cs-accent) 12%, var(--cs-color-surface-raised)); border-color: var(--cs-accent); box-shadow: var(--cs-shadow-md); }
 .cs-card--interactive { cursor: pointer; transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
 .cs-card--interactive:hover { border-color: var(--cs-accent); box-shadow: var(--cs-shadow-md); }
 .cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-sm); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
@@ -41,7 +41,7 @@
 
 /* Tooltip */
 .cs-tooltip { position: relative; display: inline-flex; }
-.cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: nowrap; max-inline-size: 240px; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }
+.cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: normal; inline-size: max-content; max-inline-size: 240px; overflow-wrap: break-word; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent), var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }
 .cs-tooltip__bubble::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); border: 5px solid transparent; border-block-start-color: var(--cs-color-brand-umber); }
 .cs-tooltip:not([data-managed]):hover .cs-tooltip__bubble, .cs-tooltip:not([data-managed]):focus-within .cs-tooltip__bubble, .cs-tooltip[data-open="true"] .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
 

package/base/feedback.css

@@ -1,7 +1,7 @@
 /* CyberSkill — feedback + status (.cs-*). Semantic colour never the only signal. */
 
 /* Badge — compact status label */
-.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; padding: 4px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
+.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; padding: 3px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
 .cs-badge--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); }
 .cs-badge--ochre { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; }
 [data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--solid { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); }

package/base/glass.css

@@ -8,10 +8,10 @@
  */
 
 /* ---- 1. Composition from token scalars ---- */
-:root {
-  --_cs-border-subtle: var(--_cs-light, color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 18%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-border-default, #4a3a2c) 82%, transparent));
-  --_cs-border-strong: var(--_cs-light, color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 65%, var(--cs-color-text-primary, #45210e)))var(--_cs-dark, color-mix(in oklab, var(--cs-color-border-default, #4a3a2c) 65%, var(--cs-color-text-primary, #f5ead9)));
-  --_cs-surface-scrim: var(--_cs-light, color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 48%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-surface-page, #1a1108) 72%, transparent));
+:root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast] {
+  --_cs-border-subtle: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 76%, transparent);
+  --_cs-border-strong: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 65%, var(--cs-color-text-primary, #45210e));
+  --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 45%, #050403) 58%, transparent);
   --cs-glass-whisper-bg: color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent);
   --cs-glass-whisper-border: transparent;
   --cs-glass-light-bg: color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent);

package/base/interaction.css

@@ -12,7 +12,7 @@
 }
 .cs-button--primary:hover:not(.is-disabled),
 .cs-button--danger:hover:not(.is-disabled) {
-  box-shadow: var(--_cs-light, 0 8px 20px color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 24%, transparent))var(--_cs-dark, var(--cs-shadow-md));
+  box-shadow: var(--cs-shadow-md);
   transform: translateY(-1px);
 }
 .cs-button--primary:active:not(.is-disabled),

package/base/shell.css

@@ -17,7 +17,7 @@
 .cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: var(--cs-font-size-sm); background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }
 .cs-step--done .cs-step__marker { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); border-color: transparent; }
 .cs-step--done:not(:last-child)::after { background: var(--cs-accent-strong); }
-.cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-accent-on); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }
+.cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: inset 0 0 0 2px var(--cs-accent-strong), 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }
 .cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
 .cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
 
@@ -28,8 +28,8 @@
 
 /* Drawer */
 .cs-drawer-scrim { position: fixed; inset: 0; background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); z-index: var(--cs-depth-modal); }
-.cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: var(--_cs-light, -18px 0 48px color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 22%, transparent))var(--_cs-dark, var(--cs-shadow-xl)); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }
-.cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: var(--_cs-light, 18px 0 48px color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 22%, transparent))var(--_cs-dark, var(--cs-shadow-xl)); animation-name: cs-drawer-in-left; }
+.cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-xl); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }
+.cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-xl); animation-name: cs-drawer-in-left; }
 .cs-drawer__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }
 .cs-drawer__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; }
 .cs-drawer__close { margin-inline-start: auto; border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); display: grid; place-items: center; padding: 4px; }

package/base/typography.css

@@ -3,6 +3,7 @@
  * Built on the semantic aliases in tokens/typography.css. */
 .cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
 .cs-display--fluid { font-family: var(--cs-heading-family); font-size: clamp(2.25rem, 1.5rem + 3.5vw, var(--cs-text-display)); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
+:lang(vi) :is(.cs-display, .cs-display--fluid) { line-height: 1.22; }
 .cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
 .cs-h1--fluid { font-family: var(--cs-heading-family); font-size: clamp(1.75rem, 1.25rem + 2vw, var(--cs-text-h1)); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
 .cs-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }