@getaster/elements 0.3.5 → 0.4.0

package/NOTICE

@@ -3,3 +3,7 @@ Copyright 2026 Aster UI contributors
 
 Aster UI code in this package is licensed under the Apache License, Version 2.0.
 See LICENSE. Separately installed dependencies retain their respective licenses.
+
+The font files in styles/fonts/ are licensed under the SIL Open Font License,
+Version 1.1. Their copyright notices and license texts are in the
+OFL-bricolage-grotesque.txt and OFL-fraunces.txt files beside them.

package/README.md

@@ -18,6 +18,12 @@ resolves npm modules and CSS imports. The package ships TypeScript declarations.
 Its main entry registers browser elements and requires a DOM; use
 `@getaster/data` for headless work. Package tooling requires Node 22 or later.
 
+`@getaster/elements/styles/theme-lamplight.css` and
+`@getaster/elements/styles/theme-harbour.css` each compose the base primitives,
+element styles and one identity. Lamplight's entry also loads the packaged
+Bricolage Grotesque and Fraunces Latin faces from
+`@getaster/elements/styles/fonts.css`. Import one composed entry, not the parts.
+
 ## Connect a grid
 
 With an OData service exposing a `Projects` entity set and JSON CSDL metadata:
@@ -52,10 +58,13 @@ keyboard interaction and semantic markup; application labels, focus flow and
 accessibility still need testing in the completed application.
 
 The package depends on Aster's data core, Lit HTML and Preact signals. Keep one
-compatible copy of each shared runtime in your build. The optional ECharts
-adapter accepts an application-supplied runtime; ECharts, showcase data, fonts
-and the mock service are not bundled into this package. There are no install
-scripts.
+compatible copy of each shared runtime in your build. The YAML compiler is a
+separate subpath, `@getaster/elements/yaml`, and is the only entry that loads
+the `yaml` parser; a browser that imports a compiled definition never loads it.
+The optional ECharts adapter accepts an application-supplied runtime; ECharts,
+showcase data and the mock service are not bundled into this package. The
+Lamplight font files and their SIL Open Font License texts are included under
+`styles/fonts/`. There are no install scripts.
 
 ## Documentation and support
 

package/bin/aster-theme-check.js

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 // @bun
 
-// packages/elements/tools/aster-theme-check.ts
-import { readFileSync } from "fs";
+// packages/elements/tools/theme-check.ts
+import { readFileSync } from "node:fs";
+import { dirname, resolve as resolvePath } from "node:path";
 
 // packages/elements/src/styles/contract.ts
 var TOKENS = {
@@ -34,8 +35,23 @@ var TOKENS = {
 var TOKEN_NAMES = Object.values(TOKENS).flat().map((t) => `--aster-${t}`);
 var DENSITY = ["ctl", "ctl-tight", "pad-y", "row-y", "pad", "gap"];
 var DENSITY_NAMES = DENSITY.map((t) => `--aster-${t}`);
+var COMPONENT_VARS = {
+  form: ["label-width"],
+  grid: ["header-height", "toolbar-height", "row-min-height", "tree-indent", "summary-height"],
+  menu: ["cell-height", "icon-size"],
+  window: ["header-height"],
+  dialog: ["max-width"]
+};
+var COMPONENT_VAR_NAMES = Object.entries(COMPONENT_VARS).flatMap(([component, names]) => names.map((name) => `--aster-${component}-${name}`));
 
 // packages/elements/tools/theme-check.ts
+function readWithImports(file, seen = new Set) {
+  const path = resolvePath(file);
+  if (seen.has(path))
+    return "";
+  seen.add(path);
+  return readFileSync(path, "utf8").replace(/@import\s+(?:url\()?["']([^"']+)["']\)?[^;]*;/g, (rule, target) => target.startsWith(".") ? readWithImports(resolvePath(dirname(path), target), seen) : rule);
+}
 var PAIRS = [
   ["text", "surface", 4.5],
   ["text", "page", 4.5],
@@ -59,8 +75,23 @@ var PAIRS = [
   ["toast-text", "toast-bg", 4.5],
   ["toast-action", "toast-bg", 4.5]
 ];
-function identities(css) {
+function identityLayer(css) {
   const text = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  const start = /@layer\s+aster\.identity\s*\{/.exec(text)?.index;
+  if (start === undefined)
+    return text;
+  const open = text.indexOf("{", start);
+  let depth = 0;
+  for (let i = open;i < text.length; i++) {
+    if (text[i] === "{")
+      depth++;
+    else if (text[i] === "}" && --depth === 0)
+      return text.slice(open + 1, i);
+  }
+  return text.slice(open + 1);
+}
+function identities(css) {
+  const text = identityLayer(css);
   const found = new Map;
   for (const m of text.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
     const selector = m[1].trim();
@@ -298,7 +329,7 @@ if (files.length === 0) {
 }
 var failed = false;
 for (const file of files) {
-  const found = identities(readFileSync(file, "utf8"));
+  const found = identities(readWithImports(file));
   if (found.length === 0) {
     console.log(`\u2717 ${file}: no :root rule with --aster- tokens`);
     failed = true;

package/dist/base/element.d.ts

@@ -34,7 +34,14 @@ export declare abstract class AsterElement extends HTMLElement {
     protected onDisconnect(cleanup: () => void): void;
     /** Listens on `target` until the element disconnects. */
     protected listen<K extends keyof WindowEventMap>(target: EventTarget, type: K, handler: (event: WindowEventMap[K]) => void, options?: AddEventListenerOptions): void;
-    protected emit<T>(type: string, detail?: T): boolean;
+    /**
+     * Dispatches a bubbling CustomEvent. Action events are cancelable by
+     * default; a notification that fires after the fact passes
+     * `{ cancelable: false }`.
+     */
+    protected emit<T>(type: string, detail?: T, options?: {
+        readonly cancelable?: boolean;
+    }): boolean;
 }
 export declare function define(name: string, ctor: CustomElementConstructor): void;
 /** Makes `scope` the page scope for `el` and everything inside it. */

package/dist/base/element.js

@@ -66,8 +66,13 @@ export class AsterElement extends HTMLElement {
         target.addEventListener(type, handler, options);
         this.onDisconnect(() => target.removeEventListener(type, handler, options));
     }
-    emit(type, detail) {
-        return this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, cancelable: true }));
+    /**
+     * Dispatches a bubbling CustomEvent. Action events are cancelable by
+     * default; a notification that fires after the fact passes
+     * `{ cancelable: false }`.
+     */
+    emit(type, detail, options = {}) {
+        return this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, cancelable: options.cancelable ?? true }));
     }
     #upgradeProperties() {
         for (const name of Object.keys(this)) {

package/dist/button/button.d.ts

@@ -1,12 +1,17 @@
 import { AsterElement, type Bindable, type View } from "../base/element.ts";
+/** A button's visual weight: neutral, accented, or destructive. */
+export type ButtonTone = "secondary" | "primary" | "danger";
+/** A button's size on the density scale. */
+export type ButtonSize = "sm" | "md" | "lg";
 /**
  * A button with every state: rest, hover, pressed, focus, busy and
  * disabled. Busy and confirmation swap the label in place; every label is
  * stacked in one grid cell, so the width never changes. While busy, clicks
  * are ignored and a submit doesn't fire.
  *
- * Prefer `reason` to disabling: the button stays focusable, says why in its
- * title, and its click is swallowed.
+ * `disabled` is the native state: the button leaves the tab order and can't
+ * be pressed. Prefer `reason` for an advisory refusal: the button stays
+ * focusable, says why in its title, and its click is swallowed.
  */
 export declare class Button extends AsterElement {
     #private;
@@ -20,8 +25,18 @@ export declare class Button extends AsterElement {
     set confirmLabel(v: string | undefined);
     get busy(): Bindable<boolean>;
     set busy(v: Bindable<boolean>);
+    /** Sugar for `tone`: `"primary"` or `"secondary"`. A `"danger"` tone reads back as secondary. */
     get variant(): "secondary" | "primary";
     set variant(v: "secondary" | "primary");
+    /** The button's visual weight. Default `"secondary"`. */
+    get tone(): ButtonTone;
+    set tone(v: ButtonTone);
+    /** The button's size. Default `"md"`. */
+    get size(): ButtonSize;
+    set size(v: ButtonSize);
+    /** The native disabled state: out of the tab order, and no click or submit. Default `false`. */
+    get disabled(): boolean;
+    set disabled(v: boolean);
     get type(): "button" | "submit";
     set type(v: "button" | "submit");
     get icon(): View;

package/dist/button/button.js

@@ -6,8 +6,9 @@ import { AsterElement, define, read } from "../base/element.js";
  * stacked in one grid cell, so the width never changes. While busy, clicks
  * are ignored and a submit doesn't fire.
  *
- * Prefer `reason` to disabling: the button stays focusable, says why in its
- * title, and its click is swallowed.
+ * `disabled` is the native state: the button leaves the tab order and can't
+ * be pressed. Prefer `reason` for an advisory refusal: the button stays
+ * focusable, says why in its title, and its click is swallowed.
  */
 export class Button extends AsterElement {
     #label = this.prop("");
@@ -15,7 +16,9 @@ export class Button extends AsterElement {
     #confirmLabel = this.prop(undefined);
     #busy = this.prop(false);
     #confirming = this.prop(false);
-    #variant = this.prop("secondary");
+    #tone = this.prop("secondary");
+    #size = this.prop("md");
+    #disabled = this.prop(false);
     #type = this.prop("button");
     #icon = this.prop(nothing);
     #reason = this.prop(undefined);
@@ -46,11 +49,39 @@ export class Button extends AsterElement {
     set busy(v) {
         this.#busy.value = v;
     }
+    /** Sugar for `tone`: `"primary"` or `"secondary"`. A `"danger"` tone reads back as secondary. */
     get variant() {
-        return this.#variant.value;
+        return this.#tone.value === "primary" ? "primary" : "secondary";
     }
     set variant(v) {
-        this.#variant.value = v;
+        if (v !== "secondary" && v !== "primary")
+            throw new TypeError('variant must be "secondary" or "primary"');
+        this.#tone.value = v;
+    }
+    /** The button's visual weight. Default `"secondary"`. */
+    get tone() {
+        return this.#tone.value;
+    }
+    set tone(v) {
+        if (v !== "secondary" && v !== "primary" && v !== "danger")
+            throw new TypeError('tone must be "secondary", "primary" or "danger"');
+        this.#tone.value = v;
+    }
+    /** The button's size. Default `"md"`. */
+    get size() {
+        return this.#size.value;
+    }
+    set size(v) {
+        if (v !== "sm" && v !== "md" && v !== "lg")
+            throw new TypeError('size must be "sm", "md" or "lg"');
+        this.#size.value = v;
+    }
+    /** The native disabled state: out of the tab order, and no click or submit. Default `false`. */
+    get disabled() {
+        return this.#disabled.value;
+    }
+    set disabled(v) {
+        this.#disabled.value = v;
     }
     get type() {
         return this.#type.value;
@@ -90,8 +121,11 @@ export class Button extends AsterElement {
         const labels = [this.#label.value, this.#busyLabel.value, this.#confirmLabel.value];
         const showing = busy && labels[1] ? 1 : confirming && labels[2] ? 2 : 0;
         const reason = this.#reason.value;
-        return html `<button class="aster-button" type=${this.#type.value} data-variant=${this.#variant.value}
-      aria-busy=${busy ? "true" : "false"} aria-disabled=${reason ? "true" : nothing} title=${reason ?? nothing}>
+        const disabled = this.#disabled.value;
+        return html `<button class="aster-button" type=${this.#type.value} data-tone=${this.#tone.value}
+      data-variant=${this.#tone.value === "primary" ? "primary" : "secondary"} data-size=${this.#size.value}
+      ?disabled=${disabled}
+      aria-busy=${busy ? "true" : "false"} aria-disabled=${reason && !disabled ? "true" : nothing} title=${reason ?? nothing}>
       ${this.#icon.value}
       <span class="aster-label-swap">
         ${labels.map((l, i) => (l === undefined ? nothing : html `<span ?data-off=${i !== showing}>${l}</span>`))}
@@ -99,7 +133,7 @@ export class Button extends AsterElement {
     </button>`;
     }
     #guard(e) {
-        if (read(this.#busy.peek()) || this.#reason.peek()) {
+        if (this.#disabled.peek() || read(this.#busy.peek()) || this.#reason.peek()) {
             e.preventDefault();
             e.stopImmediatePropagation();
         }