LessJS Architecture 的 UI 层：暗黑瑞士国际主义风格的 Web Components 组件库。
// deno.json
{
"imports": {
"@lessjs/ui": "jsr:@lessjs/ui@^0.5.2"
}
}@lessjs/ui v0.5.0 提供以下 Web Components：
按钮组件，支持 variants (default, primary, ghost) 和 sizes (sm, md, lg)
卡片组件，支持 header/footer slots 和 variants (default, elevated, borderless)
输入组件，支持 label、error states 和 validation
代码块组件，带复制按钮和语法高亮
布局组件，包含 header、sidebar、footer 和移动端 hamburger 菜单
// app/routes/index.ts
import { html, LitElement } from 'lit';
import '@lessjs/ui/less-button';
import '@lessjs/ui/less-card';
export class MyPage extends LitElement {
override render() {
return html`
<less-button variant="primary">Click me</less-button>
<less-card>
<h3 slot="header">Title</h3>
<p>Card content</p>
</less-card>
`;
}
}组件使用 CSS 自定义属性作为设计令牌，可通过 @lessjs/ui/design-tokens 导入：
import '@lessjs/ui/design-tokens';
// 可用的 CSS 自定义属性：
// --less-bg-base, --less-text-primary, --less-border-base
// --less-spacing-sm, --less-spacing-md, --less-spacing-lg
// --less-font-sans, --less-font-mono
// --less-radius-sm, --less-radius-md@lessjs/ui 遵循 LessJS Architecture 四约束：
所有组件使用 static properties 而非 @property 装饰器，确保 Vite SSR 兼容。详见 SSG 文档。
历史说明：v0.1.0-0.1.3 是 WebAwesome CDN loader。v0.1.4+ 开始自有 Web Components 组件库（当前 v0.5.0）。如需 WebAwesome，改用 inject 选项手动注入 CDN。