@cyberskill/design 2.5.0 → 2.7.0

package/docs/viewer.html

@@ -81,8 +81,8 @@
 <main><article id="doc" lang="vi" data-state="loading" aria-busy="true"><p style="color:var(--cs-color-text-muted)">Đang tải…</p></article><p id="err" hidden></p></main>
 <script>
 // Generated from _audit/docs-catalog.json; run npm run build:doc-navigation.
-const DOCS_EN=[["Start",[["docs/introduction.md","Introduction"],["docs/four-axes.md","The Four Axes"],["docs/voice-and-language.md","Voice & Language"],["README.md","README"],["SKILL.md","SKILL"],["llms.txt","llms.txt"],["CONTRIBUTING.md","Contributing"],["DESIGN.md","DESIGN (generated spec)"]]],["Guides",[["docs/consuming.md","Consuming & upgrading"],["docs/consumer-grant.md","Consumer grant (npm · UNLICENSED)"],["docs/deploy.md","Deploy (Vercel/VPS)"],["docs/template-schema-v2.md","Template content-schema v2"],["docs/conventions.md","Conventions"],["docs/release-notes.md","Release Notes"],["docs/storybook.md","Storybook (product at /)"],["docs/live-hub.md","Live hub (Storybook at /)"],["docs/hr-suite-sources.md","HR Suite sources (DOCX ↔ templates)"],["docs/design-styles.md","Design styles"],["docs/benchmark-rubric.md","Benchmark rubric"],["docs/products.md","Products"],["docs/contrast-report.md","Contrast report"],["docs/figma.md","Figma"],["docs/template-grammar.md","Template grammar"],["docs/component-api.md","Component API"],["docs/runtime-api.md","Runtime API"],["docs/browser-support.md","Browser support"],["docs/static-html-reference.md","Static HTML reference"],["docs/locale-messages.md","Scoped UI messages"],["docs/component-semantics.md","Component semantics"],["docs/native-refs.md","Native refs"],["docs/template-content.md","Template content"],["docs/floating-panels.md","Floating panels"],["docs/layered-css.md","Layered CSS (opt-in)"],["docs/component-css.md","Component CSS"],["docs/guideline-language.md","Guideline language"],["docs/component-scenarios.md","Component state scenarios"],["docs/template-archetypes.md","Template archetypes"],["docs/component-semantic-contracts.md","Component semantic contracts"],["docs/template-shared-layouts.md","Shared template layouts"]]],["Maintainers",[["docs/doctrine.md","Doctrine"],["docs/decisions.md","Decisions"],["docs/ci-cd.md","CI/CD automation"],["docs/quality-gates.md","Quality gates"],["docs/sync.md","Git sync & hygiene"],["docs/manual-at-matrix.md","Manual AT matrix"],["docs/validation.md","Validation"],["docs/releasing.md","Release preparation"]]]];
-const DOCS_VI=[["Bắt đầu",[["docs/introduction.md","Giới thiệu"],["docs/four-axes.md","Bốn trục"],["docs/voice-and-language.md","Giọng điệu và ngôn ngữ"],["README.md","README"],["SKILL.md","SKILL"],["llms.txt","llms.txt"],["CONTRIBUTING.md","Contributing"],["DESIGN.md","DESIGN (đặc tả được sinh)"]]],["Hướng dẫn",[["docs/consuming.md","Tiêu thụ & nâng cấp"],["docs/consumer-grant.md","Grant consumer (npm · UNLICENSED)"],["docs/deploy.md","Deploy (Vercel/VPS)"],["docs/template-schema-v2.md","Template schema v2"],["docs/conventions.md","Conventions"],["docs/release-notes.md","Ghi chú phát hành"],["docs/storybook.md","Storybook (sản phẩm tại /)"],["docs/live-hub.md","Live hub (Storybook tại /)"],["docs/hr-suite-sources.md","Nguồn HR Suite (DOCX ↔ templates)"],["docs/design-styles.md","Phong cách"],["docs/benchmark-rubric.md","Rubric benchmark"],["docs/products.md","Sản phẩm"],["docs/contrast-report.md","Báo cáo contrast"],["docs/figma.md","Figma"],["docs/template-grammar.md","Ngữ pháp template"],["docs/component-api.md","API component"],["docs/runtime-api.md","API runtime"],["docs/browser-support.md","Hỗ trợ trình duyệt"],["docs/static-html-reference.md","Tham chiếu HTML tĩnh"],["docs/locale-messages.md","Thông điệp UI theo scope"],["docs/component-semantics.md","Ngữ nghĩa component"],["docs/native-refs.md","Ref đến phần tử native"],["docs/template-content.md","Nội dung mẫu"],["docs/floating-panels.md","Panel nổi"],["docs/layered-css.md","CSS theo layer (tùy chọn)"],["docs/component-css.md","CSS theo component"],["docs/guideline-language.md","Ngôn ngữ guideline"],["docs/component-scenarios.md","Kịch bản trạng thái component"],["docs/template-archetypes.md","Mẫu cấu trúc tài liệu"],["docs/component-semantic-contracts.md","Contract ngữ nghĩa component"],["docs/template-shared-layouts.md","Bố cục mẫu dùng chung"]]],["Bảo trì",[["docs/doctrine.md","Học thuyết"],["docs/decisions.md","Quyết định"],["docs/ci-cd.md","CI/CD"],["docs/quality-gates.md","Quality gates"],["docs/sync.md","Đồng bộ Git"],["docs/manual-at-matrix.md","Ma trận AT thủ công"],["docs/validation.md","Kiểm chứng"],["docs/releasing.md","Chuẩn bị phát hành"]]]];
+const DOCS_EN=[["Start",[["docs/introduction.md","Introduction"],["docs/four-axes.md","The Four Axes"],["docs/voice-and-language.md","Voice & Language"],["README.md","README"],["SKILL.md","SKILL"],["llms.txt","llms.txt"],["CONTRIBUTING.md","Contributing"],["DESIGN.md","DESIGN (generated spec)"]]],["Guides",[["docs/consuming.md","Consuming & upgrading"],["docs/consumer-grant.md","Consumer grant (npm · UNLICENSED)"],["docs/deploy.md","Deploy (Vercel/VPS)"],["docs/template-schema-v2.md","Template content-schema v2"],["docs/conventions.md","Conventions"],["docs/release-notes.md","Release Notes"],["docs/storybook.md","Storybook (product at /)"],["docs/live-hub.md","Live hub (Storybook at /)"],["docs/hr-suite-sources.md","HR Suite sources (DOCX ↔ templates)"],["docs/design-styles.md","Design styles"],["docs/benchmark-rubric.md","Benchmark rubric"],["docs/products.md","Products"],["docs/contrast-report.md","Contrast report"],["docs/figma.md","Figma"],["docs/template-grammar.md","Template grammar"],["docs/component-api.md","Component API"],["docs/runtime-api.md","Runtime API"],["docs/browser-support.md","Browser support"],["docs/static-html-reference.md","Static HTML reference"],["docs/locale-messages.md","Scoped UI messages"],["docs/component-semantics.md","Component semantics"],["docs/native-refs.md","Native refs"],["docs/template-content.md","Template content"],["docs/floating-panels.md","Floating panels"],["docs/layered-css.md","Layered CSS (opt-in)"],["docs/component-css.md","Component CSS"],["docs/guideline-language.md","Guideline language"],["docs/component-scenarios.md","Component state scenarios"],["docs/template-archetypes.md","Template archetypes"],["docs/component-semantic-contracts.md","Component semantic contracts"],["docs/template-shared-layouts.md","Shared template layouts"]]],["Maintainers",[["docs/doctrine.md","Doctrine"],["docs/decisions.md","Decisions"],["docs/ci-cd.md","CI/CD automation"],["docs/quality-gates.md","Quality gates"],["docs/sync.md","Git sync & hygiene"],["docs/manual-at-matrix.md","Manual AT matrix"],["docs/validation.md","Validation"],["docs/releasing.md","Release preparation"],["docs/UPSTREAM.md","Upstream patch set"]]]];
+const DOCS_VI=[["Bắt đầu",[["docs/introduction.md","Giới thiệu"],["docs/four-axes.md","Bốn trục"],["docs/voice-and-language.md","Giọng điệu và ngôn ngữ"],["README.md","README"],["SKILL.md","SKILL"],["llms.txt","llms.txt"],["CONTRIBUTING.md","Contributing"],["DESIGN.md","DESIGN (đặc tả được sinh)"]]],["Hướng dẫn",[["docs/consuming.md","Tiêu thụ & nâng cấp"],["docs/consumer-grant.md","Grant consumer (npm · UNLICENSED)"],["docs/deploy.md","Deploy (Vercel/VPS)"],["docs/template-schema-v2.md","Template schema v2"],["docs/conventions.md","Conventions"],["docs/release-notes.md","Ghi chú phát hành"],["docs/storybook.md","Storybook (sản phẩm tại /)"],["docs/live-hub.md","Live hub (Storybook tại /)"],["docs/hr-suite-sources.md","Nguồn HR Suite (DOCX ↔ templates)"],["docs/design-styles.md","Phong cách"],["docs/benchmark-rubric.md","Rubric benchmark"],["docs/products.md","Sản phẩm"],["docs/contrast-report.md","Báo cáo contrast"],["docs/figma.md","Figma"],["docs/template-grammar.md","Ngữ pháp template"],["docs/component-api.md","API component"],["docs/runtime-api.md","API runtime"],["docs/browser-support.md","Hỗ trợ trình duyệt"],["docs/static-html-reference.md","Tham chiếu HTML tĩnh"],["docs/locale-messages.md","Thông điệp UI theo scope"],["docs/component-semantics.md","Ngữ nghĩa component"],["docs/native-refs.md","Ref đến phần tử native"],["docs/template-content.md","Nội dung mẫu"],["docs/floating-panels.md","Panel nổi"],["docs/layered-css.md","CSS theo layer (tùy chọn)"],["docs/component-css.md","CSS theo component"],["docs/guideline-language.md","Ngôn ngữ guideline"],["docs/component-scenarios.md","Kịch bản trạng thái component"],["docs/template-archetypes.md","Mẫu cấu trúc tài liệu"],["docs/component-semantic-contracts.md","Contract ngữ nghĩa component"],["docs/template-shared-layouts.md","Bố cục mẫu dùng chung"]]],["Bảo trì",[["docs/doctrine.md","Học thuyết"],["docs/decisions.md","Quyết định"],["docs/ci-cd.md","CI/CD"],["docs/quality-gates.md","Quality gates"],["docs/sync.md","Đồng bộ Git"],["docs/manual-at-matrix.md","Ma trận AT thủ công"],["docs/validation.md","Kiểm chứng"],["docs/releasing.md","Chuẩn bị phát hành"],["docs/UPSTREAM.md","Bản vá upstream"]]]];
 const ENTRANCE_VI={"README.md":"docs/vi/entrypoints/README.md","SKILL.md":"docs/vi/entrypoints/SKILL.md","llms.txt":"docs/vi/entrypoints/llms.txt","CONTRIBUTING.md":"docs/vi/entrypoints/CONTRIBUTING.md","DESIGN.md":"docs/vi/entrypoints/DESIGN.md"};
 const UI={
   en:{title:'CyberSkill Docs',group:'Doc language',search:'Search all docs',loading:'Loading…',failure:'Could not load ',matches:(count,q)=>count+' match'+(count===1?'':'es')+' for “'+q+'”'},

package/guidelines/atomic-view.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="description" content="Atomic View: Storybook-style browser — every component + variants, live across Theme × Element × Language × Style" />
 <title>CyberSkill — Atomic View</title>
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   *{box-sizing:border-box}
   body{margin:0;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-raised)}
@@ -129,7 +129,7 @@ const {
   ColorPicker,
   Combobox,
   CommandPalette,
-  Comment,
+  Comment: CsComment,
   ConfidenceMeter,
   ContextMenu,
   DataGrid,
@@ -153,7 +153,7 @@ const {
   HoverCard,
   HumanReviewGate,
   Icon,
-  Image,
+  Image: CsImage,
   InlineEdit,
   InputGroup,
   InputOTP,
@@ -329,7 +329,7 @@ const STORIES = [
   { tier:"Molecule", name:"FloatingActionButton", grp:"Core", render:(L)=> has(FloatingActionButton,Icon)?<FloatingActionButton position="static" icon={<Icon name="sparkle"/>} label={L==="vi"?"Ước một điều":"Make a wish"} actions={[{icon:<Icon name="chat" size="sm"/>,label:L==="vi"?"Trò chuyện với Lumi":"Talk to Lumi"},{icon:<Icon name="plus" size="sm"/>,label:L==="vi"?"Dự án mới":"New project"}]}/>:<Miss n="FloatingActionButton"/> },
   { tier:"Molecule", name:"InlineEdit", grp:"Forms", render:(L)=> has(InlineEdit)?<InlineEdit defaultValue="Design System v1.6" label={L==="vi"?"Tên dự án":"Project name"}/>:<Miss n="InlineEdit"/> },
   { tier:"Molecule", name:"Toolbar", grp:"Navigation", render:(L)=> has(Toolbar,Icon)?<Toolbar label="Editor" overflowAfter={3} items={L==="vi"?[{icon:<Icon name="edit" size="sm"/>,label:"Sửa"},{icon:<Icon name="copy" size="sm"/>,label:"Nhân bản"},"-",{icon:<Icon name="download" size="sm"/>,label:"Xuất"},{label:"Lưu trữ"},{label:"Xóa"}]:[{icon:<Icon name="edit" size="sm"/>,label:"Edit"},{icon:<Icon name="copy" size="sm"/>,label:"Duplicate"},"-",{icon:<Icon name="download" size="sm"/>,label:"Export"},{label:"Archive"},{label:"Delete"}]}/>:<Miss n="Toolbar"/> },
-  { tier:"Molecule", name:"Image", grp:"Data", render:(L)=> has(Image)?<div className="srow"><Image src="../assets/aurora-gold.jpg" alt="Aurora" ratio="16/9" preview style={{width:260}}/><Image src="data:image/gif;base64,invalid" alt="" ratio="16/9" style={{width:180}}/></div>:<Miss n="Image"/> },
+  { tier:"Molecule", name:"Image", grp:"Data", render:(L)=> has(CsImage)?<div className="srow"><CsImage src="../assets/aurora-gold.jpg" alt="Aurora" ratio="16/9" preview style={{width:260}}/><CsImage src="data:image/gif;base64,invalid" alt="" ratio="16/9" style={{width:180}}/></div>:<Miss n="Image"/> },
   { tier:"Molecule", name:"ScrollArea", grp:"Data", controls:[{k:"maxHeight",type:"range",min:80,max:280,step:20,def:140}], renderC:(v)=> has(ScrollArea)?<ScrollArea maxHeight={v.maxHeight} aria-label="Notes" style={{border:"1px solid var(--cs-color-border-default)",maxWidth:360,padding:"8px 12px",fontSize:13,color:"var(--cs-color-text-muted)"}}><p>Release notes arrive bilingual.</p><p>Blocked alerts only when asked.</p><p>Weekly velocity every Monday.</p><p>Quiet by default.</p></ScrollArea>:<Miss n="ScrollArea"/>, render:(L)=> has(ScrollArea)?<ScrollArea maxHeight={140} aria-label={L==="vi"?"Ghi chú":"Notes"} style={{border:"1px solid var(--cs-color-border-default)",maxWidth:360,padding:"8px 12px",fontSize:13,color:"var(--cs-color-text-muted)"}}><p>{L==="vi"?"Ghi chú phát hành song ngữ.":"Release notes arrive bilingual."}</p><p>{L==="vi"?"Cảnh báo chỉ khi bạn yêu cầu.":"Blocked alerts only when asked."}</p><p>{L==="vi"?"Tóm tắt tốc độ mỗi thứ Hai.":"Weekly velocity every Monday."}</p><p>{L==="vi"?"Yên tĩnh theo mặc định.":"Quiet by default."}</p></ScrollArea>:<Miss n="ScrollArea"/> },
   { tier:"Molecule", name:"Collapsible", grp:"Data", controls:[{k:"defaultOpen",type:"toggle",def:false}], renderC:(v)=> has(Collapsible)?<div style={{maxWidth:420}}><Collapsible title="Advanced preferences" defaultOpen={v.defaultOpen}><p style={{margin:0}}>Quiet by default — only what you opt into.</p></Collapsible></div>:<Miss n="Collapsible"/>, render:(L)=> has(Collapsible)?<div style={{maxWidth:420}}><Collapsible title={L==="vi"?"Tuỳ chọn nâng cao":"Advanced preferences"} defaultOpen={false}><p style={{margin:0}}>{L==="vi"?"Yên tĩnh theo mặc định — chỉ những gì bạn chọn.":"Quiet by default — only what you opt into."}</p></Collapsible></div>:<Miss n="Collapsible"/> },
   { tier:"Molecule", name:"Anchor", grp:"Navigation", render:(L)=> has(Anchor)?<Anchor title={L==="vi"?"Trên trang này":"On this page"} items={L==="vi"?[{id:"atoms",label:"Nguyên tử"},{id:"molecules",label:"Phân tử"},{id:"organisms",label:"Cơ quan"}]:[{id:"atoms",label:"Atoms"},{id:"molecules",label:"Molecules"},{id:"organisms",label:"Organisms"}]}/>:<Miss n="Anchor"/> },
@@ -404,7 +404,7 @@ const STORIES = [
   { tier:"Organism", name:"Menubar", grp:"Navigation", controls:[{k:"fileLabel",type:"text",def:"File"}], renderC:(v)=> has(Menubar)?<div style={{minHeight:180}}><Menubar menus={[{label:v.fileLabel,items:[{label:"New"},{label:"Open…"},"-",{label:"Export"}]},{label:"Edit",items:[{label:"Undo"},{label:"Redo"}]}]}/></div>:<Miss n="Menubar"/>, render:(L)=> has(Menubar)?<div style={{minHeight:180}}><Menubar menus={L==="vi"?[{label:"Tệp",items:[{label:"Mới"},{label:"Mở…"},"-",{label:"Xuất EN + VN"}]},{label:"Sửa",items:[{label:"Hoàn tác"},{label:"Làm lại"}]}]:[{label:"File",items:[{label:"New"},{label:"Open…"},"-",{label:"Export EN + VN"}]},{label:"Edit",items:[{label:"Undo"},{label:"Redo"}]}]}/></div>:<Miss n="Menubar"/> },
   { tier:"Organism", name:"NavigationMenu", grp:"Navigation", render:(L)=> has(NavigationMenu)?<div style={{minHeight:220}}><NavigationMenu items={L==="vi"?[{label:"Dịch vụ",panel:[{label:"Ứng dụng web & di động",desc:"Sản phẩm khách hàng dùng hằng ngày",href:"#"},{label:"Hệ thống nội bộ",desc:"Công cụ đội ngũ vận hành",href:"#"}]},{label:"Dự án",href:"#"},{label:"Tuyển dụng",href:"#"}]:[{label:"Services",panel:[{label:"Web & mobile apps",desc:"Products your customers reach for",href:"#"},{label:"Internal systems",desc:"The tools your team runs on",href:"#"}]},{label:"Work",href:"#"},{label:"Careers",href:"#"}]}/></div>:<Miss n="NavigationMenu"/> },
   { tier:"Organism", name:"Carousel", grp:"Data", render:(L)=> has(Carousel)?<div style={{maxWidth:460}}><Carousel label={L==="vi"?"Dự án":"Cases"}>{[1,2,3].map(n=><div key={n} style={{padding:"44px 24px",textAlign:"center",fontWeight:700}}>{(L==="vi"?"Trang ":"Slide ")+n}</div>)}</Carousel></div>:<Miss n="Carousel"/> },
-  { tier:"Organism", name:"Comment", grp:"Data", render:(L)=> has(Comment,Avatar)?<div style={{maxWidth:460}}><Comment avatar={<Avatar name="An Le" size="sm"/>} author="An Lê" meta={L==="vi"?"2 giờ trước":"2h ago"} replies={<Comment avatar={<Avatar name="Bao Vu" size="sm"/>} author="Bảo Vũ" meta={L==="vi"?"1 giờ trước":"1h ago"}>{L==="vi"?"Đồng ý, giao tuần này.":"Agreed — shipping this week."}</Comment>}>{L==="vi"?"Trông ổn rồi — giao thôi.":"Looks good — ship it."}</Comment></div>:<Miss n="Comment"/> },
+  { tier:"Organism", name:"Comment", grp:"Data", render:(L)=> has(CsComment,Avatar)?<div style={{maxWidth:460}}><CsComment avatar={<Avatar name="An Le" size="sm"/>} author="An Lê" meta={L==="vi"?"2 giờ trước":"2h ago"} replies={<CsComment avatar={<Avatar name="Bao Vu" size="sm"/>} author="Bảo Vũ" meta={L==="vi"?"1 giờ trước":"1h ago"}>{L==="vi"?"Đồng ý, giao tuần này.":"Agreed — shipping this week."}</CsComment>}>{L==="vi"?"Trông ổn rồi — giao thôi.":"Looks good — ship it."}</CsComment></div>:<Miss n="Comment"/> },
   { tier:"Organism", name:"Sidebar + NavItem", grp:"Navigation", render:(L)=> has(Sidebar,NavItem)?<div style={{width:240,border:"1px solid var(--cs-color-border-default)",borderRadius:"var(--cs-radius-lg)",overflow:"hidden"}}><Sidebar label={L==="vi"?"Không gian":"Workspace"}><NavItem active>{L==="vi"?"Tổng quan":"Overview"}</NavItem><NavItem trail={has(Badge)?<Badge>3</Badge>:"3"}>{L==="vi"?"Dự án":"Projects"}</NavItem><NavItem>{L==="vi"?"Phát hành":"Releases"}</NavItem><NavItem>{L==="vi"?"Cài đặt":"Settings"}</NavItem></Sidebar></div>:<Miss n="Sidebar"/> },
   { tier:"Organism", name:"CommandPalette", grp:"Navigation", framed:true, render:(L)=> has(CommandPalette)?<CommandPaletteD L={L} groups={L==="vi"?[{label:"Đi tới",items:[{label:"Bảng điều khiển",shortcut:"G D"},{label:"Phát hành",shortcut:"G R"}]},{label:"Hành động",items:[{label:"Dự án mới",shortcut:"N"},{label:"Trò chuyện với Lumi",shortcut:"L"}]}]:[{label:"Go to",items:[{label:"Dashboard",shortcut:"G D"},{label:"Releases",shortcut:"G R"}]},{label:"Actions",items:[{label:"New project",shortcut:"N"},{label:"Talk to Lumi",shortcut:"L"}]}]}/>:<Miss n="CommandPalette"/> },
   { tier:"Organism", name:"DataTable", grp:"Data", render:(L)=> has(DataTable)?<DataTable caption={L==="vi"?"Phát hành":"Releases"} rowKey="ver" columns={[{key:"ver",header:L==="vi"?"Phiên bản":"Version",render:(r)=><span style={{fontFamily:"var(--cs-font-family-mono)",fontWeight:600}}>{r.ver}</span>},{key:"ships",header:L==="vi"?"Ra mắt":"Ships"},{key:"note",header:L==="vi"?"Ghi chú":"Notes"},{key:"status",header:L==="vi"?"Trạng thái":"Status"}]} rows={L==="vi"?[{ver:"v1.5.1",ships:"Đã ra mắt",status:"done",note:"Gói Ngũ Hành"},{ver:"v1.6.0",ships:"Tuần này",status:"active",note:"Liên kết Glass"},{ver:"v1.7.0",ships:"Q3 2026",status:"hold",note:"Chờ RFC"}]:[{ver:"v1.5.1",ships:"Shipped",status:"done",note:"Element packs"},{ver:"v1.6.0",ships:"This week",status:"active",note:"Glass bindings"},{ver:"v1.7.0",ships:"Q3 2026",status:"hold",note:"Awaiting RFC"}]}/>:<Miss n="DataTable"/> },

package/guidelines/brand-iconography.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Iconography: In-repo line set (27) — currentColor · 1.75 stroke · round caps · 24×24 · sparkle is the wish glyph" />
 <meta charset="utf-8">
-<link rel="stylesheet" href="../styles.css">
+<link rel="stylesheet" href="../dist/styles.css">
 <style>
 body{margin:0;background:var(--cs-color-surface-page);padding:20px 24px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
 svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px;display:block}

package/guidelines/brand-imagery.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Imagery & mascot: Warm gold particle light · Lumi the golden genie" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; font-family: var(--cs-font-family-ui); }
   .stage { position: relative; min-height: 260px; background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; overflow: hidden; }

package/guidelines/brand-interaction.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Interaction states: Hover brighten · press nudge · composite focus indicator" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
   .row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

package/guidelines/brand-voice.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Slogan & voice: Turn Your Will Into Real · warm/direct/honest/respectful" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; font-family: var(--cs-font-family-ui); }
   .hero { background: var(--cs-color-brand-umber); color: #fff; padding: 22px 24px; }

package/guidelines/colors-anchors.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Brand anchors: Umber + Ochre — immutable" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); }
   .row { display: flex; gap: 16px; }

package/guidelines/colors-semantic.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Semantic: Separate status fills, paired foregrounds and text" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); }
   .row { display: flex; gap: 14px; }

package/guidelines/colors-surfaces.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Surfaces: Warm paper → panel → raised" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); }
   .row { display: flex; gap: 14px; }

package/guidelines/colors-text.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Text colours: Primary, muted, accent, inverse" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; font-family: var(--cs-font-family-ui); }
   .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }

package/guidelines/documents.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Document system: 3 reference docs govern every template · A4 VN-first · Ink/Slate pairs · umber table bars · yellow fill-ins · blank Party B · non-splitting signing blocks" />
 <meta charset="utf-8">
-<link rel="stylesheet" href="../styles.css">
+<link rel="stylesheet" href="../dist/styles.css">
 <style>
 body{margin:0;background:var(--cs-color-surface-page);padding:26px 30px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
 .h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--cs-color-text-muted);margin:0 0 12px}

package/guidelines/elements-components.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Components under each element: Same markup, five identities — CTAs, labels, badges, progress, links all follow --cs-accent-* automatically" />
 <meta charset="utf-8">
-<link rel="stylesheet" href="../styles.css">
+<link rel="stylesheet" href="../dist/styles.css">
 <style>
 body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:420px;overflow:clip;box-sizing:border-box;padding:28px 40px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
 .col{border:1px solid #E7D9C6;border-radius:12px;background:#fff;padding:14px;display:grid;gap:10px;align-content:start}

package/guidelines/elements-concept.html

@@ -1,7 +1,7 @@
 <!-- @dsCard group="Elements" viewport="1280x660" name="Ngũ Hành — elemental identity" subtitle="v1 shipped — tokens/elements.css · --cs-accent-* contract · data-cs-element scopes · mixing per Tương sinh" -->
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Ngũ Hành — elemental identity: v1 shipped — tokens/elements.css · --cs-accent-* contract · data-cs-element scopes · mixing per Tương sinh" />
-<meta charset="utf-8"><link rel="stylesheet" href="../styles.css">
+<meta charset="utf-8"><link rel="stylesheet" href="../dist/styles.css">
 <style>
 body{margin:0;background:var(--cs-color-surface-page);font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);width:1280px;height:660px;overflow:clip;box-sizing:border-box;padding:36px 44px}
 .el{border:1px solid var(--cs-color-border-default);border-radius:14px;overflow:hidden;background:var(--cs-color-surface-panel);display:flex;flex-direction:column}

package/guidelines/elements-geometry.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Geometry · 30 sets: Soft / middle / deep × light/dark — shared intensity · hue-locked themes" />
 <meta charset="utf-8">
-<link rel="stylesheet" href="../styles.css">
+<link rel="stylesheet" href="../dist/styles.css">
 <style>
 body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:720px;overflow:clip;box-sizing:border-box;padding:22px 28px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
 h1{font-size:18px;margin:0 0 4px;font-weight:800;letter-spacing:-0.01em}

package/guidelines/elements-variants.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Variants & washes: Soft / middle / deep names · aurora washes · live packs from element-seeds (see Geometry · 30 sets)" />
 <meta charset="utf-8">
-<link rel="stylesheet" href="../styles.css">
+<link rel="stylesheet" href="../dist/styles.css">
 <style>
 body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:560px;overflow:clip;box-sizing:border-box;padding:30px 40px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
 .col{border:1px solid var(--cs-color-border-default);border-radius:12px;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);padding:14px 14px 12px}