@lo-tek /接口
一个与框架无关的web设计系统：令牌、CSS组件和web组件。一切都建立在浏览器已经理解的东西之上，所以相同的组件可以在纯HTML、React、Astro和 Datastar.
LO-TEK是1.0之前。次要版本可能包含破坏性更改，它们列在“破坏性”（在0.36.0之前的版本中，“Brytende”）下 更新日志.
完整的文档，包括四种环境的组件页面、标记、模式和示例，请参见 lo-tek.sobernetics.no.
编码代理 有关规则，请浏览 lo-tek.sobernetics.no / llms.txt，每个环境有一个规则手册，如下所述 编码代理． 同样的规则手册也在包里，在 node_modules/@lo-tek/interfaces/agent/.
安装
npm install @lo-tek/interfaces
包没有依赖项。web组件很简单 HTMLElement 类，并且没有任何东西单独在导入时注册，因此您只需为实际调用的内容付费。
CSS组件
一个班和几个班 data-* 属性，没有JavaScript。 tokens.css 定义了其他一切构建所依赖的变量，因此必须加载它。它首先是出于习惯；顺序没有区别。
通过构建步骤，你只导入你使用的样式表，所以只有按钮的页面不会为对话框加载CSS：
import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/button.css"
如果没有构建步骤，您可以链接组合文件，其中包含所有内容：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces/dist/lotek.css" />
无论你选择哪一种，加价都是一样的：
<button class="lt-button">Submit application</button>
<button class="lt-button" data-variant="secondary">Save draft</button>
作为函数的属性
lt 在编辑器中提供具有补全和类型检查功能的相同类和属性。每个组件接受一个options对象并返回属性：
import { lt } from "@lo-tek/interfaces"
lt.button({ variant: "secondary" })
// { class: "lt-button", "data-variant": "secondary" }
在React中，从 @lo-tek/interfaces/react，即 className 和 htmlFor 而不是HTML名称：
import { lt } from "@lo-tek/interfaces/react"
<button {...lt.button({ variant: "secondary" })}>Save draft</button>
Web组件
没有任何东西单独在进口上注册。你叫 defineLt* 你自己，所以你决定元素何时存在：
import { defineLtToast } from "@lo-tek/interfaces/toast"
import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/toast.css"
defineLtToast()
<lt-toast class="lt-toast" role="status" aria-live="polite" aria-atomic="false"
aria-label="Notifications" data-ignore-morph></lt-toast>
每一个 defineLt* 还接受您选择的标记名，例如 defineLtToast("app-toast")，而反复的呼唤是无害的，也在旁边 defineLt()． 样式表仍然是为 lt-* 名称: <lt-field> 注册为 <my-field> 仍然将标签连接到字段，但是 display 元素名称的规则没有遵循， <lt-tabs> 和 <lt-suggestion> 在注册之前不要隐藏他们的内容，并且 <lt-dialog> 不再将打开的对话框定位为模态对话框。这四个人自己设立了阶级， <lt-toast>， <lt-session-timeout>， <lt-connection-status> 和 <lt-error-summary>，换一个名字看起来都一样。
服务器编写标记
LO-TEK是为HTML来自服务器的应用而构建的，无论是TanStack Start， React server Components还是Datastar。没有web组件在服务器发送的标记中创建节点，因为周围的框架会在下一次更新时再次将它们删除。
构建器在 lt 给出标记，组件给出行为，两者不重叠：
import { lt } from "@lo-tek/interfaces"
lt.errorSummary({ count: 2, id: "errors" })
// { host: { class: "lt-error-summary", role: "alert", tabindex: "-1", id: "errors",
// "aria-labelledby": "errors-title" },
// title: { class: "lt-error-summary__title", id: "errors-title" } }
id 是必需的 lt.field()， lt.suggestion()， lt.tabs() 和 lt.popover(), titleId 在 lt.dialog(). lt.tabs() 和 lt.suggestion() 也 keys，每个选项卡或选项从数据中选择一个键，以及 lt.tabs() 需要 label， TAB列表的名称。原因是水合作用：如果函数自己创建了id，服务器和浏览器就会各自创建自己的id，这部分之间的连接就会中断，直到React纠正它。在React中，它来自 useId()． 在 lt.errorSummary() 两者都是可选的： id 命名这个框以便其他东西可以指向它，和 titleId，为框命名的标题id，默认为 id 与 -title． 如果没有这两者，则标题没有id，框没有名称，并且web组件在控制台中这样说。
完整的推理和背后的测试正在进行中 标记和行为.
你自己的色彩主题
CLI根据您的品牌颜色创建一个完整的主题，并在OKLCH中计算对比度要求：
npx @lo-tek/interfaces theme --accent=#7c3aed --danger=#b3261e \
--success=#2b6940 --warning=#8a5a00 --neutral=#1a1a1a --out=theme.css
如果通过CSS定制还不够， takeover 将一个组件的源代码复制到您的项目中，并重写导入：
npx @lo-tek/interfaces takeover button --out=src/ui
npx @lo-tek/interfaces --help 显示其余部分。
定制
组件在里面 @layer lotek，所以你自己的规则获胜没有 !important． 如果在不受控制的页面中嵌入组件， data-lt-boundary 在根元素上把LO-TEK的样式放回宿主的非分层CSS中；请参阅文档中的自定义。形状和大小是从 --lt-* 以令牌值作为回退的变量：
.lt-button {
--lt-button-padding: var(--lt-spacing-3) var(--lt-spacing-6);
}
顺风是可选的。主题是一个普通的CSS文件， @lo-tek/interfaces/tailwind.css，因此软件包不依赖于Tailwind，也不会与您的版本冲突。
执照
麻省理工学院