@cyberskill/design 2.0.0 → 2.1.0

package/tokens/variables.css

@@ -90,12 +90,12 @@
   --cs-font-weight-semibold: 600;
   --cs-font-weight-bold: 700;
   --cs-font-weight-extrabold: 800;
-  --cs-font-lineHeight-body: 1.5;
-  --cs-font-line-height-body: var(--cs-font-lineHeight-body);
-  --cs-font-lineHeight-heading: 1.35;
-  --cs-font-line-height-heading: var(--cs-font-lineHeight-heading);
-  --cs-font-lineHeight-tight: 1.15;
-  --cs-font-line-height-tight: var(--cs-font-lineHeight-tight);
+  --cs-font-lineHeight-body: var(--cs-font-line-height-body);
+  --cs-font-line-height-body: 1.5;
+  --cs-font-lineHeight-heading: var(--cs-font-line-height-heading);
+  --cs-font-line-height-heading: 1.35;
+  --cs-font-lineHeight-tight: var(--cs-font-line-height-tight);
+  --cs-font-line-height-tight: 1.15;
   --cs-font-size-2xs: 0.6875rem;
   --cs-font-size-xs: 0.75rem;
   --cs-font-size-sm: 0.875rem;
@@ -223,45 +223,45 @@
   --cs-component-button-primary-fg: #FFFFFF;
   --cs-component-button-gap: 8px;
   --cs-component-button-radius: 8px;
-  --cs-component-button-xs-paddingY: 4px;
-  --cs-component-button-xs-padding-y: var(--cs-component-button-xs-paddingY);
-  --cs-component-button-xs-paddingX: 10px;
-  --cs-component-button-xs-padding-x: var(--cs-component-button-xs-paddingX);
-  --cs-component-button-xs-minHeight: 28px;
-  --cs-component-button-xs-min-height: var(--cs-component-button-xs-minHeight);
-  --cs-component-button-xs-minWidth: 28px;
-  --cs-component-button-xs-min-width: var(--cs-component-button-xs-minWidth);
-  --cs-component-button-xs-minHeight-coarse: 44px;
-  --cs-component-button-xs-min-height-coarse: var(--cs-component-button-xs-minHeight-coarse);
-  --cs-component-button-sm-paddingY: 8px;
-  --cs-component-button-sm-padding-y: var(--cs-component-button-sm-paddingY);
-  --cs-component-button-sm-paddingX: 14px;
-  --cs-component-button-sm-padding-x: var(--cs-component-button-sm-paddingX);
-  --cs-component-button-sm-minHeight: 36px;
-  --cs-component-button-sm-min-height: var(--cs-component-button-sm-minHeight);
-  --cs-component-button-sm-minHeight-coarse: 44px;
-  --cs-component-button-sm-min-height-coarse: var(--cs-component-button-sm-minHeight-coarse);
-  --cs-component-button-md-paddingY: 12px;
-  --cs-component-button-md-padding-y: var(--cs-component-button-md-paddingY);
-  --cs-component-button-md-paddingX: 20px;
-  --cs-component-button-md-padding-x: var(--cs-component-button-md-paddingX);
-  --cs-component-button-md-minHeight: 44px;
-  --cs-component-button-md-min-height: var(--cs-component-button-md-minHeight);
-  --cs-component-button-md-minHeight-coarse: 44px;
-  --cs-component-button-md-min-height-coarse: var(--cs-component-button-md-minHeight-coarse);
-  --cs-component-button-lg-paddingY: 16px;
-  --cs-component-button-lg-padding-y: var(--cs-component-button-lg-paddingY);
-  --cs-component-button-lg-paddingX: 28px;
-  --cs-component-button-lg-padding-x: var(--cs-component-button-lg-paddingX);
-  --cs-component-button-lg-minHeight: 52px;
-  --cs-component-button-lg-min-height: var(--cs-component-button-lg-minHeight);
+  --cs-component-button-xs-paddingY: var(--cs-component-button-xs-padding-y);
+  --cs-component-button-xs-padding-y: 4px;
+  --cs-component-button-xs-paddingX: var(--cs-component-button-xs-padding-x);
+  --cs-component-button-xs-padding-x: 10px;
+  --cs-component-button-xs-minHeight: var(--cs-component-button-xs-min-height);
+  --cs-component-button-xs-min-height: 28px;
+  --cs-component-button-xs-minWidth: var(--cs-component-button-xs-min-width);
+  --cs-component-button-xs-min-width: 28px;
+  --cs-component-button-xs-minHeight-coarse: var(--cs-component-button-xs-min-height-coarse);
+  --cs-component-button-xs-min-height-coarse: 44px;
+  --cs-component-button-sm-paddingY: var(--cs-component-button-sm-padding-y);
+  --cs-component-button-sm-padding-y: 8px;
+  --cs-component-button-sm-paddingX: var(--cs-component-button-sm-padding-x);
+  --cs-component-button-sm-padding-x: 14px;
+  --cs-component-button-sm-minHeight: var(--cs-component-button-sm-min-height);
+  --cs-component-button-sm-min-height: 36px;
+  --cs-component-button-sm-minHeight-coarse: var(--cs-component-button-sm-min-height-coarse);
+  --cs-component-button-sm-min-height-coarse: 44px;
+  --cs-component-button-md-paddingY: var(--cs-component-button-md-padding-y);
+  --cs-component-button-md-padding-y: 12px;
+  --cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x);
+  --cs-component-button-md-padding-x: 20px;
+  --cs-component-button-md-minHeight: var(--cs-component-button-md-min-height);
+  --cs-component-button-md-min-height: 44px;
+  --cs-component-button-md-minHeight-coarse: var(--cs-component-button-md-min-height-coarse);
+  --cs-component-button-md-min-height-coarse: 44px;
+  --cs-component-button-lg-paddingY: var(--cs-component-button-lg-padding-y);
+  --cs-component-button-lg-padding-y: 16px;
+  --cs-component-button-lg-paddingX: var(--cs-component-button-lg-padding-x);
+  --cs-component-button-lg-padding-x: 28px;
+  --cs-component-button-lg-minHeight: var(--cs-component-button-lg-min-height);
+  --cs-component-button-lg-min-height: 52px;
   --cs-component-textfield-border-default: #BFA58F;
-  --cs-component-textfield-paddingY: 10px;
-  --cs-component-textfield-padding-y: var(--cs-component-textfield-paddingY);
-  --cs-component-textfield-paddingX: 12px;
-  --cs-component-textfield-padding-x: var(--cs-component-textfield-paddingX);
-  --cs-component-textfield-minHeight: 44px;
-  --cs-component-textfield-min-height: var(--cs-component-textfield-minHeight);
+  --cs-component-textfield-paddingY: var(--cs-component-textfield-padding-y);
+  --cs-component-textfield-padding-y: 10px;
+  --cs-component-textfield-paddingX: var(--cs-component-textfield-padding-x);
+  --cs-component-textfield-padding-x: 12px;
+  --cs-component-textfield-minHeight: var(--cs-component-textfield-min-height);
+  --cs-component-textfield-min-height: 44px;
 }
 [data-theme="dark"] {
   --cs-component-button-primary-bg: #f4ba17;
@@ -997,53 +997,53 @@
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 :is(:root, [data-theme], [data-cs-element], [data-cs-contrast], [data-theme][data-cs-element][data-cs-variant]) {
-  --cs-color-brand-umber: var(--_cs-light, var(--_cs-light-color-brand-umber)) var(--_cs-dark, var(--_cs-dark-color-brand-umber));
-  --cs-color-brand-ochre: var(--_cs-light, var(--_cs-light-color-brand-ochre)) var(--_cs-dark, var(--_cs-dark-color-brand-ochre));
-  --cs-color-surface-page: var(--_cs-light, var(--_cs-light-color-surface-page)) var(--_cs-dark, var(--_cs-dark-color-surface-page));
-  --cs-color-surface-panel: var(--_cs-light, var(--_cs-light-color-surface-panel)) var(--_cs-dark, var(--_cs-dark-color-surface-panel));
-  --cs-color-surface-raised: var(--_cs-light, var(--_cs-light-color-surface-raised)) var(--_cs-dark, var(--_cs-dark-color-surface-raised));
-  --cs-color-text-primary: var(--_cs-light, var(--_cs-light-color-text-primary)) var(--_cs-dark, var(--_cs-dark-color-text-primary));
-  --cs-color-text-inverse: var(--_cs-light, var(--_cs-light-color-text-inverse)) var(--_cs-dark, var(--_cs-dark-color-text-inverse));
-  --cs-color-text-accent: var(--_cs-light, var(--_cs-light-color-text-accent)) var(--_cs-dark, var(--_cs-dark-color-text-accent));
-  --cs-color-text-muted: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-text-muted)) var(--_cs-dark, var(--_cs-dark-color-text-muted))) var(--_cs-high, var(--_cs-light, #45210E) var(--_cs-dark, #F5EAD9));
-  --cs-color-semantic-success: var(--_cs-light, var(--_cs-light-color-semantic-success)) var(--_cs-dark, var(--_cs-dark-color-semantic-success));
-  --cs-color-semantic-danger: var(--_cs-light, var(--_cs-light-color-semantic-danger)) var(--_cs-dark, var(--_cs-dark-color-semantic-danger));
-  --cs-color-semantic-warning: var(--_cs-light, var(--_cs-light-color-semantic-warning)) var(--_cs-dark, var(--_cs-dark-color-semantic-warning));
-  --cs-color-semantic-info: var(--_cs-light, var(--_cs-light-color-semantic-info)) var(--_cs-dark, var(--_cs-dark-color-semantic-info));
-  --cs-color-semantic-success-fg: var(--_cs-light, var(--_cs-light-color-semantic-success-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-success-fg));
-  --cs-color-semantic-danger-fg: var(--_cs-light, var(--_cs-light-color-semantic-danger-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-danger-fg));
-  --cs-color-semantic-warning-fg: var(--_cs-light, var(--_cs-light-color-semantic-warning-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-warning-fg));
-  --cs-color-semantic-info-fg: var(--_cs-light, var(--_cs-light-color-semantic-info-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-info-fg));
-  --cs-color-semantic-success-text: var(--_cs-light, var(--_cs-light-color-semantic-success-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-success-text));
-  --cs-color-semantic-danger-text: var(--_cs-light, var(--_cs-light-color-semantic-danger-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-danger-text));
-  --cs-color-semantic-warning-text: var(--_cs-light, var(--_cs-light-color-semantic-warning-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-warning-text));
-  --cs-color-semantic-info-text: var(--_cs-light, var(--_cs-light-color-semantic-info-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-info-text));
-  --cs-doc-ink: var(--_cs-light, var(--_cs-light-doc-ink)) var(--_cs-dark, var(--_cs-dark-doc-ink));
-  --cs-doc-slate: var(--_cs-light, var(--_cs-light-doc-slate)) var(--_cs-dark, var(--_cs-dark-doc-slate));
-  --cs-doc-fill: var(--_cs-light, var(--_cs-light-doc-fill)) var(--_cs-dark, var(--_cs-dark-doc-fill));
-  --cs-doc-fill-ink: var(--_cs-light, var(--_cs-light-doc-fill-ink)) var(--_cs-dark, var(--_cs-dark-doc-fill-ink));
-  --cs-color-accent-ochre: var(--_cs-light, var(--_cs-light-color-accent-ochre)) var(--_cs-dark, var(--_cs-dark-color-accent-ochre));
-  --cs-color-border-default: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-border-default)) var(--_cs-dark, var(--_cs-dark-color-border-default))) var(--_cs-high, var(--_cs-light, #9a8060) var(--_cs-dark, #7a6450));
-  --cs-color-link: var(--_cs-light, var(--_cs-light-color-link)) var(--_cs-dark, var(--_cs-dark-color-link));
-  --cs-color-link-hover: var(--_cs-light, var(--_cs-light-color-link-hover)) var(--_cs-dark, var(--_cs-dark-color-link-hover));
-  --cs-component-button-primary-bg: var(--_cs-light, var(--_cs-light-component-button-primary-bg)) var(--_cs-dark, var(--_cs-dark-component-button-primary-bg));
-  --cs-component-button-primary-fg: var(--_cs-light, var(--_cs-light-component-button-primary-fg)) var(--_cs-dark, var(--_cs-dark-component-button-primary-fg));
-  --cs-component-textfield-border-default: var(--_cs-light, var(--_cs-light-component-textfield-border-default)) var(--_cs-dark, var(--_cs-dark-component-textfield-border-default));
-  --cs-shadow-xs: var(--_cs-light, var(--_cs-light-shadow-xs)) var(--_cs-dark, var(--_cs-dark-shadow-xs));
-  --cs-shadow-sm: var(--_cs-light, var(--_cs-light-shadow-sm)) var(--_cs-dark, var(--_cs-dark-shadow-sm));
-  --cs-shadow-md: var(--_cs-light, var(--_cs-light-shadow-md)) var(--_cs-dark, var(--_cs-dark-shadow-md));
-  --cs-shadow-lg: var(--_cs-light, var(--_cs-light-shadow-lg)) var(--_cs-dark, var(--_cs-dark-shadow-lg));
-  --cs-shadow-xl: var(--_cs-light, var(--_cs-light-shadow-xl)) var(--_cs-dark, var(--_cs-dark-shadow-xl));
-  --cs-accent: var(--_cs-light, var(--_cs-light-accent)) var(--_cs-dark, var(--_cs-dark-accent));
-  --cs-accent-strong: var(--_cs-light, var(--_cs-light-accent-strong)) var(--_cs-dark, var(--_cs-dark-accent-strong));
-  --cs-accent-bright: var(--_cs-light, var(--_cs-light-accent-bright)) var(--_cs-dark, var(--_cs-dark-accent-bright));
-  --cs-accent-on: var(--_cs-light, var(--_cs-light-accent-on)) var(--_cs-dark, var(--_cs-dark-accent-on));
-  --cs-accent-on-strong: var(--_cs-light, var(--_cs-light-accent-on-strong)) var(--_cs-dark, var(--_cs-dark-accent-on-strong));
-  --cs-accent-tint: var(--_cs-light, var(--_cs-light-accent-tint)) var(--_cs-dark, var(--_cs-dark-accent-tint));
-  --cs-accent-ink: var(--_cs-light, var(--_cs-light-accent-ink)) var(--_cs-dark, var(--_cs-dark-accent-ink));
-  --cs-accent-glow: var(--_cs-light, var(--_cs-light-accent-glow)) var(--_cs-dark, var(--_cs-dark-accent-glow));
-  --cs-accent-grad-a: var(--_cs-light, var(--_cs-light-accent-grad-a)) var(--_cs-dark, var(--_cs-dark-accent-grad-a));
-  --cs-accent-grad-b: var(--_cs-light, var(--_cs-light-accent-grad-b)) var(--_cs-dark, var(--_cs-dark-accent-grad-b));
+  --cs-color-brand-umber: var(--_cs-light, var(--_cs-light-color-brand-umber))var(--_cs-dark, var(--_cs-dark-color-brand-umber));
+  --cs-color-brand-ochre: var(--_cs-light, var(--_cs-light-color-brand-ochre))var(--_cs-dark, var(--_cs-dark-color-brand-ochre));
+  --cs-color-surface-page: var(--_cs-light, var(--_cs-light-color-surface-page))var(--_cs-dark, var(--_cs-dark-color-surface-page));
+  --cs-color-surface-panel: var(--_cs-light, var(--_cs-light-color-surface-panel))var(--_cs-dark, var(--_cs-dark-color-surface-panel));
+  --cs-color-surface-raised: var(--_cs-light, var(--_cs-light-color-surface-raised))var(--_cs-dark, var(--_cs-dark-color-surface-raised));
+  --cs-color-text-primary: var(--_cs-light, var(--_cs-light-color-text-primary))var(--_cs-dark, var(--_cs-dark-color-text-primary));
+  --cs-color-text-inverse: var(--_cs-light, var(--_cs-light-color-text-inverse))var(--_cs-dark, var(--_cs-dark-color-text-inverse));
+  --cs-color-text-accent: var(--_cs-light, var(--_cs-light-color-text-accent))var(--_cs-dark, var(--_cs-dark-color-text-accent));
+  --cs-color-text-muted: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-text-muted))var(--_cs-dark, var(--_cs-dark-color-text-muted)))var(--_cs-high, var(--_cs-light, #45210E)var(--_cs-dark, #F5EAD9));
+  --cs-color-semantic-success: var(--_cs-light, var(--_cs-light-color-semantic-success))var(--_cs-dark, var(--_cs-dark-color-semantic-success));
+  --cs-color-semantic-danger: var(--_cs-light, var(--_cs-light-color-semantic-danger))var(--_cs-dark, var(--_cs-dark-color-semantic-danger));
+  --cs-color-semantic-warning: var(--_cs-light, var(--_cs-light-color-semantic-warning))var(--_cs-dark, var(--_cs-dark-color-semantic-warning));
+  --cs-color-semantic-info: var(--_cs-light, var(--_cs-light-color-semantic-info))var(--_cs-dark, var(--_cs-dark-color-semantic-info));
+  --cs-color-semantic-success-fg: var(--_cs-light, var(--_cs-light-color-semantic-success-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-success-fg));
+  --cs-color-semantic-danger-fg: var(--_cs-light, var(--_cs-light-color-semantic-danger-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-danger-fg));
+  --cs-color-semantic-warning-fg: var(--_cs-light, var(--_cs-light-color-semantic-warning-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-warning-fg));
+  --cs-color-semantic-info-fg: var(--_cs-light, var(--_cs-light-color-semantic-info-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-info-fg));
+  --cs-color-semantic-success-text: var(--_cs-light, var(--_cs-light-color-semantic-success-text))var(--_cs-dark, var(--_cs-dark-color-semantic-success-text));
+  --cs-color-semantic-danger-text: var(--_cs-light, var(--_cs-light-color-semantic-danger-text))var(--_cs-dark, var(--_cs-dark-color-semantic-danger-text));
+  --cs-color-semantic-warning-text: var(--_cs-light, var(--_cs-light-color-semantic-warning-text))var(--_cs-dark, var(--_cs-dark-color-semantic-warning-text));
+  --cs-color-semantic-info-text: var(--_cs-light, var(--_cs-light-color-semantic-info-text))var(--_cs-dark, var(--_cs-dark-color-semantic-info-text));
+  --cs-doc-ink: var(--_cs-light, var(--_cs-light-doc-ink))var(--_cs-dark, var(--_cs-dark-doc-ink));
+  --cs-doc-slate: var(--_cs-light, var(--_cs-light-doc-slate))var(--_cs-dark, var(--_cs-dark-doc-slate));
+  --cs-doc-fill: var(--_cs-light, var(--_cs-light-doc-fill))var(--_cs-dark, var(--_cs-dark-doc-fill));
+  --cs-doc-fill-ink: var(--_cs-light, var(--_cs-light-doc-fill-ink))var(--_cs-dark, var(--_cs-dark-doc-fill-ink));
+  --cs-color-accent-ochre: var(--_cs-light, var(--_cs-light-color-accent-ochre))var(--_cs-dark, var(--_cs-dark-color-accent-ochre));
+  --cs-color-border-default: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-border-default))var(--_cs-dark, var(--_cs-dark-color-border-default)))var(--_cs-high, var(--_cs-light, #9a8060)var(--_cs-dark, #7a6450));
+  --cs-color-link: var(--_cs-light, var(--_cs-light-color-link))var(--_cs-dark, var(--_cs-dark-color-link));
+  --cs-color-link-hover: var(--_cs-light, var(--_cs-light-color-link-hover))var(--_cs-dark, var(--_cs-dark-color-link-hover));
+  --cs-component-button-primary-bg: var(--_cs-light, var(--_cs-light-component-button-primary-bg))var(--_cs-dark, var(--_cs-dark-component-button-primary-bg));
+  --cs-component-button-primary-fg: var(--_cs-light, var(--_cs-light-component-button-primary-fg))var(--_cs-dark, var(--_cs-dark-component-button-primary-fg));
+  --cs-component-textfield-border-default: var(--_cs-light, var(--_cs-light-component-textfield-border-default))var(--_cs-dark, var(--_cs-dark-component-textfield-border-default));
+  --cs-shadow-xs: var(--_cs-light, var(--_cs-light-shadow-xs))var(--_cs-dark, var(--_cs-dark-shadow-xs));
+  --cs-shadow-sm: var(--_cs-light, var(--_cs-light-shadow-sm))var(--_cs-dark, var(--_cs-dark-shadow-sm));
+  --cs-shadow-md: var(--_cs-light, var(--_cs-light-shadow-md))var(--_cs-dark, var(--_cs-dark-shadow-md));
+  --cs-shadow-lg: var(--_cs-light, var(--_cs-light-shadow-lg))var(--_cs-dark, var(--_cs-dark-shadow-lg));
+  --cs-shadow-xl: var(--_cs-light, var(--_cs-light-shadow-xl))var(--_cs-dark, var(--_cs-dark-shadow-xl));
+  --cs-accent: var(--_cs-light, var(--_cs-light-accent))var(--_cs-dark, var(--_cs-dark-accent));
+  --cs-accent-strong: var(--_cs-light, var(--_cs-light-accent-strong))var(--_cs-dark, var(--_cs-dark-accent-strong));
+  --cs-accent-bright: var(--_cs-light, var(--_cs-light-accent-bright))var(--_cs-dark, var(--_cs-dark-accent-bright));
+  --cs-accent-on: var(--_cs-light, var(--_cs-light-accent-on))var(--_cs-dark, var(--_cs-dark-accent-on));
+  --cs-accent-on-strong: var(--_cs-light, var(--_cs-light-accent-on-strong))var(--_cs-dark, var(--_cs-dark-accent-on-strong));
+  --cs-accent-tint: var(--_cs-light, var(--_cs-light-accent-tint))var(--_cs-dark, var(--_cs-dark-accent-tint));
+  --cs-accent-ink: var(--_cs-light, var(--_cs-light-accent-ink))var(--_cs-dark, var(--_cs-dark-accent-ink));
+  --cs-accent-glow: var(--_cs-light, var(--_cs-light-accent-glow))var(--_cs-dark, var(--_cs-dark-accent-glow));
+  --cs-accent-grad-a: var(--_cs-light, var(--_cs-light-accent-grad-a))var(--_cs-dark, var(--_cs-dark-accent-grad-a));
+  --cs-accent-grad-b: var(--_cs-light, var(--_cs-light-accent-grad-b))var(--_cs-dark, var(--_cs-dark-accent-grad-b));
 }
 /* Source: tokens/styles.css */
 :root {
@@ -1072,27 +1072,27 @@
   --cs-density-control-gap: 6px;
 
   --cs-component-button-gap: 6px;
-  --cs-component-button-xs-paddingY: 3px;
-  --cs-component-button-xs-padding-y: var(--cs-component-button-xs-paddingY);
-  --cs-component-button-xs-paddingX: 8px;
-  --cs-component-button-xs-padding-x: var(--cs-component-button-xs-paddingX);
-  --cs-component-button-sm-paddingY: 6px;
-  --cs-component-button-sm-padding-y: var(--cs-component-button-sm-paddingY);
-  --cs-component-button-sm-paddingX: 12px;
-  --cs-component-button-sm-padding-x: var(--cs-component-button-sm-paddingX);
-  --cs-component-button-md-paddingY: 10px;
-  --cs-component-button-md-padding-y: var(--cs-component-button-md-paddingY);
-  --cs-component-button-md-paddingX: 16px;
-  --cs-component-button-md-padding-x: var(--cs-component-button-md-paddingX);
-  --cs-component-button-lg-paddingY: 12px;
-  --cs-component-button-lg-padding-y: var(--cs-component-button-lg-paddingY);
-  --cs-component-button-lg-paddingX: 22px;
-  --cs-component-button-lg-padding-x: var(--cs-component-button-lg-paddingX);
+  --cs-component-button-xs-paddingY: var(--cs-component-button-xs-padding-y);
+  --cs-component-button-xs-padding-y: 3px;
+  --cs-component-button-xs-paddingX: var(--cs-component-button-xs-padding-x);
+  --cs-component-button-xs-padding-x: 8px;
+  --cs-component-button-sm-paddingY: var(--cs-component-button-sm-padding-y);
+  --cs-component-button-sm-padding-y: 6px;
+  --cs-component-button-sm-paddingX: var(--cs-component-button-sm-padding-x);
+  --cs-component-button-sm-padding-x: 12px;
+  --cs-component-button-md-paddingY: var(--cs-component-button-md-padding-y);
+  --cs-component-button-md-padding-y: 10px;
+  --cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x);
+  --cs-component-button-md-padding-x: 16px;
+  --cs-component-button-lg-paddingY: var(--cs-component-button-lg-padding-y);
+  --cs-component-button-lg-padding-y: 12px;
+  --cs-component-button-lg-paddingX: var(--cs-component-button-lg-padding-x);
+  --cs-component-button-lg-padding-x: 22px;
 
-  --cs-component-textfield-paddingY: 8px;
-  --cs-component-textfield-padding-y: var(--cs-component-textfield-paddingY);
-  --cs-component-textfield-paddingX: 10px;
-  --cs-component-textfield-padding-x: var(--cs-component-textfield-paddingX);
+  --cs-component-textfield-paddingY: var(--cs-component-textfield-padding-y);
+  --cs-component-textfield-padding-y: 8px;
+  --cs-component-textfield-paddingX: var(--cs-component-textfield-padding-x);
+  --cs-component-textfield-padding-x: 10px;
 }
 [data-cs-density="comfortable"] {
   --cs-density-space-1: var(--cs-space-1);
@@ -1103,26 +1103,26 @@
   --cs-density-space-6: var(--cs-space-6);
   --cs-density-control-gap: var(--cs-component-button-gap);
   --cs-component-button-gap: 8px;
-  --cs-component-button-xs-paddingY: 4px;
-  --cs-component-button-xs-padding-y: var(--cs-component-button-xs-paddingY);
-  --cs-component-button-xs-paddingX: 10px;
-  --cs-component-button-xs-padding-x: var(--cs-component-button-xs-paddingX);
-  --cs-component-button-sm-paddingY: 8px;
-  --cs-component-button-sm-padding-y: var(--cs-component-button-sm-paddingY);
-  --cs-component-button-sm-paddingX: 14px;
-  --cs-component-button-sm-padding-x: var(--cs-component-button-sm-paddingX);
-  --cs-component-button-md-paddingY: 12px;
-  --cs-component-button-md-padding-y: var(--cs-component-button-md-paddingY);
-  --cs-component-button-md-paddingX: 20px;
-  --cs-component-button-md-padding-x: var(--cs-component-button-md-paddingX);
-  --cs-component-button-lg-paddingY: 16px;
-  --cs-component-button-lg-padding-y: var(--cs-component-button-lg-paddingY);
-  --cs-component-button-lg-paddingX: 28px;
-  --cs-component-button-lg-padding-x: var(--cs-component-button-lg-paddingX);
-  --cs-component-textfield-paddingY: 10px;
-  --cs-component-textfield-padding-y: var(--cs-component-textfield-paddingY);
-  --cs-component-textfield-paddingX: 12px;
-  --cs-component-textfield-padding-x: var(--cs-component-textfield-paddingX);
+  --cs-component-button-xs-padding-y: 4px;
+  --cs-component-button-xs-paddingY: var(--cs-component-button-xs-padding-y);
+  --cs-component-button-xs-padding-x: 10px;
+  --cs-component-button-xs-paddingX: var(--cs-component-button-xs-padding-x);
+  --cs-component-button-sm-padding-y: 8px;
+  --cs-component-button-sm-paddingY: var(--cs-component-button-sm-padding-y);
+  --cs-component-button-sm-padding-x: 14px;
+  --cs-component-button-sm-paddingX: var(--cs-component-button-sm-padding-x);
+  --cs-component-button-md-padding-y: 12px;
+  --cs-component-button-md-paddingY: var(--cs-component-button-md-padding-y);
+  --cs-component-button-md-padding-x: 20px;
+  --cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x);
+  --cs-component-button-lg-padding-y: 16px;
+  --cs-component-button-lg-paddingY: var(--cs-component-button-lg-padding-y);
+  --cs-component-button-lg-padding-x: 28px;
+  --cs-component-button-lg-paddingX: var(--cs-component-button-lg-padding-x);
+  --cs-component-textfield-padding-y: 10px;
+  --cs-component-textfield-paddingY: var(--cs-component-textfield-padding-y);
+  --cs-component-textfield-padding-x: 12px;
+  --cs-component-textfield-paddingX: var(--cs-component-textfield-padding-x);
 }
 [data-cs-contrast="high"] {
   --cs-color-border-default: #9a8060;

package/tokens/viewer.html

@@ -3,14 +3,15 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="Interactive W3C DTCG and CSS design token explorer for CyberSkill.">
 <title>CyberSkill · Tokens</title>
 <link rel="stylesheet" href="../styles.css">
 <style>
-  *{box-sizing:border-box}html,body{height:100%}
-  body{margin:0;font-family:var(--cs-font-family-ui);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);display:flex;flex-direction:column}
+  *{box-sizing:border-box}html,body{height:100%;overflow-x:clip}
+  button,input,select{min-block-size:32px}
+  body{margin:0;font-family:var(--cs-font-family-ui);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);display:flex;flex-direction:column;overflow-x:clip}
   .bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;background:var(--cs-color-surface-panel);border-block-end:1px solid var(--cs-color-border-default)}
-  .bar h1{font-size:15px;font-weight:800;margin:0;letter-spacing:-.01em}
-  .bar h1 b{color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
+  .bar h1{font-size:15px;font-weight:800;margin:0;letter-spacing:-.01em;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
   .modes{display:flex;gap:4px;padding:3px;border-radius:999px;background:var(--cs-color-surface-page);border:1px solid var(--cs-color-border-default)}
   .modes button{appearance:none;border:0;background:transparent;font:600 12.5px var(--cs-font-family-ui);padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--cs-color-text-primary)}
   .modes button[aria-pressed="true"]{background:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));color:var(--_cs-light,var(--cs-color-text-inverse)) var(--_cs-dark,var(--cs-color-brand-umber))}
@@ -19,20 +20,21 @@
   .filters input{width:min(220px,40vw)}
   .meta{font:12px/1.4 var(--cs-font-family-mono);font-weight:600;color:var(--cs-color-text-primary)}
   .chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;background:var(--cs-color-surface-panel);border-block-end:1px solid var(--cs-color-border-default)}
-  .chips button{appearance:none;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);font:600 11.5px var(--cs-font-family-ui);padding:5px 10px;border-radius:999px;cursor:pointer}
+  .chips button{appearance:none;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);font:600 12px var(--cs-font-family-ui);padding:5px 10px;border-radius:999px;cursor:pointer}
   .chips button[aria-pressed="true"]{background:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));color:var(--_cs-light,var(--cs-color-text-inverse)) var(--_cs-dark,var(--cs-color-brand-umber));border-color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
-  .chips button .n{font-family:var(--cs-font-family-mono);font-size:10px;opacity:.85;margin-inline-start:4px}
-  .panel{flex:1;min-height:0;overflow:auto}
+  .chips :is(.n,.num){font-family:var(--cs-font-family-mono);font-size:12px;opacity:.85;margin-inline-start:4px}
+  .panel{flex:1;min-height:0;min-width:0;max-width:100%;overflow:auto}
   .panel.hide{display:none}
   table{width:100%;border-collapse:collapse;font-size:13px}
   th,td{text-align:start;padding:8px 12px;border-block-end:1px solid var(--cs-color-border-default);vertical-align:top}
-  th{position:sticky;top:0;background:var(--cs-color-surface-panel);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--cs-color-text-primary);z-index:1;font-weight:800}
+  thead{position:sticky;top:1px;z-index:1}
+  th{background:var(--cs-color-surface-panel);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--cs-color-text-primary);font-weight:800}
   tr:hover td{background:var(--cs-color-surface-raised)}
   .swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--cs-color-border-default);vertical-align:middle;margin-inline-end:6px}
   code{font-family:var(--cs-font-family-mono);font-size:12px}
   .path{font-family:var(--cs-font-family-mono);font-size:12px;word-break:break-all}
   .group{color:var(--cs-color-text-primary);font-size:12px;font-weight:600}
-  .copy{appearance:none;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-text-primary));font:700 10.5px var(--cs-font-family-mono);padding:3px 7px;border-radius:6px;cursor:pointer;margin-inline-start:6px}
+  .copy{appearance:none;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-text-primary));font:700 12px var(--cs-font-family-mono);padding:4px 8px;border-radius:6px;cursor:pointer;margin-inline-start:6px}
   .copy:hover{border-color:var(--cs-color-brand-ochre)}
   .copy.ok{background:#dcfce7;color:#166534;border-color:#16a34a55}
   #raw{margin:0;padding:16px 18px;font:12px/1.5 var(--cs-font-family-mono);white-space:pre;overflow:auto;min-height:100%;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary)}
@@ -40,10 +42,12 @@
   .src{font-size:12px;color:var(--cs-color-text-primary);font-weight:600}
   .src select{font:inherit;font-size:12px;padding:4px 8px;border-radius:6px;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary)}
   .src-help{margin:0;padding:8px 16px;font:12.5px/1.45 var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-panel);border-block-end:1px solid var(--cs-color-border-default)}
-  .src-help code{font-family:var(--cs-font-family-mono);font-size:11.5px}
-  .toast{position:fixed;inset-block-end:16px;inset-inline-end:16px;background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse);font:600 12.5px var(--cs-font-family-ui);padding:8px 12px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
+  .src-help code{font-family:var(--cs-font-family-mono);font-size:12px}
+  @media(max-width:640px) and (pointer:fine){th,td{padding:6px 4px;word-break:break-word}.path,td:nth-child(3){max-width:85px;word-break:break-all}}
+  .toast{position:fixed;inset-block-end:16px;inset-inline-end:16px;background:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));color:var(--_cs-light,var(--cs-color-text-inverse)) var(--_cs-dark,var(--cs-color-brand-umber));font:600 12.5px var(--cs-font-family-ui);padding:8px 12px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
   .toast.on{opacity:1}
   @media(pointer:coarse){
+    html,body{overflow-x:visible}
     button,input,select{min-inline-size:44px;min-block-size:44px}
     select{block-size:44px}
     body{height:auto;min-block-size:100vh}

package/ui_kits/deck/index.html

@@ -4,6 +4,7 @@
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="description" content="Brand deck — CyberSkill: 16:9 presentation — browser print and host capture hooks" />
 <title>CyberSkill · Brand deck</title>
 <!-- Preserve relative assets for literal/clean entry URLs and nested mounts. -->
 <script>
@@ -21,6 +22,7 @@
 <link rel="stylesheet" href="../../styles.css" />
 <style>
   html, body { margin: 0; background: #2a1a0d; }
+  .cs-skip:focus-visible, deck-stage:focus-visible, deck-stage:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
   deck-stage:not(:defined) { visibility: hidden; }
   .sl { box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--cs-font-family-ui); }
   .sl-umber { background: var(--cs-color-brand-umber); color: #fff; }
@@ -47,8 +49,8 @@
   .quote { font-size: 72px; font-weight: 700; line-height: 1.22; max-width: 1400px; }
   .quote .hl { color: var(--cs-color-brand-ochre); }
   .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 24px; }
-  .stat .v { font-size: 96px; font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-text-accent); line-height: 1; }
-  .stat .l { font-size: 26px; opacity: .85; margin-top: 10px; }
+  .stat .v { font-size: 96px; font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-text-accent); line-height: 1; font-variant-numeric: tabular-nums; }
+  .stat .l { font-size: 26px; opacity: .85; margin-top: 10px; font-variant-numeric: tabular-nums; }
   .close-wrap { align-items: center; text-align: center; justify-content: center; }
   .close-wrap img { width: 128px; height: 128px; }
 </style>

package/ui_kits/status-hub/StatusHub.jsx

@@ -13,8 +13,8 @@ function SearchGlyph() {
 }
 function ThemeGlyph({ dark }) {
   return dark
-    ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"/></svg>
-    : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"/></svg>;
+    ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"/></svg>
+    : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"/></svg>;
 }
 
 /* Bilingual UI copy — kit fully EN⇄VN (owner decision, Jul 2026).
@@ -30,19 +30,19 @@ const T = {
     status: "Status", all: "All", of: "of",
     key: "Key", project: "Project", squad: "Squad", owner: "Owner", progress: "Progress",
     thisWeek: "This week", tasks: "Tasks", risk: "Risk", close: "Close",
-    langBtn: "VN", theme: "Toggle theme",
+    langBtn: "VN", langToggle: "Toggle language", theme: "Toggle theme",
   },
   vi: {
     sub: "CyberSkill · một trang, ba lăng kính · Hiện Thực Hoá Ý Chí",
     updated: "Cập nhật", portfolio: "Danh mục",
     projects: "Dự án", inprog: "Đang làm", shipped: "Đã ra mắt", blocked: "Bị chặn", planned: "Dự kiến", avg: "Tiến độ TB",
-    velocity: "Tốc độ · task giao / tuần", perShipped: " đã giao",
+    velocity: "Nhịp độ · công việc hoàn tất / tuần", perShipped: " đã hoàn tất",
     nowTitle: "Đang ra mắt",
     search: "Tìm dự án…", view: "Chế độ xem", lenses: { board: "Bảng công việc", table: "Bảng dữ liệu", releases: "Phát hành" },
     status: "Trạng thái", all: "Tất cả", of: "trên",
     key: "Mã", project: "Dự án", squad: "Nhóm", owner: "Phụ trách", progress: "Tiến độ",
     thisWeek: "Tuần này", tasks: "Công việc", risk: "Rủi ro", close: "Đóng",
-    langBtn: "EN", theme: "Đổi giao diện",
+    langBtn: "EN", langToggle: "Đổi ngôn ngữ", theme: "Đổi giao diện",
   },
 };
 const statusLabels = (t) => ({ done: t.shipped, active: t.inprog, hold: t.blocked, todo: t.planned });
@@ -166,7 +166,7 @@ function StatusHub() {
           </div>
           <div className="hd-side">
             <p className="hd-meta">{t.updated}<br />{VI ? VI.updated : D.updated}</p>
-            <button className="btn ghost" onClick={() => setLang((l) => l === "en" ? "vi" : "en")} aria-label="Toggle language" style={{ fontWeight: 700, fontSize: 13 }}>{t.langBtn}</button>
+            <button className="btn ghost" onClick={() => setLang((l) => l === "en" ? "vi" : "en")} aria-label={t.langToggle} style={{ fontWeight: 700, fontSize: 13 }}>{t.langBtn}</button>
             <button className="btn ghost" onClick={() => setDark((v) => !v)} aria-label={t.theme}><ThemeGlyph dark={dark} /></button>
           </div>
         </div>
@@ -255,7 +255,7 @@ function StatusHub() {
 
         <div id="lens-panel" role="tabpanel" aria-labelledby={`lens-${lens}`} tabIndex={0}>
         {lens === "board" && (
-          <div className="grid">
+          <div className="grid" data-slot="board">
             {shown.map((p0) => { const p = loc(p0); return (
               <button className={"card" + (p.status === "active" ? " hot" : "")} key={p.key} aria-haspopup="dialog" onClick={() => setSel(p0)}>
                 <div className="card-h"><h3><span className="k mono">{p.key}</span> · {p.name}</h3><span className="pct">{p.pct}%</span></div>

package/ui_kits/status-hub/data.js

@@ -46,12 +46,12 @@ window.SH_DATA = {
 // Vietnamese variants (kit fully EN⇄VN per owner decision, Jul 2026). window.SH_VI
 window.SH_VI = {
   updated: "18/07/2026, 13:20 ICT",
-  blurbs: { CDS: "Liên kết component Liquid Glass + 15 gói Ngũ Hành.", GENIE: "Proxy Claude không cần khóa; luồng tiếp nhận điều ước theo kịch bản.", SITE: "Trang giới thiệu song ngữ kể chuyện; thu lead đang chạy.", OS: "Kho nhớ BRAIN + cổng nghiệm thu có con người.", AUDIT: "Bộ kiểm định trung lập 125 tiêu chí; giữ hạng L3.", TOKENS: "DTCG → CSS/TS/Swift/Kotlin/Flutter/Figma." },
-  risks: { GENIE: "Tài sản GLB là phụ thuộc ngoài khó — chưa chốt đặt hàng (TASK-CHAR-021).", OS: "Bị chặn bởi hạ tầng: sổ cái nguồn gốc cần dịch vụ ký số (mục tiêu Q1 2027)." },
+  blurbs: { CDS: "Liên kết component Liquid Glass + 15 gói Ngũ Hành.", GENIE: "Proxy Claude không lưu khóa; luồng nhận điều ước theo kịch bản.", SITE: "Trang giới thiệu song ngữ dẫn chuyện; biểu mẫu nhận yêu cầu đang mở.", OS: "Bộ nhớ BRAIN + bước nghiệm thu có người duyệt.", AUDIT: "Bộ kiểm định trung lập 125 tiêu chí; giữ hạng L3.", TOKENS: "DTCG → CSS/TS/Swift/Kotlin/Flutter/Figma." },
+  risks: { GENIE: "Mô hình 3D GLB phụ thuộc bên ngoài — chưa chốt đơn đặt hàng (TASK-CHAR-021).", OS: "Bị chặn bởi hạ tầng: sổ cái nguồn gốc cần dịch vụ ký số (mục tiêu Q1 2027)." },
   owners: { "Design Lead": "Trưởng thiết kế", "AI Lead": "Trưởng AI", "Web Lead": "Trưởng web", "Eng Lead": "Trưởng kỹ thuật", "DesignOps": "DesignOps" },
   squads: { Platform: "Nền tảng", AI: "AI", Growth: "Tăng trưởng" },
   updatedRel: { "2h ago": "2 giờ trước", "5h ago": "5 giờ trước", "1h ago": "1 giờ trước", "1d ago": "1 ngày trước", "3d ago": "3 ngày trước", "6h ago": "6 giờ trước" },
   relWhen: { "v1.6.0": "Tuần này", "v1.5.1": "04/07/2026", "v1.4.0": "13/06/2026", "v1.3.0": "14/05/2026" },
   relTitles: { "v1.6.0": "Liên kết Glass + gói Ngũ Hành v2", "v1.5.1": "15 gói Ngũ Hành ra mắt", "v1.4.0": "Liquid Glass vào mã", "v1.3.0": "Tài sản thương hiệu + Logo" },
-  relItems: { "v1.6.0": ["Liên kết component .cs-surface-* (tùy chọn)", "Trình kiểm gói Ngũ Hành v2 (0 cảnh báo trên 15 gói)", "Kiểm tra lại APCA cho chế độ tối"], "v1.5.1": ["Cả 15 gói lên trạng thái đã ra mắt", "Regression ảnh chụp từng gói", "Script dựng gallery"], "v1.4.0": ["Scalar --cs-glass-* + --cs-depth-*", "Lớp chất liệu glass.css", "Fallback khi giảm độ trong suốt"], "v1.3.0": ["Master mark chính thức ra mắt", "<Logo> React từ artwork gốc", "Light thành theme mặc định"] },
+  relItems: { "v1.6.0": ["Liên kết component .cs-surface-* (tùy chọn)", "Trình kiểm gói Ngũ Hành v2 (0 cảnh báo trên 15 gói)", "Kiểm tra lại APCA cho chế độ tối"], "v1.5.1": ["Cả 15 gói lên trạng thái đã ra mắt", "Kiểm thử đối chiếu ảnh chụp từng gói", "Script dựng trang trưng bày"], "v1.4.0": ["Scalar --cs-glass-* + --cs-depth-*", "Lớp chất liệu glass.css", "Fallback khi giảm độ trong suốt"], "v1.3.0": ["Master mark chính thức ra mắt", "<Logo> React từ bản vẽ gốc", "Giao diện Sáng làm mặc định"] },
 };

package/ui_kits/status-hub/index.html

@@ -4,6 +4,7 @@
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="description" content="Status Hub — portfolio dashboard: KPIs, board / table / releases lenses, detail drawer" />
 <title>CyberSkill · Status Hub</title>
 <!-- Preserve relative assets for literal/clean entry URLs and nested mounts. -->
 <script>

package/ui_kits/status-hub/login.html

@@ -4,13 +4,14 @@
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="description" content="Status Hub — sign in: Umber split login with brand panel + form controls (default / loading / error / invalid)" />
 <title data-vi="CyberSkill · Đăng nhập">CyberSkill · Sign in</title>
 <link rel="icon" href="../../assets/favicon.svg" />
 <link rel="stylesheet" href="../../styles.css" />
 <style>
   html, body { margin: 0; min-height: 100vh; }
-  .login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
-  .pane-brand { position: relative; overflow: hidden; background: var(--cs-color-brand-umber); color: #fff; padding: 56px 60px; display: flex; flex-direction: column; }
+  .login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
+  .pane-brand { position: relative; overflow: hidden; background: var(--cs-color-brand-umber); color: #fff; padding: 56px 60px 96px; display: flex; flex-direction: column; }
   .pane-brand::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-tho.webp"); background-size: cover; background-position: center; opacity: .42; }
   .pane-brand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(26,17,8,.35), rgba(26,17,8,.8)); }
   .pane-brand > * { position: relative; z-index: 1; }
@@ -18,18 +19,19 @@
   .brand-lock img { width: 40px; height: 40px; }
   .pane-brand .brand-headline { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: var(--cs-color-brand-ochre); margin: auto 0 8px; }
   .pane-brand p { font-size: 17px; opacity: .9; margin: 0; max-width: 420px; }
-  .pane-form { display: grid; place-items: center; padding: 40px 24px; background: var(--cs-color-surface-page); }
+  .pane-form { display: grid; place-items: center; padding: 40px 24px; background: var(--cs-color-surface-page); min-width: 0; }
   .box { width: min(400px, 100%); }
   .box h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
   .box .sub { color: var(--cs-color-text-muted); margin: 0 0 28px; }
   form { display: grid; gap: 16px; }
-  .rowbetween { display: flex; align-items: center; justify-content: space-between; }
+  .rowbetween { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
+  .rowbetween button { white-space: nowrap; }
   .fine { text-align: center; font-size: 13px; color: var(--cs-color-text-muted); margin-top: 4px; }
-  .state-bar { max-width: calc(100vw - 96px); position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); border-radius: 12px; box-shadow: var(--cs-shadow-md); font-size: 13px; }
+  .state-bar { max-width: calc(100% - 96px); position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: 12px; box-shadow: var(--cs-shadow-xs); font-size: 13px; }
   .state-bar label { flex-wrap: wrap; display: flex; align-items: center; gap: 6px; color: var(--cs-color-text-muted); }
   .state-bar select { font: inherit; }
   [hidden] { display: none !important; }
-  @media (max-width: 820px) { .state-bar { position: static; margin: 0 76px 20px 20px; } .login { grid-template-columns: 1fr; } .pane-brand { display: none; } }
+  @media (max-width: 820px) { .state-bar { position: static; margin: 0 76px 20px 20px; } .login { grid-template-columns: minmax(0, 1fr); } .pane-brand { display: none; } }
 </style>
 </head>
 <body>

package/ui_kits/status-hub/project.html

@@ -4,6 +4,7 @@
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="description" content="Status Hub — project detail: Full project view: breadcrumb, steps, tasks, timeline, risk" />
 <title>CyberSkill · Design System v1.6</title>
 <link rel="icon" href="../../assets/favicon.svg" />
 <link rel="stylesheet" href="../../styles.css" />
@@ -13,19 +14,19 @@
   .pd { max-width: 1000px; margin: 0 auto; padding: 22px 28px 72px;
     /* G1 / TASK-IMP-025 — local CQ host (page is not under `.wrap`). */
     container-type: inline-size; container-name: cs; }
-  .crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cs-color-text-muted); margin: 18px 0 16px; }
-  .crumb a { color: var(--cs-color-text-muted); text-decoration: none; }
+  .crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cs-color-text-muted); margin: 18px 0 16px; flex-wrap: wrap; }
+  .crumb a { color: var(--cs-color-text-muted); text-decoration: none; white-space: nowrap; }
   .crumb a:hover { color: var(--cs-color-text-accent); }
   .crumb .sep { color: var(--cs-color-border-default); }
   .crumb .cur { color: var(--cs-color-text-primary); font-weight: 600; }
   .pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
   .pd-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
-  .pd-head h1 .k { font-family: var(--cs-font-family-mono); color: var(--cs-color-text-primary); }
+  .pd-head h1 .k { font-family: var(--cs-font-family-mono); }
   .pd-head p { margin: 0; color: var(--cs-color-text-muted); max-width: 560px; }
   .pd-actions { display: flex; gap: 10px; }
   .pd-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 20px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: 14px; padding: 20px 22px; margin: 20px 0; }
-  .stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--cs-color-text-muted); }
-  .stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }
+  .stat .l { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--cs-color-text-muted); }
+  .stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; }
   .pd-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
   .panel h2.sec { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cs-color-text-muted); margin: 0 0 14px; }
   .steps-wrap { margin: 6px 0 4px; }
@@ -33,7 +34,7 @@
   .task:first-of-type { border-top: 0; }
   .task .mono { font-family: var(--cs-font-family-mono); font-size: 12.5px; color: var(--cs-color-text-primary); }
   .task .nm { flex: 1; font-size: 14px; }
-  .toggle { 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); display: grid; place-items: center; }
+  .toggle { 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-xs); display: grid; place-items: center; }
   @media (max-width: 820px) { .pd-grid { grid-template-columns: 1fr; } }
   @container cs (max-width: 768px) { .pd-grid { grid-template-columns: 1fr; } }
 </style>