digital-garbage
094e056760
55 element groups across text, buttons, choice, input, slider, layout, status, overlays, gallery and the wheel picker. Each lands in a registry-driven catalogue that shows every variant in both themes, so an element that fails to register is visibly absent rather than quietly missing. rule_content_is_data iterates the REGISTRY, not a list: a new element is attacked with markup the moment it calls define(), and one without a demo fails the suite. That is announcement-not-enumeration applied to the tests. Fixes found while building: checkbox silently ignored its label (inverted logic left it with aria-label=toggle), the overlay root set z-index 0 and so became a stacking context that trapped every overlay it was built to free, and raising a window left its peers' z stale because z is derived from position -- claim() now notifies a rung when a peer moves. The wheel highlights the actual sector rather than a box around the label: the lit shape is the region that picks the item, which is what makes it aimable.
45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
// Type. Nothing here carries a margin: spacing belongs to the container, so a
|
|
// heading can be dropped anywhere without bringing its own gap.
|
|
|
|
import { define } from "../internals/register.js";
|
|
import { el } from "../internals/el.js";
|
|
import { setText } from "../internals/text.js";
|
|
import { uid } from "../internals/ids.js";
|
|
|
|
const handle = (node) => ({
|
|
node,
|
|
setText: (value) => setText(node, value),
|
|
destroy: () => node.remove(),
|
|
});
|
|
|
|
const TAGS = { display: "h1", xl: "h1", lg: "h2", md: "h3", sm: "h4" };
|
|
|
|
for (const size of Object.keys(TAGS)) {
|
|
define("header", size, ({ text, id } = {}) =>
|
|
handle(el(TAGS[size], { cls: `cx-h cx-h-${size}`, text, attrs: { id } })));
|
|
}
|
|
|
|
for (const size of ["lg", "md", "sm", "xs"]) {
|
|
define("text", size, ({ text } = {}) =>
|
|
handle(el("p", { cls: `cx-t cx-t-${size}`, text })));
|
|
}
|
|
|
|
// One hint, one look. v4 had ten class names for this exact thing.
|
|
define("hint", "default", ({ text, id } = {}) =>
|
|
handle(el("p", { cls: "cx-hint", text, attrs: { id } })));
|
|
|
|
define("label", "field", ({ text, for: htmlFor } = {}) =>
|
|
handle(el("label", { cls: "cx-label", text, attrs: { for: htmlFor } })));
|
|
|
|
define("label", "section", ({ text } = {}) =>
|
|
handle(el("div", { cls: "cx-eyebrow", text })));
|
|
|
|
define("code", "inline", ({ text } = {}) =>
|
|
handle(el("code", { cls: "cx-code", text })));
|
|
|
|
define("code", "block", ({ text, label } = {}) => {
|
|
const id = uid("code");
|
|
const pre = el("pre", { cls: "cx-code-block", text, attrs: { id, "aria-label": label } });
|
|
return handle(pre);
|
|
});
|