@cyberskill/design 1.1.1 → 1.2.0

package/tokens/tokens.json

@@ -1,7 +1,7 @@
 {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "generated": "2026-07-23",
     "note": "Generated from tokens/*.css. Root grouped by category; theme/element scopes carry overrides only. Regenerate after any token change (see docs/conventions.md)."
   },
@@ -20,6 +20,10 @@
       "--cs-color-semantic-danger": "#B42318",
       "--cs-color-semantic-warning": "#92400E",
       "--cs-color-semantic-info": "#1D4ED8",
+      "--cs-color-semantic-success-fg": "#FFFFFF",
+      "--cs-color-semantic-danger-fg": "#FFFFFF",
+      "--cs-color-semantic-warning-fg": "#FFFFFF",
+      "--cs-color-semantic-info-fg": "#FFFFFF",
       "--cs-color-accent-ochre": "#F4BA17",
       "--cs-color-border-default": "#E7D9C6",
       "--cs-color-link": "#6E3B0E",
@@ -49,7 +53,8 @@
       "--cs-component-textfield-border-default": "#BFA58F",
       "--cs-component-textfield-paddingY": "10px",
       "--cs-component-textfield-paddingX": "12px",
-      "--cs-component-textfield-minHeight": "44px"
+      "--cs-component-textfield-minHeight": "44px",
+      "--cs-focus-ring": "3px"
     },
     "accent": {
       "--cs-accent": "#F4BA17",
@@ -60,7 +65,8 @@
       "--cs-accent-ink": "#45210E",
       "--cs-accent-glow": "rgba(244, 186, 23, 0.48)",
       "--cs-accent-grad-a": "#F4BA17",
-      "--cs-accent-grad-b": "#FCAF91"
+      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-accent-on-strong": "#1A1108"
     },
     "depth": {
       "--cs-depth-bg": "0",
@@ -68,7 +74,9 @@
       "--cs-depth-card": "10",
       "--cs-depth-nav": "50",
       "--cs-depth-modal": "100",
-      "--cs-depth-toast": "200"
+      "--cs-depth-toast": "200",
+      "--cs-depth-dropdown": "60",
+      "--cs-depth-overlay": "80"
     },
     "glass": {
       "--cs-glass-whisper-blur": "8px",
@@ -133,7 +141,8 @@
       "--cs-breakpoint-2xl": "1536px"
     },
     "container": {
-      "--cs-container-max": "1320px"
+      "--cs-container-max": "1320px",
+      "--cs-prose-measure": "45rem"
     },
     "font": {
       "--cs-font-family-ui": "'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif",
@@ -147,6 +156,7 @@
       "--cs-font-lineHeight-body": "1.5",
       "--cs-font-lineHeight-heading": "1.35",
       "--cs-font-lineHeight-tight": "1.15",
+      "--cs-font-size-2xs": "0.6875rem",
       "--cs-font-size-xs": "0.75rem",
       "--cs-font-size-sm": "0.875rem",
       "--cs-font-size-base": "1rem",
@@ -167,6 +177,7 @@
       "--cs-text-body-lg": "var(--cs-font-size-md)",
       "--cs-text-body": "var(--cs-font-size-base)",
       "--cs-text-secondary": "var(--cs-font-size-sm)",
+      "--cs-text-micro": "var(--cs-font-size-2xs)",
       "--cs-text-caption": "var(--cs-font-size-xs)",
       "--cs-text-eyebrow": "var(--cs-font-size-xs)"
     },
@@ -185,6 +196,12 @@
       "--cs-icon-sm": "16px",
       "--cs-icon-md": "20px",
       "--cs-icon-lg": "24px"
+    },
+    "doc": {
+      "--cs-doc-ink": "#1A1614",
+      "--cs-doc-slate": "#3F4C55",
+      "--cs-doc-fill": "#FDE68A",
+      "--cs-doc-fill-ink": "#1A1614"
     }
   },
   "themes": {
@@ -200,6 +217,10 @@
       "--cs-color-semantic-danger": "#F87171",
       "--cs-color-semantic-warning": "#FBBF24",
       "--cs-color-semantic-info": "#7CB2FB",
+      "--cs-color-semantic-success-fg": "#1a1108",
+      "--cs-color-semantic-danger-fg": "#1a1108",
+      "--cs-color-semantic-warning-fg": "#1a1108",
+      "--cs-color-semantic-info-fg": "#1a1108",
       "--cs-color-border-default": "#4a3a2c",
       "--cs-color-link": "#f4ba17",
       "--cs-color-link-hover": "#f5ead9",
@@ -224,6 +245,10 @@
       "--cs-color-semantic-danger": "#F87171",
       "--cs-color-semantic-warning": "#FBBF24",
       "--cs-color-semantic-info": "#7CB2FB",
+      "--cs-color-semantic-success-fg": "#1a1108",
+      "--cs-color-semantic-danger-fg": "#1a1108",
+      "--cs-color-semantic-warning-fg": "#1a1108",
+      "--cs-color-semantic-info-fg": "#1a1108",
       "--cs-color-border-default": "#4a3a2c",
       "--cs-color-link": "#f4ba17",
       "--cs-color-link-hover": "#f5ead9",
@@ -243,6 +268,7 @@
       "--cs-accent-strong": "#90825E",
       "--cs-accent-bright": "#F6EBCC",
       "--cs-accent-on": "#292414",
+      "--cs-accent-on-strong": "#1A1108",
       "--cs-accent-tint": "#FBF7EA",
       "--cs-accent-ink": "#292414",
       "--cs-accent-glow": "rgba(248, 233, 192, 0.48)",
@@ -256,6 +282,7 @@
       "--cs-accent-strong": "#A47D17",
       "--cs-accent-bright": "#F4BA17",
       "--cs-accent-on": "#45210E",
+      "--cs-accent-on-strong": "#1A1108",
       "--cs-accent-tint": "#FBF4E9",
       "--cs-accent-ink": "#45210E",
       "--cs-accent-glow": "rgba(244, 186, 23, 0.48)",
@@ -267,6 +294,7 @@
       "--cs-accent-strong": "#201300",
       "--cs-accent-bright": "#DEC7A2",
       "--cs-accent-on": "#2D220E",
+      "--cs-accent-on-strong": "#FFFFFF",
       "--cs-accent-tint": "#FFF6E7",
       "--cs-accent-ink": "#2D220E",
       "--cs-accent-glow": "rgba(81, 56, 1, 0.48)",
@@ -280,6 +308,7 @@
       "--cs-accent-strong": "#967C75",
       "--cs-accent-bright": "#FCE6DF",
       "--cs-accent-on": "#2C211E",
+      "--cs-accent-on-strong": "#1A1108",
       "--cs-accent-tint": "#FEF4F2",
       "--cs-accent-ink": "#2C211E",
       "--cs-accent-glow": "rgba(255, 225, 216, 0.48)",
@@ -293,6 +322,7 @@
       "--cs-accent-strong": "#B47054",
       "--cs-accent-bright": "#FED3C3",
       "--cs-accent-on": "#381B10",
+      "--cs-accent-on-strong": "#1A1108",
       "--cs-accent-tint": "#FFF4F0",
       "--cs-accent-ink": "#381B10",
       "--cs-accent-glow": "rgba(252, 175, 145, 0.48)",
@@ -306,6 +336,7 @@
       "--cs-accent-strong": "#280D00",
       "--cs-accent-bright": "#F1BEA4",
       "--cs-accent-on": "#361D0F",
+      "--cs-accent-on-strong": "#FFFFFF",
       "--cs-accent-tint": "#FFF4EF",
       "--cs-accent-ink": "#361D0F",
       "--cs-accent-glow": "rgba(98, 43, 6, 0.48)",
@@ -319,6 +350,7 @@
       "--cs-accent-strong": "#5A8A90",
       "--cs-accent-bright": "#CDF4F9",
       "--cs-accent-on": "#13282B",
+      "--cs-accent-on-strong": "#1A1108",
       "--cs-accent-tint": "#EBFAFC",
       "--cs-accent-ink": "#13282B",
       "--cs-accent-glow": "rgba(192, 245, 252, 0.48)",
@@ -332,6 +364,7 @@
       "--cs-accent-strong": "#108EA0",
       "--cs-accent-bright": "#99EEFF",
       "--cs-accent-on": "#012A30",
+      "--cs-accent-on-strong": "#1A1108",
       "--cs-accent-tint": "#E7FBFF",
       "--cs-accent-ink": "#012A30",
       "--cs-accent-glow": "rgba(46, 219, 247, 0.48)",
@@ -345,6 +378,7 @@
       "--cs-accent-strong": "#011A21",
       "--cs-accent-bright": "#A8D3E0",
       "--cs-accent-on": "#10282F",
+      "--cs-accent-on-strong": "#FFFFFF",
       "--cs-accent-tint": "#EAFAFF",
       "--cs-accent-ink": "#10282F",
       "--cs-accent-glow": "rgba(0, 69, 84, 0.48)",
@@ -358,6 +392,7 @@
       "--cs-accent-strong": "#7C8965",
       "--cs-accent-bright": "#E5F1D2",
       "--cs-accent-on": "#212617",
+      "--cs-accent-on-strong": "#1A1108",
       "--cs-accent-tint": "#F4F9ED",
       "--cs-accent-ink": "#212617",
       "--cs-accent-glow": "rgba(225, 241, 200, 0.48)",
@@ -371,6 +406,7 @@
       "--cs-accent-strong": "#629122",
       "--cs-accent-bright": "#C5ED9C",
       "--cs-accent-on": "#182A00",
+      "--cs-accent-on-strong": "#1A1108",
       "--cs-accent-tint": "#EFFCE3",
       "--cs-accent-ink": "#182A00",
       "--cs-accent-glow": "rgba(163, 215, 104, 0.48)",
@@ -384,6 +420,7 @@
       "--cs-accent-strong": "#051D00",
       "--cs-accent-bright": "#B0D8A3",
       "--cs-accent-on": "#162A0E",
+      "--cs-accent-on-strong": "#FFFFFF",
       "--cs-accent-tint": "#ECFDE7",
       "--cs-accent-ink": "#162A0E",
       "--cs-accent-glow": "rgba(26, 74, 1, 0.48)",
@@ -397,6 +434,7 @@
       "--cs-accent-strong": "#947F65",
       "--cs-accent-bright": "#FBE8D2",
       "--cs-accent-on": "#2B2217",
+      "--cs-accent-on-strong": "#1A1108",
       "--cs-accent-tint": "#FDF5ED",
       "--cs-accent-ink": "#2B2217",
       "--cs-accent-glow": "rgba(254, 229, 199, 0.48)",
@@ -410,6 +448,7 @@
       "--cs-accent-strong": "#AC780B",
       "--cs-accent-bright": "#FDD89F",
       "--cs-accent-on": "#312002",
+      "--cs-accent-on-strong": "#1A1108",
       "--cs-accent-tint": "#FFF5E7",
       "--cs-accent-ink": "#312002",
       "--cs-accent-glow": "rgba(243, 185, 88, 0.48)",
@@ -423,6 +462,7 @@
       "--cs-accent-strong": "#1F1400",
       "--cs-accent-bright": "#DCC8A2",
       "--cs-accent-on": "#2D220E",
+      "--cs-accent-on-strong": "#FFFFFF",
       "--cs-accent-tint": "#FEF6E7",
       "--cs-accent-ink": "#2D220E",
       "--cs-accent-glow": "rgba(80, 57, 1, 0.48)",

package/tokens/typography.css

@@ -30,6 +30,7 @@
   --cs-font-lineHeight-tight: 1.15;
 
   /* Size ramp (rem-based, 16px root) */
+  --cs-font-size-2xs: 0.6875rem; /* 11 — micro numerals only (documented exception) */
   --cs-font-size-xs: 0.75rem;    /* 12 — captions, chips */
   --cs-font-size-sm: 0.875rem;   /* 14 — secondary UI */
   --cs-font-size-base: 1rem;     /* 16 — body */
@@ -52,6 +53,7 @@
   --cs-text-body-lg: var(--cs-font-size-md);    /* lead paragraphs */
   --cs-text-body: var(--cs-font-size-base);
   --cs-text-secondary: var(--cs-font-size-sm);
+  --cs-text-micro: var(--cs-font-size-2xs);
   --cs-text-caption: var(--cs-font-size-xs);
   --cs-text-eyebrow: var(--cs-font-size-xs);    /* uppercase, tracked */
 

package/ui_kits/deck/index.html

@@ -40,6 +40,9 @@
 </style>
 </head>
 <body>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<main id="main">
+
 <deck-stage width="1920" height="1080">
   <section class="sl sl-umber sl-pad" data-label="Title">
     <div class="lockup" style="margin-bottom:56px"><img src="../../assets/logo-mark.svg" alt="CyberSkill" /><b>CyberSkill</b></div>
@@ -116,5 +119,6 @@
   if(link) link.addEventListener("click", function(){ apply(document.documentElement.getAttribute("lang")!=="vi"); });
 })();
 </script>
+</main>
 </body>
 </html>

package/ui_kits/status-hub/StatusHub.jsx

@@ -139,6 +139,7 @@ function StatusHub() {
 
   return (
     <div className="sh" lang={lang} data-theme={dark ? "dark" : undefined}>
+      <a className="cs-skip" href="#main" style={{ position: "absolute", left: -999, width: 1, height: 1, overflow: "hidden" }}>Skip to content</a>
       <header className="hd">
         <div className="hd-in">
           <div className="hd-id">
@@ -156,7 +157,7 @@ function StatusHub() {
         </div>
       </header>
 
-      <div className="wrap">
+      <main id="main" className="wrap">
         <div className="deck">
           <section className="panel">
             <h2>{t.portfolio}</h2>
@@ -195,9 +196,34 @@ function StatusHub() {
         <div className="bar">
           <div className="bar-top">
             <label className="srch"><SearchGlyph /><input placeholder={t.search} value={q} onChange={(e) => setQ(e.target.value)} /></label>
-            <div className="lenses" role="tablist" aria-label={t.view}>
+            <div
+              className="lenses"
+              role="tablist"
+              aria-label={t.view}
+              onKeyDown={(e) => {
+                const order = ["board", "table", "releases"];
+                const i = order.indexOf(lens);
+                let next = i;
+                if (e.key === "ArrowRight") next = (i + 1) % order.length;
+                else if (e.key === "ArrowLeft") next = (i - 1 + order.length) % order.length;
+                else if (e.key === "Home") next = 0;
+                else if (e.key === "End") next = order.length - 1;
+                else return;
+                e.preventDefault();
+                setLens(order[next]);
+                const tabs = e.currentTarget.querySelectorAll('[role="tab"]');
+                tabs[next] && tabs[next].focus && tabs[next].focus();
+              }}
+            >
               {["board", "table", "releases"].map((l) => (
-                <button key={l} className="ln" role="tab" aria-selected={lens === l} onClick={() => setLens(l)}>{t.lenses[l]}</button>
+                <button
+                  key={l}
+                  className="ln"
+                  role="tab"
+                  aria-selected={lens === l}
+                  tabIndex={lens === l ? 0 : -1}
+                  onClick={() => setLens(l)}
+                >{t.lenses[l]}</button>
               ))}
             </div>
             <label className="facet">{t.status}
@@ -260,7 +286,7 @@ function StatusHub() {
         <p className="ft">{lang === "vi"
           ? <>CyberSkill Status Hub — bản tái hiện UI kit của design system. Dựng trên token <span className="mono">styles.css</span>. Turn Your Will Into Real.</>
           : <>CyberSkill Status Hub — a design-system UI kit recreation. Built on <span className="mono">styles.css</span> tokens. Turn Your Will Into Real.</>}</p>
-      </div>
+      </main>
 
       <Drawer p={sel && loc(sel)} onClose={() => setSel(null)} t={t} />
     </div>

package/ui_kits/status-hub/index.html

@@ -9,9 +9,9 @@
 <link rel="stylesheet" href="../../styles.css" />
 <link rel="stylesheet" href="status.css" />
 <style>html,body{margin:0;background:var(--cs-color-surface-page);min-height:100vh}</style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="data.js"></script>
 </head>
 <body>

package/ui_kits/status-hub/login.html

@@ -29,6 +29,9 @@
 </style>
 </head>
 <body>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<main id="main">
+
 <div class="login">
   <div class="pane-brand">
     <div class="brand-lock"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</div>
@@ -61,5 +64,6 @@
     this.textContent = dark ? "☾" : "☀";
   });
 </script>
+</main>
 </body>
 </html>

package/ui_kits/status-hub/project.html

@@ -36,6 +36,9 @@
 </style>
 </head>
 <body>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<main id="main">
+
 <div class="sh">
   <header class="hd">
     <div class="hd-in">
@@ -133,5 +136,6 @@
     this.textContent = dark ? "☾" : "☀";
   });
 </script>
+</main>
 </body>
 </html>

package/ui_kits/status-hub/settings.html

@@ -22,9 +22,12 @@
   .danger .t { font-weight: 700; }
   .actions { display: flex; gap: 10px; justify-content: flex-end; }
   @media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }
+  .cs-skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
+  .cs-skip:focus{position:fixed;left:12px;top:12px;z-index:9999;width:auto;height:auto;padding:10px 14px;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);border:2px solid var(--cs-color-brand-ochre);border-radius:8px;overflow:visible}
 </style>
 </head>
 <body>
+<a class="cs-skip" href="#main">Skip to content</a>
 <div class="sh">
   <header class="hd">
     <div class="hd-in">
@@ -36,15 +39,15 @@
     </div>
   </header>
 
-  <div class="wrap">
-    <nav class="cs-tabs" style="margin-top:24px" aria-label="Settings sections">
-      <button class="cs-tab" aria-selected="true">Profile</button>
-      <button class="cs-tab">Notifications</button>
-      <button class="cs-tab">Appearance</button>
-      <button class="cs-tab">Team <span class="cs-tab__count">6</span></button>
-    </nav>
+  <main id="main" class="wrap">
+    <div class="cs-tabs" style="margin-top:24px;overflow-x:auto" role="tablist" aria-label="Settings sections">
+      <button type="button" class="cs-tab" role="tab" aria-selected="true" tabindex="0" id="tab-profile" aria-controls="panel-settings">Profile</button>
+      <button type="button" class="cs-tab" role="tab" aria-selected="false" tabindex="-1" id="tab-notifications" aria-controls="panel-settings">Notifications</button>
+      <button type="button" class="cs-tab" role="tab" aria-selected="false" tabindex="-1" id="tab-appearance" aria-controls="panel-settings">Appearance</button>
+      <button type="button" class="cs-tab" role="tab" aria-selected="false" tabindex="-1" id="tab-team" aria-controls="panel-settings">Team <span class="cs-tab__count">6</span></button>
+    </div>
 
-    <div class="set-grid">
+    <div class="set-grid" id="panel-settings" role="tabpanel" aria-labelledby="tab-profile">
       <section class="panel">
         <h3 class="sec">Profile</h3>
         <p class="hint">This is how you appear across the Status Hub.</p>
@@ -60,10 +63,10 @@
         <h3 class="sec">Notifications</h3>
         <p class="hint">We keep it quiet — only what you ask for.</p>
         <div class="cs-scroll-area" style="max-block-size:220px;padding-inline-end:6px" tabindex="0" aria-label="Notification preferences">
-          <div class="toggle-row"><div><div class="t">Release notes</div><div class="d">A summary each time a project ships. Bilingual (EN + VN).</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
-          <div class="toggle-row"><div><div class="t">Blocked-project alerts</div><div class="d">Get pinged when a project moves to Blocked.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
-          <div class="toggle-row"><div><div class="t">Weekly velocity digest</div><div class="d">Tasks shipped per week, every Monday morning.</div></div><label class="cs-switch"><input type="checkbox" role="switch" /><span class="cs-switch__track"></span></label></div>
-          <div class="toggle-row"><div><div class="t">Quiet hours</div><div class="d">No pings between 22:00 and 07:00 local time.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t" id="lbl-release">Release notes</div><div class="d">A summary each time a project ships. Bilingual (EN + VN).</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked aria-labelledby="lbl-release" /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t" id="lbl-blocked">Blocked-project alerts</div><div class="d">Get pinged when a project moves to Blocked.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked aria-labelledby="lbl-blocked" /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t" id="lbl-digest">Weekly velocity digest</div><div class="d">Tasks shipped per week, every Monday morning.</div></div><label class="cs-switch"><input type="checkbox" role="switch" aria-labelledby="lbl-digest" /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t" id="lbl-quiet">Quiet hours</div><div class="d">No pings between 22:00 and 07:00 local time.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked aria-labelledby="lbl-quiet" /><span class="cs-switch__track"></span></label></div>
         </div>
       </section>
 
@@ -77,7 +80,7 @@
         <button class="cs-button cs-button--primary">Save changes</button>
       </div>
     </div>
-  </div>
+  </main>
 </div>
 <button id="themeToggle" aria-label="Toggle theme" style="position:fixed;right:20px;bottom:20px;z-index:60;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);width:44px;height:44px;border-radius:999px;cursor:pointer;box-shadow:var(--cs-shadow-md)">☾</button>
 <script>
@@ -86,6 +89,25 @@
     el.setAttribute("data-theme", dark ? "light" : "dark");
     this.textContent = dark ? "☾" : "☀";
   });
+
+  (function(){
+    var tabs=[].slice.call(document.querySelectorAll('[role="tablist"] [role="tab"]'));
+    tabs.forEach(function(tab,i){
+      tab.addEventListener('click',function(){
+        tabs.forEach(function(x,j){ x.setAttribute('aria-selected', j===i?'true':'false'); x.tabIndex=j===i?0:-1; });
+      });
+      tab.addEventListener('keydown',function(e){
+        var cur=tabs.indexOf(document.activeElement); if(cur<0) return;
+        var next=cur;
+        if(e.key==='ArrowRight') next=(cur+1)%tabs.length;
+        else if(e.key==='ArrowLeft') next=(cur-1+tabs.length)%tabs.length;
+        else if(e.key==='Home') next=0;
+        else if(e.key==='End') next=tabs.length-1;
+        else return;
+        e.preventDefault(); tabs[next].focus(); tabs[next].click();
+      });
+    });
+  })();
 </script>
 </body>
 </html>

package/ui_kits/status-hub/status.css

@@ -129,7 +129,7 @@
 .chip.hold { background: var(--cs-color-semantic-danger); color: var(--cs-status-on-fill); border-color: transparent; }
 
 /* board */
-.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--cs-space-4); }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--cs-space-4); }
 .card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
   border-radius: 14px; padding: var(--cs-space-4); cursor: pointer; text-align: left; font: inherit; color: inherit; }
 .card:hover { border-color: var(--cs-color-brand-ochre); }
@@ -197,3 +197,7 @@ table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
 .ft { margin: var(--cs-space-12) 0 var(--cs-space-16); text-align: center; font-size: 12px; color: var(--cs-color-text-muted); }
 
 @media (max-width: 900px) { .deck { grid-template-columns: 1fr; } .hd-meta { text-align: left; } }
+
+/* UX-024 readable measure */
+.panel p, .notes, .release-body, article p { max-inline-size: var(--cs-prose-measure, 45rem); }
+.card, button.card { min-width: 0; }

package/ui_kits/website/Website.jsx

@@ -53,12 +53,21 @@ function Website() {
   const [seed, setSeed] = useState("");
   const [wish, setWish] = useState("");
   const [sent, setSent] = useState(false);
+  const [fabVisible, setFabVisible] = useState(false);
   const t = window.SITE_COPY[loc];
 
   function openChat(s) { setSeed(s || ""); setChat(true); }
 
+  useEffect(() => {
+    const sync = () => setFabVisible(window.scrollY > 140);
+    sync();
+    window.addEventListener("scroll", sync, { passive: true });
+    return () => window.removeEventListener("scroll", sync);
+  }, []);
+
   return (
     <div className="site" data-theme={dark ? "dark" : undefined}>
+      <a className="cs-skip" href="#main" style={{ position: "absolute", left: -999, width: 1, height: 1, overflow: "hidden" }}>Skip to content</a>
       <header className="hdr cs-surface-light">
         <div className="container hdr-in">
           <a className="brand" href="#top"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>
@@ -66,10 +75,11 @@ function Website() {
           <div className="hdr-side">
             <button className="mini" onClick={() => setLoc(loc === "en" ? "vi" : "en")}>{t.langLabel}</button>
             <button className="mini icon" onClick={() => setDark(!dark)} aria-label="Toggle theme"><I name={dark ? "sun" : "moon"} size={18} /></button>
-            <button className="mini" style={{ background: "var(--cs-color-brand-umber)", color: "#fff", borderColor: "transparent" }} onClick={() => openChat("")}>{t.talk}</button>
+            <button className="mini" style={{ background: "var(--cs-color-brand-umber)", color: "var(--cs-color-text-inverse,#fff)", borderColor: "transparent" }} onClick={() => openChat("")}>{t.talk}</button>
           </div>
         </div>
       </header>
+      <main id="main">
 
       <section className="hero" id="top">
         <div className="container hero-in">
@@ -81,7 +91,6 @@ function Website() {
             <div className="wish">
               <input value={wish} onChange={(e) => setWish(e.target.value)} onKeyDown={(e) => e.key === "Enter" && openChat(wish)} placeholder={t.wishPlaceholder} aria-label={t.wishPlaceholder} />
               <button className="btn-gold" onClick={() => openChat(wish)}><I name="sparkle" size={18} />{t.wishCta}</button>
-              <button className="btn-ghost-light" onClick={() => openChat("")}>{t.talk}</button>
             </div>
           </div>
           <div className="hero-art"><img src="../../assets/lumi-poster.webp" alt="Lumi, the golden genie" /></div>
@@ -149,6 +158,7 @@ function Website() {
           )}
         </div>
       </section>
+      </main>
 
       <footer className="ft">
         <div className="container ft-in">
@@ -158,7 +168,19 @@ function Website() {
         </div>
       </footer>
 
-      {!chat && <button className="fab" onClick={() => openChat("")}><img src="../../assets/lumi-poster.webp" alt="" />{t.talk}</button>}
+      {!chat && (
+        <button
+          className="fab"
+          type="button"
+          data-fab-deferred="1"
+          onClick={() => openChat("")}
+          style={{ opacity: fabVisible ? 1 : 0, pointerEvents: fabVisible ? "auto" : "none", transition: "opacity 160ms ease" }}
+          aria-hidden={!fabVisible}
+          tabIndex={fabVisible ? 0 : -1}
+        >
+          <img src="../../assets/lumi-poster.webp" alt="" />{t.talk}
+        </button>
+      )}
       {chat && <Chat t={t} seed={seed} onClose={() => setChat(false)} />}
     </div>
   );

package/ui_kits/website/careers.html

@@ -29,6 +29,9 @@
 </style>
 </head>
 <body>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<main id="main">
+
 <div class="site">
   <header class="hdr cs-surface-light">
     <div class="container hdr-in">
@@ -105,5 +108,6 @@
   if(link) link.addEventListener("click", function(e){e.preventDefault(); apply(document.documentElement.getAttribute("lang")!=="vi");});
 })();
 </script>
+</main>
 </body>
 </html>

package/ui_kits/website/chat.html

@@ -30,12 +30,14 @@
   .lumi-answer-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
   @media (max-width: 820px) { .lumi-page { grid-template-columns: 1fr; } .lumi-side { display: none; } }
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>
 <body>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+
 <div id="root"></div>
 <script type="text/babel">
 const CS = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))] || {};

package/ui_kits/website/index.html

@@ -9,9 +9,9 @@
 <link rel="stylesheet" href="../../styles.css" />
 <link rel="stylesheet" href="site.css" />
 <style>html,body{margin:0}</style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="copy.js"></script>
 </head>
 <body>

package/ui_kits/website/site.css

@@ -29,7 +29,7 @@
 .hero .eyebrow { color: var(--cs-color-brand-ochre); }
 .hero h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 14px 0 6px; color: var(--cs-color-brand-ochre); }
 .hero .vn { font-size: 20px; font-weight: 600; opacity: .9; margin-bottom: 18px; }
-.hero .lead { font-size: 18px; line-height: 1.55; max-width: 620px; opacity: .95; }
+.hero .lead { font-size: 18px; line-height: 1.55; max-width: min(620px, var(--cs-prose-measure, 45rem)); opacity: .95; }
 .wish { display: flex; gap: 10px; margin-top: 26px; max-width: 620px; flex-wrap: wrap; }
 .wish input { flex: 1 1 300px; min-height: 52px; border-radius: var(--cs-radius-full); border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); backdrop-filter: blur(8px); color: #fff; padding: 0 22px; font: 400 15px/1 var(--cs-font-family-ui); }
 .wish input::placeholder { color: rgba(255,255,255,.72); }
@@ -53,7 +53,7 @@
 .sec { padding: 88px 0; }
 .sec-alt { background: var(--cs-color-surface-raised); }
 .sec h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; }
-.sec-lead { font-size: 17px; color: var(--cs-color-text-muted); max-width: 620px; margin: 0 0 40px; }
+.sec-lead { font-size: 17px; color: var(--cs-color-text-muted); max-width: min(620px, var(--cs-prose-measure, 45rem)); margin: 0 0 40px; }
 
 /* services */
 .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cs-space-5); }

package/ui_kits/website/work.html

@@ -35,6 +35,9 @@
 </style>
 </head>
 <body>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<main id="main">
+
 <div class="site">
   <header class="hdr cs-surface-light">
     <div class="container hdr-in">
@@ -115,5 +118,6 @@
   if(link) link.addEventListener("click", function(e){e.preventDefault(); apply(document.documentElement.getAttribute("lang")!=="vi");});
 })();
 </script>
+</main>
 </body>
 </html>