@honua/app-platform 0.1.2-beta.0 → 0.1.4-beta.0

package/controls/layer-list.js

@@ -31,7 +31,10 @@
  * - `overlays` — JSON array of {@link HonuaLayerListOverlay} (the `overlays`
  *   property is preferred for non-trivial configs).
  * - `for` — id of the map-providing element, see Wiring.
- * - `label` — accessible name of the list (default "Layers").
+ * - `label` — accessible name of the list (default "Layers"); reflects the
+ *   `label` property.
+ * - `not-seeded-label` — fallback text for the disabled-row badge (default
+ *   "Not seeded"); reflects `notSeededLabel`.
  * - `auto-refresh` — boolean; see Reactivity.
  *
  * ## CSS parts
@@ -43,7 +46,7 @@
  * Rows are real `<label>` + `<input type="checkbox">` pairs; an overlay whose
  * style layers are all missing renders disabled with a `badge` part/slot.
  */
-import { HTMLElementBase, escapeAttribute, escapeHtml, globalDom, listenForHonuaMapReady, resolveHonuaMapFromContext, } from "./element-utils.js";
+import { HTMLElementBase, escapeAttribute, escapeHtml, globalDom, listenForHonuaMapReady, renderShadowRoot, resolveHonuaMapFromContext, } from "./element-utils.js";
 /**
  * Custom element implementing the overlay layer list. Registered as
  * `honua-layer-list` by `defineHonuaControls` (which runs automatically on
@@ -51,7 +54,7 @@ import { HTMLElementBase, escapeAttribute, escapeHtml, globalDom, listenForHonua
  */
 export class HonuaLayerListElement extends HTMLElementBase {
     static get observedAttributes() {
-        return ["overlays", "for", "label", "auto-refresh"];
+        return ["overlays", "for", "label", "not-seeded-label", "auto-refresh"];
     }
     #map;
     #overlays = [];
@@ -74,6 +77,30 @@ export class HonuaLayerListElement extends HTMLElementBase {
     connect(map) {
         this.map = map;
     }
+    /** Accessible name of the list. Reflects the `label` attribute. */
+    get label() {
+        return this.#attr("label") ?? "Layers";
+    }
+    set label(value) {
+        if (typeof this.setAttribute !== "function")
+            return;
+        if (value === undefined)
+            this.removeAttribute?.("label");
+        else
+            this.setAttribute("label", value);
+    }
+    /** Fallback text for an overlay whose style layers are not seeded. */
+    get notSeededLabel() {
+        return this.#attr("not-seeded-label") ?? "Not seeded";
+    }
+    set notSeededLabel(value) {
+        if (typeof this.setAttribute !== "function")
+            return;
+        if (value === undefined)
+            this.removeAttribute?.("not-seeded-label");
+        else
+            this.setAttribute("not-seeded-label", value);
+    }
     /** The registered overlay definitions. */
     get overlays() {
         return this.#overlays;
@@ -141,7 +168,7 @@ export class HonuaLayerListElement extends HTMLElementBase {
                 this.#subscribeStyledata();
             return;
         }
-        // "label" only changes the rendering.
+        // "label" / "not-seeded-label" only change the rendering.
         this.render();
     }
     connectedCallback() {
@@ -231,14 +258,19 @@ export class HonuaLayerListElement extends HTMLElementBase {
         const root = this.shadowRoot;
         if (!root)
             return;
-        const label = this.#attr("label") ?? "Layers";
-        root.innerHTML = `
-      <style>${structuralStyles()}</style>
+        const focusedOverlayId = root.activeElement?.getAttribute("data-overlay-id");
+        const label = this.label;
+        renderShadowRoot(root, structuralStyles(), `
       <div part="root" class="root" role="group" aria-label="${escapeAttribute(label)}">
         ${this.#overlays.map((overlay) => this.#renderRow(overlay)).join("")}
       </div>
-    `;
+    `);
         this.#bindRows(root);
+        if (focusedOverlayId) {
+            [...root.querySelectorAll("input[data-overlay-id]")]
+                .find((input) => input.getAttribute("data-overlay-id") === focusedOverlayId)
+                ?.focus({ preventScroll: true });
+        }
     }
     #renderRow(overlay) {
         const seeded = this.#isSeeded(overlay);
@@ -246,7 +278,9 @@ export class HonuaLayerListElement extends HTMLElementBase {
         const attribution = overlay.attribution
             ? `<span part="attribution" class="attribution">${escapeHtml(overlay.attribution)}</span>`
             : "";
-        const badge = seeded ? "" : `<span part="badge" class="badge"><slot name="not-seeded">Not seeded</slot></span>`;
+        const badge = seeded
+            ? ""
+            : `<span part="badge" class="badge"><slot name="not-seeded">${escapeHtml(this.notSeededLabel)}</slot></span>`;
         return `
       <label part="row" class="row" data-overlay-id="${escapeAttribute(overlay.id)}"${seeded ? "" : " data-not-seeded"}>
         <input
@@ -306,10 +340,9 @@ export class HonuaLayerListElement extends HTMLElementBase {
  * Unlike the other controls-kit elements, this is **opt-in** and is NOT run by
  * the blanket `defineHonuaControls()` / module-load auto-registration. The
  * `web-components` entry ships its own (controller-driven) `honua-layer-list`
- * under the same tag, and that kit auto-registers on import. Auto-registering
- * the controls variant too would let it silently win the tag in apps that load
- * both kits (the order is import-dependent), so callers who want the native,
- * overlay-definition-driven layer list register it explicitly:
+ * under the same tag and is that tag's canonical/default registrant (see
+ * `./catalog.js`), so callers who want the native, overlay-definition-driven
+ * layer list register it explicitly:
  *
  * ```ts
  * import { defineHonuaLayerList } from "@honua/sdk-js/controls";
@@ -365,11 +398,35 @@ function cssEscape(value) {
 /** Structural-only styles; theme via `::part(root)`, `::part(row)`, `::part(checkbox)`, ... */
 function structuralStyles() {
     return `
-    :host { display: block; }
+    :host {
+      display: block;
+      box-sizing: border-box;
+      min-width: 0;
+      max-width: 100%;
+    }
     .root { display: flex; flex-direction: column; }
-    .row { display: flex; align-items: center; gap: 0.5em; }
+    .root, .row {
+      box-sizing: border-box;
+      min-width: 0;
+      max-width: 100%;
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+      overflow-wrap: anywhere;
+    }
     .checkbox { flex: none; }
+    .label, .attribution, .badge {
+      min-width: 0;
+      max-width: 100%;
+      overflow-wrap: anywhere;
+    }
     .badge { font-size: 0.75em; }
     [data-not-seeded] { cursor: not-allowed; }
+    @media (forced-colors: active), (prefers-contrast: more) {
+      .row:has(.checkbox:checked) { outline: 2px solid CanvasText; outline-offset: 2px; }
+      .row[data-not-seeded] { color: GrayText; }
+    }
   `;
 }

package/controls/legend.d.ts

@@ -33,6 +33,8 @@
  * - `for` — id of the map-providing element.
  * - `layer` — style layer id to derive entries from.
  * - `layer-title` — optional title rendered above the derived section.
+ * - `fallback-label` — label for a derived expression's fallback branch
+ *   (default "Other"); reflects `fallbackLabel`.
  * - `heading` — optional heading rendered above the whole legend.
  * - `follow-layer-visibility` — boolean; hide a section while its source
  *   layer's `visibility` layout property is `"none"` (sections carry the
@@ -48,16 +50,21 @@
  * presentation, with the text labels carrying the meaning.
  *
  * Note: the `web-components` entry also registers a (controller-driven)
- * `honua-legend` element. Both registrations are guarded with an if-missing
- * check, so whichever entry is imported first owns the tag; import
- * `@honua/sdk-js/controls` first to use this element.
+ * `honua-legend` element, and is that tag's canonical/default registrant
+ * (see `./catalog.js`) — importing `@honua/sdk-js/controls` alone or
+ * alongside `@honua/sdk-js/web-components`, in either order, never registers
+ * this implementation automatically. Call {@link defineHonuaLegend} (or
+ * `registerComponent("controls.legend")` from `./registry.js`) explicitly,
+ * before anything else claims the tag, to use this map-style-derived element
+ * instead.
  */
 import { HTMLElementBase } from "./element-utils.js";
 import type { HonuaLegendEntry, HonuaLegendMap, HonuaLegendSection } from "./types.js";
 /**
  * Custom element implementing the legend. Registered as `honua-legend` by
- * `defineHonuaControls` (which runs automatically on import of the controls
- * entry when a `customElements` registry exists).
+ * {@link defineHonuaLegend} (opt-in; not part of the blanket
+ * {@link defineHonuaControls} auto-registration — see that function's doc for
+ * why).
  */
 export declare class HonuaLegendElement extends HTMLElementBase {
     #private;
@@ -67,6 +74,9 @@ export declare class HonuaLegendElement extends HTMLElementBase {
     set map(map: HonuaLegendMap | undefined);
     /** Wires the legend to a MapLibre map. Equivalent to setting `.map`. */
     connect(map: HonuaLegendMap): void;
+    /** Label for a derived expression's fallback branch. Reflects `fallback-label`. */
+    get fallbackLabel(): string;
+    set fallbackLabel(value: string | undefined);
     /**
      * Explicit legend content. Accepts a flat {@link HonuaLegendEntry} array
      * (one untitled section), {@link HonuaLegendSection} groups, or a mix;
@@ -101,4 +111,21 @@ export declare class HonuaLegendElement extends HTMLElementBase {
     disconnectedCallback(): void;
     protected render(): void;
 }
+/**
+ * Registers the legend custom element (`honua-legend`) with the
+ * map-style-derived, framework-free implementation. Skips the registration
+ * when the tag is already defined.
+ *
+ * Like {@link defineHonuaLayerList}, this is **opt-in** and is NOT run by the
+ * blanket `defineHonuaControls()` / module-load auto-registration — the
+ * `web-components` entry ships its own (controller-driven) `honua-legend`
+ * and is that tag's canonical/default registrant, so a caller who wants this
+ * implementation instead claims the tag explicitly:
+ *
+ * ```ts
+ * import { defineHonuaLegend } from "@honua/sdk-js/controls";
+ * defineHonuaLegend();
+ * ```
+ */
+export declare function defineHonuaLegend(registry?: CustomElementRegistry): void;
 //# sourceMappingURL=legend.d.ts.map

package/controls/legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../src/controls/legend.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AAEH,OAAO,EACL,eAAe,EAKhB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,kBAAkB,EAA0B,MAAM,YAAY,CAAC;AAE/G;;;;GAIG;AACH,qBAAa,kBAAmB,SAAQ,eAAe;;IACrD,WAAkB,kBAAkB,IAAI,MAAM,EAAE,CAE/C;IAUD,qFAAqF;IACrF,IAAW,GAAG,IAAI,cAAc,GAAG,SAAS,CAE3C;IAED,IAAW,GAAG,CAAC,GAAG,EAAE,cAAc,GAAG,SAAS,EAM7C;IAED,wEAAwE;IACjE,OAAO,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI;IAIzC;;;;OAIG;IACH,IAAW,OAAO,IAAI,SAAS,kBAAkB,EAAE,CAElD;IAED,IAAW,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC,gBAAgB,GAAG,kBAAkB,CAAC,EAAE,EAG3E;IAED,0EAA0E;IAC1E,IAAW,KAAK,IAAI,MAAM,GAAG,SAAS,CAErC;IAED,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAIzC;IAED,sFAAsF;IACtF,IAAW,qBAAqB,IAAI,OAAO,CAE1C;IAED,IAAW,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAE9C;IAED,qFAAqF;IACrF,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,OAAO,EAEpC;IAED;;;;OAIG;IACH,IAAW,WAAW,IAAI,MAAM,GAAG,SAAS,CAE3C;IAED;;;OAGG;IACH,IAAW,QAAQ,IAAI,SAAS,kBAAkB,EAAE,CAQnD;IAED,4EAA4E;IACrE,OAAO,IAAI,IAAI;IAKf,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAkB/F,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAyEnC,SAAS,CAAC,MAAM,IAAI,IAAI;CAgDzB"}
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../src/controls/legend.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH,OAAO,EACL,eAAe,EAOhB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,kBAAkB,EAA0B,MAAM,YAAY,CAAC;AAE/G;;;;;GAKG;AACH,qBAAa,kBAAmB,SAAQ,eAAe;;IACrD,WAAkB,kBAAkB,IAAI,MAAM,EAAE,CAE/C;IAUD,qFAAqF;IACrF,IAAW,GAAG,IAAI,cAAc,GAAG,SAAS,CAE3C;IAED,IAAW,GAAG,CAAC,GAAG,EAAE,cAAc,GAAG,SAAS,EAM7C;IAED,wEAAwE;IACjE,OAAO,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI;IAIzC,mFAAmF;IACnF,IAAW,aAAa,IAAI,MAAM,CAEjC;IAED,IAAW,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAIjD;IAED;;;;OAIG;IACH,IAAW,OAAO,IAAI,SAAS,kBAAkB,EAAE,CAElD;IAED,IAAW,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC,gBAAgB,GAAG,kBAAkB,CAAC,EAAE,EAG3E;IAED,0EAA0E;IAC1E,IAAW,KAAK,IAAI,MAAM,GAAG,SAAS,CAErC;IAED,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAIzC;IAED,sFAAsF;IACtF,IAAW,qBAAqB,IAAI,OAAO,CAE1C;IAED,IAAW,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAE9C;IAED,qFAAqF;IACrF,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,OAAO,EAEpC;IAED;;;;OAIG;IACH,IAAW,WAAW,IAAI,MAAM,GAAG,SAAS,CAE3C;IAED;;;OAGG;IACH,IAAW,QAAQ,IAAI,SAAS,kBAAkB,EAAE,CAQnD;IAED,4EAA4E;IACrE,OAAO,IAAI,IAAI;IAKf,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAkB/F,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IA2EnC,SAAS,CAAC,MAAM,IAAI,IAAI;CAmDzB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,wBAA2B,GAAG,IAAI,CAK3E"}

package/controls/legend.js

@@ -33,6 +33,8 @@
  * - `for` — id of the map-providing element.
  * - `layer` — style layer id to derive entries from.
  * - `layer-title` — optional title rendered above the derived section.
+ * - `fallback-label` — label for a derived expression's fallback branch
+ *   (default "Other"); reflects `fallbackLabel`.
  * - `heading` — optional heading rendered above the whole legend.
  * - `follow-layer-visibility` — boolean; hide a section while its source
  *   layer's `visibility` layout property is `"none"` (sections carry the
@@ -48,20 +50,25 @@
  * presentation, with the text labels carrying the meaning.
  *
  * Note: the `web-components` entry also registers a (controller-driven)
- * `honua-legend` element. Both registrations are guarded with an if-missing
- * check, so whichever entry is imported first owns the tag; import
- * `@honua/sdk-js/controls` first to use this element.
+ * `honua-legend` element, and is that tag's canonical/default registrant
+ * (see `./catalog.js`) — importing `@honua/sdk-js/controls` alone or
+ * alongside `@honua/sdk-js/web-components`, in either order, never registers
+ * this implementation automatically. Call {@link defineHonuaLegend} (or
+ * `registerComponent("controls.legend")` from `./registry.js`) explicitly,
+ * before anything else claims the tag, to use this map-style-derived element
+ * instead.
  */
-import { HTMLElementBase, escapeAttribute, escapeHtml, listenForHonuaMapReady, resolveHonuaMapFromContext, } from "./element-utils.js";
-import { HonuaLegendDeriveError, deriveLegendEntries } from "./legend-derive.js";
+import { HTMLElementBase, escapeAttribute, escapeHtml, globalDom, listenForHonuaMapReady, renderShadowRoot, resolveHonuaMapFromContext, } from "./element-utils.js";
+import { HONUA_LEGEND_FALLBACK_LABEL, HonuaLegendDeriveError, deriveLegendEntries } from "./legend-derive.js";
 /**
  * Custom element implementing the legend. Registered as `honua-legend` by
- * `defineHonuaControls` (which runs automatically on import of the controls
- * entry when a `customElements` registry exists).
+ * {@link defineHonuaLegend} (opt-in; not part of the blanket
+ * {@link defineHonuaControls} auto-registration — see that function's doc for
+ * why).
  */
 export class HonuaLegendElement extends HTMLElementBase {
     static get observedAttributes() {
-        return ["for", "layer", "layer-title", "heading", "follow-layer-visibility", "auto-refresh"];
+        return ["for", "layer", "layer-title", "fallback-label", "heading", "follow-layer-visibility", "auto-refresh"];
     }
     #map;
     #explicitSections = [];
@@ -86,6 +93,18 @@ export class HonuaLegendElement extends HTMLElementBase {
     connect(map) {
         this.map = map;
     }
+    /** Label for a derived expression's fallback branch. Reflects `fallback-label`. */
+    get fallbackLabel() {
+        return this.#attr("fallback-label") ?? HONUA_LEGEND_FALLBACK_LABEL;
+    }
+    set fallbackLabel(value) {
+        if (typeof this.setAttribute !== "function")
+            return;
+        if (value === undefined)
+            this.removeAttribute?.("fallback-label");
+        else
+            this.setAttribute("fallback-label", value);
+    }
     /**
      * Explicit legend content. Accepts a flat {@link HonuaLegendEntry} array
      * (one untitled section), {@link HonuaLegendSection} groups, or a mix;
@@ -156,7 +175,7 @@ export class HonuaLegendElement extends HTMLElementBase {
             this.#resolveMapFromContext();
             return;
         }
-        if (name === "layer" || name === "layer-title") {
+        if (name === "layer" || name === "layer-title" || name === "fallback-label") {
             this.refresh();
             return;
         }
@@ -194,7 +213,7 @@ export class HonuaLegendElement extends HTMLElementBase {
             return;
         }
         try {
-            this.#derivedEntries = deriveLegendEntries(map, layerId);
+            this.#derivedEntries = deriveLegendEntries(map, layerId).map((entry) => entry.label === HONUA_LEGEND_FALLBACK_LABEL ? { ...entry, label: this.fallbackLabel } : entry);
             this.#deriveError = undefined;
         }
         catch (error) {
@@ -254,13 +273,12 @@ export class HonuaLegendElement extends HTMLElementBase {
         if (!root)
             return;
         const heading = this.#attr("heading");
-        root.innerHTML = `
-      <style>${structuralStyles()}</style>
+        renderShadowRoot(root, structuralStyles(), `
       <div part="root" class="root">
         ${heading ? `<p part="heading" class="heading">${escapeHtml(heading)}</p>` : ""}
         ${this.sections.map((section) => this.#renderSection(section)).join("")}
       </div>
-    `;
+    `);
     }
     #renderSection(section) {
         const hidden = this.#sectionHidden(section);
@@ -296,6 +314,29 @@ export class HonuaLegendElement extends HTMLElementBase {
             this.removeAttribute?.(name);
     }
 }
+/**
+ * Registers the legend custom element (`honua-legend`) with the
+ * map-style-derived, framework-free implementation. Skips the registration
+ * when the tag is already defined.
+ *
+ * Like {@link defineHonuaLayerList}, this is **opt-in** and is NOT run by the
+ * blanket `defineHonuaControls()` / module-load auto-registration — the
+ * `web-components` entry ships its own (controller-driven) `honua-legend`
+ * and is that tag's canonical/default registrant, so a caller who wants this
+ * implementation instead claims the tag explicitly:
+ *
+ * ```ts
+ * import { defineHonuaLegend } from "@honua/sdk-js/controls";
+ * defineHonuaLegend();
+ * ```
+ */
+export function defineHonuaLegend(registry = globalDom.customElements) {
+    if (!registry)
+        return;
+    if (!registry.get("honua-legend")) {
+        registry.define("honua-legend", HonuaLegendElement);
+    }
+}
 function normalizeSections(value) {
     const sections = [];
     let loose = [];
@@ -348,13 +389,16 @@ function renderRow(entry) {
     const fill = typeof entry.color === "string" ? entry.color : entry.color.fill;
     const outline = typeof entry.color === "object" && entry.color !== null ? entry.color.outline : undefined;
     const shape = entry.shape ?? "fill";
-    const swatchStyle = [
-        ...(fill !== undefined ? [`--legend-fill:${fill}`] : []),
-        ...(outline !== undefined ? [`--legend-outline:${outline}`] : []),
-    ].join(";");
+    const fillAttribute = escapeAttribute(fill ?? "transparent");
+    const outlineAttribute = escapeAttribute(outline ?? "none");
+    const mark = shape === "line"
+        ? `<line x1="1" y1="8" x2="15" y2="8" stroke="${fillAttribute}" stroke-width="3" />`
+        : shape === "circle"
+            ? `<circle cx="8" cy="8" r="7" fill="${fillAttribute}" stroke="${outlineAttribute}" />`
+            : `<rect x="1" y="1" width="14" height="14" fill="${fillAttribute}" stroke="${outlineAttribute}" />`;
     return `
     <li part="row" class="row">
-      <span part="swatch" class="swatch swatch-${shape}" aria-hidden="true"${swatchStyle ? ` style="${escapeAttribute(swatchStyle)}"` : ""}></span>
+      <svg part="swatch" class="swatch swatch-${shape}" aria-hidden="true" viewBox="0 0 16 16">${mark}</svg>
       <span part="label" class="label">${escapeHtml(entry.label)}</span>
     </li>
   `;
@@ -362,20 +406,46 @@ function renderRow(entry) {
 /** Structural-only styles; theme via `::part(root)`, `::part(row)`, `::part(swatch)`, ... */
 function structuralStyles() {
     return `
-    :host { display: block; }
+    :host {
+      display: block;
+      box-sizing: border-box;
+      min-width: 0;
+      max-width: 100%;
+    }
+    .root, .section, .rows {
+      box-sizing: border-box;
+      min-width: 0;
+      max-width: 100%;
+    }
     .heading, .section-title { margin: 0; }
     .section { margin: 0; }
     .rows { list-style: none; margin: 0; padding: 0; }
-    .row { display: flex; align-items: center; gap: 0.5em; }
+    .row {
+      display: flex;
+      flex-direction: row;
+      direction: inherit;
+      align-items: center;
+      gap: 0.5em;
+      min-width: 0;
+      max-width: 100%;
+      overflow-wrap: anywhere;
+    }
+    .heading, .section-title, .label {
+      min-width: 0;
+      max-width: 100%;
+      overflow-wrap: anywhere;
+    }
+    .label { text-align: start; }
     .swatch {
       flex: none;
       inline-size: 1em;
       block-size: 1em;
-      box-sizing: border-box;
-      background: var(--legend-fill, transparent);
-      border: 1px solid var(--legend-outline, transparent);
+      overflow: visible;
+    }
+    @media (forced-colors: active), (prefers-contrast: more) {
+      .row { color: CanvasText; }
+      .swatch { color: CanvasText; forced-color-adjust: none; }
+      .swatch > * { forced-color-adjust: none; }
     }
-    .swatch-line { block-size: 3px; border: none; }
-    .swatch-circle { border-radius: 50%; }
   `;
 }

package/controls/qualification.d.ts

@@ -0,0 +1,152 @@
+/**
+ * The **production qualification matrix** for the Honua custom-element kit
+ * (issue #683, parent epic #678; REQ-004 / REQ-005 / NFR-001).
+ *
+ * Epic #678's premise is that "production support" for a component library is
+ * not a claim anybody gets to make in prose. It is a matrix: every shipped
+ * component × every gate that matters, each cell carrying a status and, when
+ * the status is a claim of success, the automated evidence that backs it. This
+ * module is that matrix, and it extends the existing component catalog
+ * ({@link "./catalog.js"}) rather than introducing a second inventory —
+ * `HONUA_COMPONENT_CATALOG` remains the single list of shipped tags, and every
+ * catalog id must appear here exactly once (enforced by
+ * `scripts/component-qualification.mjs`).
+ *
+ * ## The honesty rules
+ *
+ * The matrix is seeded from what the test suite *actually* asserts today, not
+ * from what the components ought to do. Concretely:
+ *
+ * - `"passing"` requires at least one existing test file as evidence, and the
+ *   CI verifier fails if any referenced file is missing. Deleting the test that
+ *   backs a gate therefore breaks the build rather than quietly downgrading the
+ *   claim.
+ * - `"failing"` is used where the requirement is *known* not to be met —
+ *   including from code inspection, before an automated gate exists. It always
+ *   carries a note naming the mechanism. This is deliberately more informative
+ *   than `"pending"`: "we know the components hard-code English strings" is a
+ *   different engineering state from "nobody has looked".
+ * - `"pending"` means no automated gate and no established verdict. It is the
+ *   default, and most of this matrix is honestly in it.
+ * - `"not-applicable"` requires a note justifying why the gate cannot apply to
+ *   that component — it is the only status that can silently remove work, so it
+ *   is the one that most needs an argument attached.
+ *
+ * Nothing here is aspirational, and this matrix is a *different axis* from the
+ * catalog's `supportTier`. The tier records the functional maturity whichever
+ * feature issue (#680-#683) delivered on a component; this records the
+ * cross-cutting gates, which no component has cleared yet. The verifier enforces
+ * only the direction that is implied — clearing every gate requires the
+ * production tier, since gate completion is the harder bar — and surfaces every
+ * production-tier component's still-open gates rather than pretending the tier
+ * settles them. See {@link isComponentProductionQualified} and
+ * {@link listOpenQualificationGates}.
+ *
+ * ## Shape
+ *
+ * The declarations below are stored **inverted** — per gate, the groups of
+ * components that share a status and evidence — because that is how the
+ * evidence actually clusters (one test file typically proves one gate for
+ * several components) and because it keeps the reviewable diff small. The
+ * public API ({@link getComponentQualification},
+ * {@link listComponentQualifications}) expands it back into the dense
+ * per-component × per-gate matrix that consumers and the generated
+ * `config/component-qualification.v1.json` manifest want.
+ *
+ * Like `./catalog.js` this module is pure metadata: no DOM, no element classes,
+ * no registration, no `src/core` or `src/runtime` import. Importing it costs a
+ * consumer bundle nothing that NFR-001 forbids.
+ *
+ * @module
+ */
+import { type HonuaComponentCatalogEntry } from "./catalog.js";
+/**
+ * Bumped whenever a gate is added/removed or a status vocabulary changes, so
+ * the generated manifest and any external consumer can detect a shape change
+ * distinctly from a routine status update.
+ */
+export declare const HONUA_COMPONENT_QUALIFICATION_DATA_VERSION = "1.1.0";
+/** Which issue requirement a gate discharges. */
+export type HonuaComponentQualificationRequirement = "REQ-004" | "REQ-005" | "NFR-001";
+/** Closed status vocabulary. See the module doc for the honesty rules. */
+export type HonuaComponentQualificationStatus = "passing" | "failing" | "pending" | "not-applicable";
+/** Every status, in escalating-confidence order. */
+export declare const HONUA_COMPONENT_QUALIFICATION_STATUSES: readonly HonuaComponentQualificationStatus[];
+/** Stable gate ids. Never reused; adding one bumps the data version. */
+export type HonuaComponentQualificationGateId = "keyboard-behavior" | "screen-reader-semantics" | "focus-restoration" | "reduced-motion" | "high-contrast" | "responsive-layout" | "localization" | "pseudo-locale" | "rtl" | "visual-regression" | "strict-csp" | "zero-console-error" | "deterministic-disposal" | "duplicate-listener" | "memory-leak" | "ssr-import" | "secure-export" | "bundle-budget";
+/** One gate's definition: what it means and what would satisfy it. */
+export interface HonuaComponentQualificationGate {
+    readonly id: HonuaComponentQualificationGateId;
+    readonly requirement: HonuaComponentQualificationRequirement;
+    readonly title: string;
+    /** What a `passing` cell asserts for this gate. */
+    readonly criterion: string;
+}
+/** The full gate list, in a stable order. */
+export declare const HONUA_COMPONENT_QUALIFICATION_GATES: readonly HonuaComponentQualificationGate[];
+/** One cell of the matrix. */
+export interface HonuaComponentQualificationCell {
+    readonly gate: HonuaComponentQualificationGateId;
+    readonly requirement: HonuaComponentQualificationRequirement;
+    readonly status: HonuaComponentQualificationStatus;
+    /** Repo-relative files that prove a `passing` status. Empty otherwise. */
+    readonly evidence: readonly string[];
+    /** Required for `failing` and `not-applicable`; optional context otherwise. */
+    readonly note?: string;
+}
+/** One component's full row. */
+export interface HonuaComponentQualification {
+    readonly id: string;
+    readonly tag: string;
+    readonly source: HonuaComponentCatalogEntry["source"];
+    readonly gates: readonly HonuaComponentQualificationCell[];
+}
+/** Aggregate counts for a row or for the whole matrix. */
+export interface HonuaComponentQualificationSummary {
+    readonly passing: number;
+    readonly failing: number;
+    readonly pending: number;
+    readonly notApplicable: number;
+    /** Gates that must still reach `passing` before production tier. */
+    readonly blocking: readonly HonuaComponentQualificationGateId[];
+}
+/** The full matrix row for one catalog id, or `undefined` for an unknown id. */
+export declare function getComponentQualification(id: string): HonuaComponentQualification | undefined;
+/** The full matrix, in catalog order. */
+export declare function listComponentQualifications(): readonly HonuaComponentQualification[];
+/** One gate's definition. */
+export declare function describeComponentQualificationGate(gate: HonuaComponentQualificationGateId): HonuaComponentQualificationGate | undefined;
+/** Counts and remaining blockers for one row, or for the whole matrix when `id` is omitted. */
+export declare function summarizeComponentQualification(id?: string): HonuaComponentQualificationSummary;
+/**
+ * Whether a component has cleared **every** gate in this matrix.
+ *
+ * `not-applicable` cells count as cleared (that is what the status means, and
+ * why it requires a justifying note); `pending` and `failing` do not.
+ *
+ * This is deliberately *not* the same claim as the catalog's
+ * `supportTier: "production-tier"`, and conflating the two would misreport both.
+ * The catalog tier is a **functional maturity** claim owned by whichever feature
+ * issue raised the component (#680-#683): `<honua-feature-editor>` is
+ * production-tier because #680 delivered capability-aware editing, conflict
+ * handling, snapping, and attachment staging on it. This function is the
+ * **cross-cutting gate** axis, which no component has cleared yet.
+ *
+ * `scripts/component-qualification.mjs` therefore enforces only the direction
+ * that is actually implied: a component that has cleared every gate must be
+ * declared production-tier, because gate completion is strictly the harder bar.
+ * The reverse does not hold, so a production-tier component simply carries its
+ * still-open gates in the manifest's `openGates` — visible, counted, and
+ * impossible to mistake for done. See {@link listOpenQualificationGates}.
+ */
+export declare function isComponentProductionQualified(id: string): boolean;
+/**
+ * The gates a component has not yet cleared (`pending` or `failing`), in gate
+ * order. Empty exactly when {@link isComponentProductionQualified} is true.
+ *
+ * This is what keeps a `production-tier` catalog claim honest: the tier says the
+ * component's *feature* work landed, and this says precisely what remains on the
+ * accessibility, localization, visual, CSP, lifecycle, and bundle axes.
+ */
+export declare function listOpenQualificationGates(id: string): readonly HonuaComponentQualificationGateId[];
+//# sourceMappingURL=qualification.d.ts.map

package/controls/qualification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qualification.d.ts","sourceRoot":"","sources":["../../../src/controls/qualification.ts"],"names":[],"mappings":"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"}