volaro 0.1.0-alpha.4 → 0.1.0-alpha.5

package/README.md

@@ -1,8 +1,7 @@
 # Volaro
 
-**Limited alpha, published under the `alpha` dist-tag** (this is `0.1.0-alpha.4`) —
-`npm install volaro@alpha`. Not `latest` (that still resolves to an earlier
-`0.0.x` placeholder) — always specify `@alpha` or the exact version.
+**Limited alpha** (this is `0.1.0-alpha.5`), published under both the
+`latest` and `alpha` dist-tags: `npm install volaro`.
 
 Volaro is an experimental application language intended for AI authoring and
 human review. This package ships the language reference **and a working
@@ -113,11 +112,11 @@ dynamic route), so `volaro dev` on a project directory runs that server.
 ## Scaffold a project
 
 ```bash
-npm create volaro@alpha my-app      # the separate create-volaro package
+npm create volaro my-app      # the separate create-volaro package
 ```
 
-(`@alpha` matters — `npm create volaro` with no tag resolves `latest`, which
-is still an earlier `0.0.x` placeholder, not this build.)
+(If `npm create volaro` prints "This release is a placeholder", npm is
+reusing a cached copy of the old `0.0.1`: run `npm cache clean --force`.)
 
 It writes one single-page starter, a `volaro.json`, and `package.json` scripts
 (`dev` / `build` / `check`) that call `volaro`.

package/compiler/SOURCE_INFO.json

@@ -1,6 +1,6 @@
 {
-  "revision": "0d5741da1385dd81e277b16715a93592744d8c87",
+  "revision": "8c0952905f3449e5dc7c4fe75c2ba4b718b34148",
   "source": "git",
   "dirty": false,
-  "content_sha256": "611292080bf797022be28aea42376ca55bbeba3e680c2ec638ae4a1417981ff0"
+  "content_sha256": "24266586ae4ce6a2122f6893b7b44cf1cf721c2e97785afe95751a8109a2cb7a"
 }

package/compiler/SOURCE_REV

@@ -1 +1 @@
-0d5741da1385dd81e277b16715a93592744d8c87
+8c0952905f3449e5dc7c4fe75c2ba4b718b34148

package/compiler/validator/vlcheck/checks.py

@@ -488,13 +488,14 @@ class Checker:
                     if not valid:
                         self._d("E-THEME-SHAPE", Severity.ERROR,
                                 "malformed %s token row" % category.head, category)
-        allowed = {"button", "input", "card"}
+        allowed = {"button", "input", "card", "select", "textarea", "checkbox",
+                   "radio", "link", "fieldset", "table", "details"}
         seen_recipes: set[str] = set()
         for recipe in (x for x in mod.items if isinstance(x, A.RecipeDecl)):
             if recipe.primitive not in allowed:
                 self._d("E-RECIPE-UNKNOWN-PRIMITIVE", Severity.ERROR,
-                        "Slice 1 recipes support button, input, and card; got %r"
-                        % recipe.primitive, recipe)
+                        "recipes support %s; got %r"
+                        % (", ".join(sorted(allowed)), recipe.primitive), recipe)
                 continue
             if recipe.primitive in seen_recipes:
                 self._d("E-RECIPE-SHAPE", Severity.ERROR,
@@ -541,7 +542,8 @@ class Checker:
                 if value not in axes.get(axis, set()):
                     self._d("E-RECIPE-SHAPE", Severity.ERROR,
                             "default %s:%s is not declared" % (axis, value), recipe)
-            if recipe.primitive in ("button", "input"):
+            if recipe.primitive in ("button", "input", "select", "textarea",
+                                    "checkbox", "radio", "link"):
                 all_tokens = " ".join(" ".join(r.tokens) for r in recipe.body)
                 if "focus-visible:" not in all_tokens:
                     self._d("E-RECIPE-FOCUS", Severity.ERROR,

package/compiler/vlbuild/vlbuild/assets/vlrt.css

@@ -15,8 +15,15 @@
   /* Keep white action text at 5.99:1 in both schemes. The lighter dark-mode
    * accent is for links/borders, not a white-text button background. */
   --action-bg: #2f6f4f;
+  /* White text on a danger button needs the darker red in BOTH schemes;
+   * the lighter dark-mode --danger is for text on the dark surface. */
+  --danger-bg: #b91c1c;
   --danger: #b91c1c;
   --warn: #b45309;
+  /* Native controls (checkbox, select, scrollbars) follow the scheme; without
+   * this they stayed light-mode white boxes on the dark page. */
+  color-scheme: light dark;
+  accent-color: var(--accent);
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -56,10 +63,13 @@ code {
 .vl-spacer { flex: 1; }
 .vl-fragment { display: contents; }
 
-a.vl-link { color: var(--accent); text-decoration: none; }
-a.vl-link:hover { text-decoration: underline; }
+/* `a` (45.4) is the same link as the `link` convenience, so it looks the
+ * same; unstyled it was browser blue, unreadable on the dark surface. */
+a.vl-link, a.vl-a { color: var(--accent); text-decoration: none; }
+a.vl-link:hover, a.vl-a:hover { text-decoration: underline; }
 
-input.vl-input {
+/* The text-entry controls share one look. */
+input.vl-input, select.vl-select, textarea.vl-textarea {
   font: inherit;
   padding: 4px 8px;
   border: 1px solid var(--border);
@@ -67,13 +77,51 @@ input.vl-input {
   background: var(--surface);
   color: var(--ink);
 }
-input.vl-input[aria-invalid="true"] { border-color: var(--danger); }
+select.vl-select { min-height: 32px; }
+textarea.vl-textarea { line-height: 1.5; resize: vertical; }
+input.vl-input[aria-invalid="true"], select.vl-select[aria-invalid="true"],
+textarea.vl-textarea[aria-invalid="true"] { border-color: var(--danger); }
+
+/* Checkbox, radio, range and colour are not text boxes: drop the box
+ * styling and let the native control (tinted by accent-color) show. */
+input.vl-input:is([type="checkbox"], [type="radio"], [type="range"], [type="color"]) {
+  padding: 0;
+  border: 0;
+  background: none;
+}
+input.vl-input:is([type="checkbox"], [type="radio"]) { width: 16px; height: 16px; margin: 0; }
+
+/* Disabled looks disabled, on every control. */
+:is(input.vl-input, select.vl-select, textarea.vl-textarea, button.vl-button):disabled,
+fieldset.vl-fieldset:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+/* ...and so does its label, so the whole field reads as unavailable. */
+.vl-field:has(> :disabled) > .vl-label { opacity: 0.55; }
 
 /* accessible input field (spec 8.9): label / help / error wrapper */
 .vl-field { display: flex; flex-direction: column; gap: 4px; }
 .vl-field > .vl-label { font-size: 13px; font-weight: 600; }
 .vl-field > .vl-help { font-size: 12px; color: var(--muted); }
-.vl-field > .vl-error { font-size: 12px; color: var(--danger); }
+/* The field error shares the class name of the runtime crash box (.vl-error,
+ * monospace, below); inside a field it is ordinary text. */
+.vl-field > .vl-error { font-size: 12px; font-family: inherit; white-space: normal; color: var(--danger); }
+/* A checkbox or radio sits BESIDE its label, box first. The label stays
+ * first in the DOM (reading and tab order unchanged); only the grid places
+ * it. Help and error text line up under the label. */
+.vl-field:has(> input.vl-input:is([type="checkbox"], [type="radio"])) {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 8px;
+  row-gap: 2px;
+  align-items: center;
+}
+.vl-field:has(> input.vl-input:is([type="checkbox"], [type="radio"])) > input { grid-column: 1; grid-row: 1; }
+.vl-field:has(> input.vl-input:is([type="checkbox"], [type="radio"])) > .vl-label {
+  grid-column: 2; grid-row: 1; font-size: inherit; font-weight: 400;
+}
+.vl-field:has(> input.vl-input:is([type="checkbox"], [type="radio"])) > :is(.vl-help, .vl-error) { grid-column: 2; }
 button.vl-button {
   font: inherit;
   padding: 6px 12px;
@@ -88,12 +136,64 @@ button.vl-button[data-variant="primary"] {
   border-color: transparent;
   color: #fff;
 }
-button.vl-button:hover { border-color: var(--accent); }
-input.vl-input:focus-visible, button.vl-button:focus-visible, a.vl-link:focus-visible {
+button.vl-button[data-variant="ghost"] {
+  background: transparent;
+  border-color: transparent;
+  color: var(--accent);
+}
+button.vl-button[data-variant="danger"] {
+  background: var(--danger-bg);
+  border-color: transparent;
+  color: #fff;
+}
+button.vl-button:not(:disabled):hover { border-color: var(--accent); }
+:is(input.vl-input, select.vl-select, textarea.vl-textarea, button.vl-button,
+    a.vl-link, a.vl-a, summary.vl-summary):focus-visible {
   outline: 3px solid var(--ink);
   outline-offset: 3px;
 }
 
+/* Inside a layout primitive, `gap:` is the spacing; the browser's own
+ * margins on these would double it. Ordinary flow keeps them. */
+:is(.vl-col, .vl-row, .vl-stack, .vl-grid, .vl-card) > :is(
+  .vl-p, .vl-h1, .vl-h2, .vl-h3, .vl-h4, .vl-h5, .vl-h6, .vl-ul, .vl-ol,
+  .vl-menu, .vl-dl, .vl-table, .vl-figure, .vl-blockquote, .vl-pre, .vl-hr,
+  .vl-fieldset, .vl-form, .vl-details) { margin: 0; }
+
+/* fieldset groups its controls like a column; legend reads like a label. */
+fieldset.vl-fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  padding: 12px 16px 16px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+legend.vl-legend { padding: 0 4px; font-size: 13px; font-weight: 600; }
+
+/* Tables: left-aligned, ruled rows, numbers that line up. */
+table.vl-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
+caption.vl-caption { text-align: start; font-weight: 600; padding-bottom: 6px; }
+:is(th.vl-th, td.vl-td) {
+  padding: 6px 12px;
+  text-align: start;
+  border-bottom: 1px solid var(--border);
+}
+thead.vl-thead th.vl-th { border-bottom-width: 2px; }
+
+/* Disclosure panel. */
+details.vl-details {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 12px;
+  background: var(--surface);
+}
+summary.vl-summary { cursor: pointer; font-weight: 600; }
+details.vl-details[open] > summary.vl-summary { margin-bottom: 8px; }
+
+progress.vl-progress, meter.vl-meter { width: 100%; max-width: 320px; }
+
 /* overlay layer: a positioned mount point above the app. */
 .vl-overlay { position: fixed; inset: 0; z-index: 1000; }
 

package/compiler/vlbuild/vlbuild/emit.py

@@ -1332,8 +1332,7 @@ class Emitter:
         for k, v in el.attrs:
             if k in skip_attrs:
                 continue
-            if k == "class" or (self.style_project and el.name in self.style_project.recipes
-                                and k in self.style_project.recipes[el.name].axes):
+            if k == "class" or k in self._recipe_axes(el):
                 continue
             self._apply_attr(el.name, k, v, style, attrs, handlers)
         self._link_safety(el.name, attrs)
@@ -1589,8 +1588,7 @@ class Emitter:
         attrs: dict[str, str] = {}
         handlers: dict[str, str] = {}
         for k, v in rest:
-            if k == "class" or (self.style_project and el.name in self.style_project.recipes
-                                and k in self.style_project.recipes[el.name].axes):
+            if k == "class" or k in self._recipe_axes(el):
                 continue
             if k == "bind" and el.name == "input" and input_type in INPUT_TYPES_CHECKED:
                 # action-45.2: checkbox/radio bind a *checked* boolean, not a
@@ -1696,6 +1694,16 @@ class Emitter:
             spec.append("error: %s" % self.expr(a11y["error"]))
         return "VL.field({%s})" % ", ".join(spec)
 
+    def _recipe_axes(self, el: A.Element) -> dict:
+        """The style axes of the recipe `el` uses (checkbox/radio resolve to
+        their own recipe, not `input`'s); those attributes are styling, not
+        DOM attributes. Imported lazily: style_config imports this module."""
+        if self.style_project is None:
+            return {}
+        from .style_config import recipe_for
+        recipe = recipe_for(self.style_project, el)
+        return recipe.axes if recipe else {}
+
     def _style_classes(self, el: A.Element) -> list[str]:
         if self.style_project is None:
             # class: is a styling feature: if present, a default style project

package/compiler/vlbuild/vlbuild/pages_build.py

@@ -172,6 +172,15 @@ def build_pages(root: Path, out_public: Path, styled: bool = False) -> dict:
     check_no_module_id_collisions({path: module_id_for(str(root), path)
                                    for path in files})
 
+    # Styling (theme.vl / recipes.vl): a project keeps them at its root,
+    # beside app/, exactly where a single-file build finds them beside
+    # app.vl. Every page, layout and boundary compiles against the same
+    # style project and one app.css covers them all. Multi-page builds used
+    # to ignore styling entirely.
+    from .style_config import load_style_project
+    style_project = load_style_project(root / "app.vl", A.Module(items=[]))
+    style_candidates: list[dict[str, str]] = []
+
     compiled: dict[str, str] = {}   # module id -> emitted JS
     for path, info in files.items():
         mod, parse_diags, src = _parse(path)
@@ -187,8 +196,16 @@ def build_pages(root: Path, out_public: Path, styled: bool = False) -> dict:
         if check_errors:
             problems.extend(f"{d.code}: {d.message} ({path})" for d in check_errors)
             continue
+        if any(isinstance(x, A.RecipeDecl)
+               or (isinstance(x, A.Directive) and x.head == "theme")
+               for x in mod.items):
+            problems.append(
+                "E-STYLE-LOCATION: a project's theme and recipes live in theme.vl / "
+                "recipes.vl at the project root, beside app/, not in a page, layout "
+                "or boundary (%s)" % path)
+            continue
         mid = module_id_for(str(root), path)
-        emitter = Emitter(src, os.path.basename(path))
+        emitter = Emitter(src, os.path.basename(path), style_project=style_project)
         try:
             if info["role"] == "layout":
                 js = emitter.build_module(mod, mid, path,
@@ -203,10 +220,24 @@ def build_pages(root: Path, out_public: Path, styled: bool = False) -> dict:
             problems.append(f"{exc} ({path})")
             continue
         compiled[mid] = js
+        style_candidates.extend(emitter.style_candidates)
 
     if problems:
         raise BuildError("browser-page compilation failed:\n  " + "\n  ".join(sorted(set(problems))))
 
+    # Compiled before anything is written, so a CSS failure leaves no output.
+    app_css = None
+    if style_project.active or style_candidates:
+        from .styling import compile_css
+        app_css = compile_css(style_candidates, style_project.theme_css())
+
+    out_public.mkdir(parents=True, exist_ok=True)
+    stale_css = out_public / "app.css"
+    if app_css is not None:
+        stale_css.write_text(app_css, encoding="utf-8")
+    elif stale_css.exists():
+        stale_css.unlink()   # a rebuild after the styling was removed
+
     pages_dir = out_public / "pages"
     pages_dir.mkdir(parents=True, exist_ok=True)
     for mid, js in compiled.items():
@@ -258,7 +289,7 @@ def static_routes(client_manifest: dict) -> list[dict]:
 _ASSETS = Path(__file__).resolve().parent / "assets"
 
 
-def shell_html(title: str = "Volaro") -> str:
+def shell_html(title: str = "Volaro", styled: bool = False) -> str:
     """The ONE application shell served for every route (static-generated or
     server-fallback) -- byte-identical regardless of route, deliberately:
     architecture decision §4, no SSR/hydration. The client router does the
@@ -271,6 +302,7 @@ def shell_html(title: str = "Volaro") -> str:
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>{escape(title)}</title>
 <link rel="stylesheet" href="/vlrt.css" />
+{'<link rel="stylesheet" href="/app.css" />' if styled else ''}
 </head>
 <body>
 <div id="vl-root">loading…</div>
@@ -328,7 +360,7 @@ def build_project(root: Path, out_dir: Path) -> dict:
     (out_public / "vlrouter.js").write_text(
         (_ASSETS / "vlrouter.js").read_text(encoding="utf-8"), encoding="utf-8")
     (out_public / "bootstrap.js").write_text(bootstrap_js(), encoding="utf-8")
-    shell = shell_html()
+    shell = shell_html(styled=(out_public / "app.css").is_file())
     (out_public / "index.html").write_text(shell, encoding="utf-8")
 
     for page in static_routes(client_manifest):

package/compiler/vlbuild/vlbuild/style_config.py

@@ -32,7 +32,26 @@ DEFAULT_THEME = {
 }
 RESERVED_COLORS = {"white", "black", "transparent", "current"}
 RESERVED_ROOTS = {"container", "columns", "break", "box", "object", "overflow"}
-STYLEABLE = {"button", "input", "card"}
+STYLEABLE = {"button", "input", "card", "select", "textarea", "checkbox", "radio",
+             "link", "fieldset", "table", "details"}
+# Interactive targets must declare visible focus (E-RECIPE-FOCUS).
+FOCUS_REQUIRED = {"button", "input", "select", "textarea", "checkbox", "radio", "link"}
+
+
+def recipe_key(el: A.Element) -> str:
+    """The recipe target an element uses. `checkbox` and `radio` are
+    `input type:checkbox|radio` in source but are their own targets: a
+    `recipe input` is a text box ("w-full px-sm ..."), which would stretch
+    and pad a checkbox. Every other element uses its own name."""
+    if el.name == "input":
+        for k, v in el.attrs:
+            if k == "type" and isinstance(v, A.Name) and v.id in ("checkbox", "radio"):
+                return v.id
+    return el.name
+
+
+def recipe_for(project: "StyleProject", el: A.Element):
+    return project.recipes.get(recipe_key(el)) if project else None
 
 
 def _string(raw: str) -> str:
@@ -174,7 +193,8 @@ def _parse_theme(node: A.Directive) -> dict:
 
 def _parse_recipe(node: A.RecipeDecl) -> Recipe:
     if node.primitive not in STYLEABLE:
-        raise BuildError("E-RECIPE-UNKNOWN-PRIMITIVE: %r; valid: button, input, card" % node.primitive)
+        raise BuildError("E-RECIPE-UNKNOWN-PRIMITIVE: %r; valid: %s"
+                         % (node.primitive, ", ".join(sorted(STYLEABLE))))
     recipe = Recipe(node.primitive)
     for row in node.body:
         toks = row.tokens
@@ -207,7 +227,7 @@ def _parse_recipe(node: A.RecipeDecl) -> Recipe:
         if axis not in recipe.axes or value not in recipe.axes[axis]:
             raise BuildError("E-RECIPE-SHAPE: default %s:%s is not declared" % (axis, value))
     all_classes = recipe.base + [c for vals in recipe.axes.values() for cs in vals.values() for c in cs]
-    if node.primitive in ("button", "input") and not any("focus-visible:" in c for c in all_classes):
+    if node.primitive in FOCUS_REQUIRED and not any("focus-visible:" in c for c in all_classes):
         raise BuildError("E-RECIPE-FOCUS: interactive recipe %r needs focus-visible styling" % node.primitive)
     if (any(_utility(c).startswith(("transition", "animate-")) for c in all_classes)
             and not any("motion-reduce:" in c for c in all_classes)):
@@ -291,7 +311,8 @@ INLINE_GROUPS = {"pad": "padding", "pad_x": "padding", "pad_y": "padding",
 
 
 def resolve_classes(project: StyleProject, el: A.Element) -> tuple[list[str], list[tuple[str, str]]]:
-    recipe = project.recipes.get(el.name)
+    recipe = recipe_for(project, el)
+    key = recipe_key(el)
     selected: dict[str, str] = {}
     custom = ""
     for key, value in el.attrs:
@@ -313,20 +334,20 @@ def resolve_classes(project: StyleProject, el: A.Element) -> tuple[list[str], li
                 continue
             if choice not in values:
                 raise BuildError("E-RECIPE-VARIANT: recipe %r has no %s %r; valid: %s" %
-                                 (el.name, axis, choice, ", ".join(sorted(values))))
+                                 (key, axis, choice, ", ".join(sorted(values))))
             classes.extend(values[choice])
         occupied = {g for c in classes if (g := conflict_group(c))}
         for key, _value in el.attrs:
             if (key in INLINE_GROUPS and key not in recipe.axes
                     and any(group == INLINE_GROUPS[key] and state == ""
                             for state, group in occupied)):
-                raise BuildError("E-STYLE-RECIPE-MIX: %s recipe and inline %s: set the same property" % (el.name, key))
+                raise BuildError("E-STYLE-RECIPE-MIX: %s recipe and inline %s: set the same property" % (recipe_key(el), key))
         for c in custom.split():
             if _utility(c).startswith("!") or _utility(c).endswith("!"):
                 raise BuildError("E-CLASS-IMPORTANT: class: cannot force precedence with !important")
             group = conflict_group(c)
             if group and group in occupied:
-                raise BuildError("E-CLASS-RECIPE-CONFLICT: %r conflicts with recipe %r" % (c, el.name))
+                raise BuildError("E-CLASS-RECIPE-CONFLICT: %r conflicts with recipe %r" % (c, key))
     custom_classes = custom.split()
     all_classes = classes + custom_classes
     if any("[" in c and "]" in c for c in custom_classes):
@@ -336,12 +357,12 @@ def resolve_classes(project: StyleProject, el: A.Element) -> tuple[list[str], li
         raise BuildError("E-CLASS-LIVE-HIDDEN: a live region must remain exposed")
     if el.name == "status" and "sr-only" in utilities:
         project.warnings.append("W-CLASS-LIVE-SR-ONLY: status feedback should remain visually present")
-    if el.name in ("button", "input", "link") and any(c in ("outline-none", "outline-0", "ring-0") for c in utilities):
+    if el.name in ("button", "input", "link", "select", "textarea") and any(c in ("outline-none", "outline-0", "ring-0") for c in utilities):
         if not any("focus-visible:" in c and _utility(c) not in ("outline-none", "outline-0", "ring-0") for c in all_classes):
             raise BuildError("E-CLASS-FOCUS-REMOVED: removed focus needs a focus-visible replacement")
     seen: set[str] = set(); result = []
     for c in all_classes:
         if c not in seen:
             seen.add(c); result.append(c)
-            origins.append((c, "class on %s" % el.name if c in custom_classes else "recipe %s" % el.name))
+            origins.append((c, "class on %s" % el.name if c in custom_classes else "recipe %s" % key))
     return result, origins

package/compiler/vlbuild/vlbuild/styling.py

@@ -18,8 +18,11 @@ def compile_css(candidates: list[dict[str, str]], theme_css: str = "") -> str:
     """
     if not (_TOOLS / "node_modules" / "tailwindcss" / "package.json").is_file():
         raise BuildError(
-            "E-CSS-TOOLCHAIN: missing local styling build dependencies; "
-            "run npm ci --prefix prototype/vlbuild/styling")
+            "E-CSS-TOOLCHAIN: theme / recipe / class: styling needs the Tailwind "
+            "toolchain, which the volaro npm package does not include yet. "
+            "Remove theme.vl, recipes.vl and class: to build with the default "
+            "styles, which cover every control. (In the Volaro repository, run "
+            "npm ci --prefix prototype/vlbuild/styling.)")
     try:
         result = subprocess.run(
             ["node", str(_TOOLS / "build-css.mjs")],

package/language/crib.md

@@ -320,7 +320,15 @@ select label:"Size" bind:size
 `select`/`optgroup`/`datalist` only. `datalist id:"…"` holds `option`
 children; an `input list:"…"` names that same id (a plain string match, not a
 compiler-verified link). `fieldset` needs exactly one `legend` **first**
-child — that legend is the group's accessible name.
+child — that legend is the group's accessible name. `legend` is a container,
+so its text is a child:
+
+```vl
+fieldset
+  legend
+    text "Size"
+  input type:radio value:"s" label:"Small" bind:size
+```
 
 Attributes and events are **closed**, like element names. An attribute with no
 Volaro contract is `E-ATTR-UNKNOWN`; a real one on the wrong element is
@@ -342,8 +350,8 @@ need a real checked state).
 
 `variant:` takes a **bare style name only** — a
 computed value is `E-VARIANT-LITERAL` (vary the positional label instead).
-`variant:primary` is styled by the minimal build; `ghost` / `danger` and other
-names are valid and emit `data-variant=` but render as a plain button until a
+The minimal build styles `variant:primary`, `ghost` and `danger`; other names
+are valid and emit `data-variant=` but render as a plain button until a
 `theme` / `recipe` styles them. The page mounts client-side (`#vl-root` shows
 `loading…` until `app.js` runs). `text ... pre:true` (`text` only,
 `E-PRE-TARGET` elsewhere) preserves whitespace exactly, including embedded
@@ -759,7 +767,14 @@ Client calls: `auth.sign_in(email:, password:)`, `auth.sign_up(...)`,
 
 ## Styling
 
-One sibling `theme.vl` groups `color`, `space`, `radius`, `font`, `screen`, and
+**From an npm install, skip this section:** `theme`, `recipe` and `class:` need
+the Tailwind toolchain, which the volaro package does not ship yet
+(`E-CSS-TOOLCHAIN`). The default styles cover every control in light and dark
+mode; use layout attributes (`gap:`, `pad:`, `max_w:` …) for spacing.
+
+One `theme.vl` (beside `app.vl`, or at a project's root beside `app/`, with
+`recipes.vl` beside it; a page may not declare either: `E-STYLE-LOCATION`) groups
+`color`, `space`, `radius`, `font`, `screen`, and
 `motion reduce respect`; colors may add positional `dark "…"`. Numeric
 `gap:`/`pad:` values are px, while `gap:sm` resolves `theme.space.sm`.
 
@@ -773,7 +788,9 @@ card variant:raised
   button "Save" variant:primary class:"w-full sm:w-auto"
 ```
 
-Slice 1 recipes are `button`, `input`, and `card`. A recipe has one literal
+Recipe targets: `button input card select textarea checkbox radio link fieldset
+table details`. `checkbox`/`radio` style `input type:checkbox|radio` (they never
+take `recipe input`, which is for text boxes). A recipe has one literal
 `base`, orthogonal `axis value "classes"` rows, and `default axis:value`.
 `class:` is one complete literal and additive only: no interpolation,
 `!important`, recipe property conflict, or recipe-plus-inline override.

package/language/spec.md

@@ -683,10 +683,15 @@ Numbers in `gap:` / `pad:` remain pixels; a name such as `gap:sm` resolves to
 `theme.space.sm`. `color:muted` resolves to `var(--vl-color-muted)`. Dark values
 apply through both `prefers-color-scheme` and `html[data-theme="dark"]`.
 
-`recipe button`, `recipe input`, and `recipe card` declare literal Tailwind
-classes as one `base`, orthogonal axes, and defaults. `card` is a grouping
-`<div>` with a child slot. Interactive recipes require a `focus-visible:`
-treatment and motion utilities require a `motion-reduce:` counterpart:
+A `recipe` declares literal Tailwind classes as one `base`, orthogonal axes,
+and defaults, for one of these targets: `button`, `input`, `card`, `select`,
+`textarea`, `checkbox`, `radio`, `link`, `fieldset`, `table`, `details`
+(anything else is `E-RECIPE-UNKNOWN-PRIMITIVE`). `checkbox` and `radio` style
+`input type:checkbox` / `input type:radio`, which never take `recipe input`:
+that recipe is for text boxes. `card` is a grouping `<div>` with a child slot.
+The interactive targets (`button`, `input`, `select`, `textarea`, `checkbox`,
+`radio`, `link`) require a `focus-visible:` treatment (`E-RECIPE-FOCUS`), and
+motion utilities require a `motion-reduce:` counterpart:
 
 ```vl
 recipe button
@@ -2498,6 +2503,7 @@ multi-owner shared state remains open — not decided by this amendment.
 26. **Media and image maps (§8.9.5)**, action-45.6, the sixth slice of the safe-UI-catalogue programme. Added `audio`, `video`, `source`, `track`, `picture`, `map` and `area` to the closed lowercase element set; `img` kept §8.10's `alt:` contract unchanged and gained the resource-loading and intrinsic-size surface. Every element here is a network request the browser makes on the page's behalf, so the policy is resource-loading policy: a literal `src:`/`srcset:`/`poster:` must be `http`, `https` or a relative path (`E-MEDIA-SRC`), a **narrower** set than §8.9.3's navigation one because `mailto:`/`tel:` are navigation targets rather than resources and a fetch has no user-visible confirmation step — `data:` is refused despite the legitimate tiny-inline-PNG case, since the same URL form carries arbitrary bytes of any type the browser will sniff, is unreviewable in source, and defeats every cache and size budget — with a computed URL running the same policy in the browser through `VL.fetchUrl`, which neutralises an unsafe value to the empty string. `autoplay:true` is now only expressible alongside `muted:true` (`E-AUTOPLAY-UNMUTED`): every current browser blocks unmuted autoplay, so `autoplay` alone read as media that starts on load and shipped media that did not start at all. `audio`/`video` need `controls:true` or `muted:true` (`E-MEDIA-CONTROLS`) — with sound and no controls a keyboard user cannot pause what they hear — and must **declare** their text alternative the way an `img` declares `alt:`, either a `track kind:captions` child or `captions:none` (`E-MEDIA-CAPTIONS`), because uncaptioned speech is simply unavailable to a deaf viewer and nothing downstream can recover it. An `area` with an `href:` needs an `alt:` (`E-AREA-ALT`), its `shape:`/`coords:` must match in count (`E-AREA-SHAPE` / `E-AREA-COORDS`; a browser silently ignores a mismatched area, so that region is not clickable and nothing says so), and `area` shares §8.9.3's link policy rather than getting a second one. `picture` needs exactly one `img` last (`E-PICTURE-SHAPE`), `source` uses `srcset:` in a picture and `src:` in a media element (`E-SOURCE-SHAPE`), `track` needs `kind:`/`src:` plus `srclang:`/`label:` when it carries speech (`E-TRACK-KIND` / `E-TRACK-SHAPE`), `map` needs a `name:` and at least one `area` (`E-MAP-NAME` / `E-MAP-CHILD`), and an orphaned `source`/`track`/`area` is `E-MEDIA-PARENT`. Typed values are closed with `E-MEDIA-VALUE`, `E-MEDIA-PRELOAD`, `E-MEDIA-SIZE` and `E-MEDIA-FLAG`. Verifying this in real Chromium (part 29, against the new `test-only/media-maps-45-6-acceptance` page, whose assets are a real decodable PNG and a genuine 8-bit PCM WAV) caught a third real defect in the programme: `muted` is the same trap as `checked` — the content attribute sets `defaultMuted` and the live property is initialised from it at creation — so autoplaying media the compiler had proved muted in source was shipping **unmuted**, defeating `E-AUTOPLAY-UNMUTED` entirely. `VL.el` now sets `muted` as a live property, and the emitter emits a real `true` rather than `""`, which is falsy on that path. Part 29 also proves the bytes genuinely fetched and decoded, `<picture>` having Chromium resolve `currentSrc` to the media-matched candidate, both `<track>` children becoming real `TextTrack`s whose cues come from Chromium's own WebVTT parser, a real WAV playing so `on play`/`on pause` observe genuine playback, an image-map area being a real focusable link whose `alt:` is its accessible name, and a computed `data:` resource URL neutralised with Chromium's own network log showing it was never requested.
 27. **Global attributes, the layout surface, and refused elements (§8.9.6)**, action-45.7, the closure slice of the safe-UI-catalogue programme. §8.9.1 closed control attributes and events and §8.9.2-§8.9.5 closed each family's surface; this closes what applies to every element. The global attributes each got an outcome: `dir:` became genuinely global (it was scoped to `bdi`/`bdo` by §8.9.3, but it is element-agnostic by definition and a `lang:"ar"` subtree needs a direction on whatever element carries it), `lang:` must be a parseable tag (`E-LANG-TAG`; an unparseable one is ignored, so a screen reader keeps the page language), `tabindex:` is restricted to `0` and `-1` (`E-TABINDEX`; a **positive** tabindex pulls the element ahead of everything with a natural tab order, for the whole document, invisibly to whoever wrote it), `hidden:` is a literal initial state (`E-HIDDEN-VALUE`) and refused on a live region (`E-HIDDEN-LIVE`, since a hidden element leaves the accessibility tree and a hidden live region announces nothing), `spellcheck:` is scoped to where a viewer types, and `title:` outside `abbr` is `W-TITLE-TOOLTIP` — a warning, because a tooltip is invisible on touch, unreachable by keyboard, and read *instead* of the element's own text by most screen readers. Refused globally with `E-ATTR-REFUSED` and a stated reason: `contenteditable` (an editor with no state binding, no paste sanitisation, no undo), `draggable` (a gesture that starts and cannot finish), `style` (the compiler owns the style surface), `role` (it can only contradict its element), any inline handler attribute, `srcdoc`, and `action:`/`method:`/`formaction:` — the **form-submission bypass**, a second unchecked path straight past every guard, auth rule and pending-state check `on submit` provides. There is no `data-*` or `aria-*` passthrough, stated as policy: `aria_label:` is the single aria surface, and the `data-*` passthrough was the fail-open path §8.9.1 removed. The layout/style surface, which §8.9.1 deliberately left element-agnostic and deferred here, is now scoped to three families (`E-LAYOUT-TARGET`): flex/grid container properties only on the elements this compiler gives `display: flex`/`grid`, and box/text styling on anything except the twelve elements that generate no styleable box of their own — with the table `col` following §8.9.4's name-by-position decision, so the flex-column convenience keeps its full style surface. Every element the catalogue refuses now carries its own diagnostic and reason rather than a bare `E-UNKNOWN-ELEMENT`: `E-ELEMENT-COMPILER-OWNED` (10 names), `E-ELEMENT-UNSAFE` (10), `E-ELEMENT-DEFERRED` (13, each naming the contract it waits on) and `E-ELEMENT-OBSOLETE` (17, each naming its replacement). A custom element needs none: the hyphen is not part of a Volaro identifier, so the name cannot be lexed as an element name at all. The closure claim is a **test**, not a sentence — the validator suite carries the whole HTML element set and asserts that no name is both supported and refused, that every refusal has a stated reason, and that no HTML element has neither outcome (88 supported, 46 refused, 0 unclassified). Writing that assertion immediately found four real gaps (`basefont`, `noembed`, `noframes`, and the `style` *element*, dropped from the compiler-owned table while the style *attribute* was handled separately), all now closed. Verified in real Chromium (part 30, against the new `test-only/global-closure-45-7-acceptance` page) for the permitted half — the refusals are proved by the negative controls, since each stops the build and cannot reach a browser: `lang:` reaching the real property, `dir:rtl` genuinely changing the layout against an otherwise pixel-identical `ltr` subtree, a real Tab sequence landing on the `tabindex:0` element at its document position and never on the `tabindex:-1` one (which stays focusable programmatically), `hidden:true` removing the element from Chromium's own accessibility tree rather than merely from view, and every permitted layout/style attribute still resolving to a real computed style.
 28. **Conditional `where` predicates** (§13.1), action-44. A `where` value written as an `if` expression, such as `where(title: if query == "" nil else contains(query))`, now lowers branch by branch: a `nil` branch skips the clause and a predicate branch filters. Before, the whole expression went through generic lowering, so the predicate name was emitted as a call to a function that does not exist; it built clean and threw on every request. Precheck now validates each branch, so a non-predicate call inside one fails the build. Verified against a real seeded node+sqlite server (`test_where_predicate_conditional`). The unconditional sentinel workaround (`contains("")`) still works and is no longer required.
+29. **Recipe targets beyond button, input and card** (§ styling), 2026-09-24. `recipe` now also targets `select`, `textarea`, `checkbox`, `radio`, `link`, `fieldset`, `table` and `details`. `checkbox` and `radio` resolve to their own recipe: before, `recipe input` applied to every `input`, so a text-box recipe (`w-full px-sm ...`) stretched and padded checkboxes and radios. The interactive new targets must declare visible focus, like `button` and `input`. In a multi-page project, `theme.vl` and `recipes.vl` live at the project root beside `app/`; a page, layout or boundary that declares a theme or recipe is `E-STYLE-LOCATION`. Verified by a full build with the CSS compile (`test_styling_new_recipe_targets`) and, for projects, real Chromium (pages-routing e2e part 16).
 
 **Dated correction, 2026-09-23 — amendments 19, 20 and 21 carry the wrong action ID.**
 Those three amendments attribute the pages/layouts/router work to "action-20". The

package/language/supported.md

@@ -354,8 +354,14 @@ audio video source track picture map area
   `aria-modal` / Escape are carried for you.
 - `variant:` takes a **bare style name only** (`variant:primary`). A computed
   value, or a `state` / loop variable, is `E-VARIANT-LITERAL`. The minimal
-  build styles `variant:primary`; other names (`ghost` / `danger` / …) emit
+  build styles `variant:primary`, `ghost` and `danger`; other names emit
   `data-variant=` but render plain until a `theme` / `recipe` styles them.
+- The default stylesheet styles every control and content element in light
+  and dark mode: text inputs, `select` and `textarea` share one look;
+  `checkbox`/`radio` sit beside their label; disabled controls (and their
+  labels) are faded; `fieldset`, tables, `details`, `progress`/`meter` and
+  `a` links are themed. It sits in a low cascade layer, so a `theme` /
+  `recipe` overrides it.
 - `text ... pre:true` (`text` only — any other element is `E-PRE-TARGET`)
   emits inline `white-space: pre-wrap` on that element, so embedded
   newlines and runs of whitespace render and copy exactly as given instead
@@ -615,15 +621,16 @@ shell is the same regardless of route; the client does the first render).
   through 45.7 in `NATIVE-ELEMENT-COVERAGE.md`. Document structure, block
   content and lists landed with 45.3 (above); `details`/`summary` are part
   of 45.5, not of it.
-- **Multi-page project builds do not apply `theme` / `recipe` styling.** The
-  pipeline emits no `app.css`; styled output is single-entry only. Not a
-  diagnostic — the project simply builds unstyled.
 - **No server-side rendering or hydration** for a multi-page project. The
   application shell is the same for every route and the client does the first
   render. Deliberate, not a gap being worked around.
-- No migrations, no OAuth / TOTP, no deployable production output, no styling
-  themes (`theme` / `recipe`) in the single-page starter, no npm escape
-  hatches (email / payments / storage).
+- No migrations, no OAuth / TOTP, no deployable production output, no npm
+  escape hatches (email / payments / storage).
+- **`theme` / `recipe` / `class:` styling does not work from an npm
+  install.** It needs the Tailwind toolchain, which this package does not
+  ship; a build that uses any of them fails with `E-CSS-TOOLCHAIN`. The
+  default styles (above) cover every control; the styling features work
+  only inside the Volaro repository.
 - Real screen-reader behaviour is **not certified** (build-time a11y rules
   are enforced; a full SR pass is owed). The manual SR-1–SR-11 protocol has
   **not** been walked against the client router either — its results template

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "volaro",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.5",
   "description": "Volaro \u2014 an application language written to be authored by an AI agent and read by a person. Ships the language reference and a working compiler for a supported subset (volaro check / build / dev). CLI: `volaro` (alias `vl`).",
   "repository": {
     "type": "git",