actual-css 0.14.0 → 0.15.0

package/src/css/forms/custom-select.css

@@ -38,7 +38,7 @@
         --control-bg: var(--surface-raised);
         outline: var(--focus-ring-width) solid var(--form-invalid-border, var(--focus));
         outline-offset: calc(var(--focus-ring-width) * -1);
-        box-shadow: none;
+        box-shadow: var(--control-shadow, none);
       }
 
       &::picker-icon {

package/src/css/typography/prose.css

@@ -88,7 +88,7 @@
 /* --link is a theme-level token (core/base.css also reads it for bare links);
    prose falls back to --primary so a theme that never sets it is unaffected. */
 .prose :where(a) {
-  color: var(--link, var(--primary));
+  color: var(--surface-link, var(--link, var(--primary)));
   text-decoration-line: underline;
   text-decoration-thickness: 0.08em;
   text-underline-offset: 0.18em;
@@ -100,7 +100,9 @@
 
 @supports (color: color-mix(in oklch, red, white)) {
   .prose :where(a:hover, a:focus-visible) {
-    color: color-mix(in oklab, var(--link, var(--primary)), var(--text) 15%);
+    /* A solid surface owns its contrast pair in every state; mixing in the
+       page's --text would pull its links toward the wrong background. */
+    color: var(--surface-link, color-mix(in oklab, var(--link, var(--primary)), var(--text) 15%));
   }
 }
 

package/src/js/enhance.js

@@ -31,6 +31,20 @@
 const registries = new WeakMap();
 const ownedNames = new WeakMap();
 
+// Each evaluation owns its registries, so a second copy (the dist bundle plus
+// source modules, or two bundles) registers every behavior twice and fails
+// silently — a flyout opens then closes. Every built-in imports this module,
+// so the marker catches any duplicated runtime once, here.
+const RUNTIME = Symbol.for("actual-css.runtime");
+if (typeof document !== "undefined") {
+  if (globalThis[RUNTIME]) {
+    console.warn(
+      "actual-css: a second copy of the JavaScript runtime is loaded. Load the full bundle or the source modules, never both.",
+    );
+  }
+  globalThis[RUNTIME] = true;
+}
+
 // Node type constants as literals, not the realm's Node global, so nodes from
 // another document/window compare correctly.
 const ELEMENT_NODE = 1;

package/src/js/floating-space.js

@@ -29,6 +29,32 @@ function isViewportAnchored(anchor) {
   return false;
 }
 
+// Mirrors the placements @lekoala/floating accepts; it throws on any other
+// value, and from an autoUpdate callback that throw would repeat on every
+// scroll. Markup is validated here instead, so a typo warns once.
+const PLACEMENTS = new Set(
+  ["top", "bottom", "left", "right"].flatMap((side) => [side, `${side}-start`, `${side}-end`]),
+);
+const warnedPlacements = new WeakSet();
+
+/**
+ * The author's placement attribute, or null when absent or unknown.
+ *
+ * @param {Element | null | undefined} el
+ * @param {string} attribute
+ * @returns {string | null}
+ */
+export function readPlacement(el, attribute) {
+  const value = el?.getAttribute(attribute);
+  if (!value) return null;
+  if (PLACEMENTS.has(value)) return value;
+  if (!warnedPlacements.has(el)) {
+    warnedPlacements.add(el);
+    console.warn(`Unknown ${attribute}="${value}" ignored`, el);
+  }
+  return null;
+}
+
 /**
  * @param {Element | null | undefined} anchor
  * @returns {{ space: "viewport" | "document", position: "fixed" | "absolute" }}

package/src/js/flyout.js

@@ -1,4 +1,5 @@
 import { registerEnhancement } from "./enhance.js";
+import { readPlacement } from "./floating-space.js";
 import { focusFirstDescendant } from "./focus.js";
 import { shouldIgnoreKey } from "./keys.js";
 import { connectMenu, focusFirstMenuItem, focusLastMenuItem } from "./menu.js";
@@ -9,7 +10,8 @@ const triggerMap = new WeakMap();
 function readFlyoutOptions(panel) {
   const opts = { autoClose: "true" };
   const ds = panel.dataset;
-  if (ds.flyoutPlacement) opts.placement = ds.flyoutPlacement;
+  const placement = readPlacement(panel, "data-flyout-placement");
+  if (placement) opts.placement = placement;
   if (ds.flyoutDistance != null) {
     const d = Number.parseFloat(ds.flyoutDistance);
     if (Number.isFinite(d)) opts.distance = d;

package/src/js/parse-config.js

@@ -11,10 +11,13 @@
  */
 
 function relax(source) {
+  // Double-quoted strings are matched first and copied verbatim, so text
+  // such as `http:` inside them is never mistaken for an unquoted key.
   return source.replace(
-    /([a-zA-Z_$][\w$-]*)\s*:|'((?:\\'|[^'])*)'/g,
-    (_match, key, stringContent) => {
+    /"(?:\\.|[^"\\])*"|([a-zA-Z_$][\w$-]*)\s*:|'((?:\\'|[^'])*)'/g,
+    (match, key, stringContent) => {
       if (key) return `"${key}":`;
+      if (stringContent === undefined) return match;
       const unescaped = stringContent.replace(/\\'/g, "'");
       const escaped = unescaped.replace(/"/g, '\\"');
       return `"${escaped}"`;

package/src/js/tooltip.js

@@ -51,7 +51,7 @@
 import { autoUpdate, reposition } from "@lekoala/floating";
 import enhance from "./enhance.js";
 import { registerEscapeDismissal } from "./escape.js";
-import { positionModeFor } from "./floating-space.js";
+import { positionModeFor, readPlacement } from "./floating-space.js";
 import { CLASSES } from "./selectors.js";
 
 const SHOW_DELAY_MS = 150;
@@ -144,7 +144,7 @@ export function isTooltipVisible(tip) {
  * the tip's own placement never enters into it.
  */
 function placementFor(ref) {
-  return ref?.getAttribute("data-tooltip-placement") || "top";
+  return readPlacement(ref, "data-tooltip-placement") ?? "top";
 }
 
 function hasOption(trigger, name) {

package/src/tooling/design-tokens.js

@@ -44,6 +44,7 @@ export const THEME_COLORS = [
   "heading",
   "border",
   "border-control",
+  "control-default-bg",
   "focus",
   "hover-overlay",
   "hover-overlay-solid",
@@ -101,6 +102,7 @@ export const FOUNDATIONS = {
    listed here (tests/design-tokens.test.js), so a new token cannot silently
    stay out of the design tools. */
 export const NOT_EXPORTED = {
+  "internal surface context, not a palette color": ["surface-link"],
   "internal 0/1 weights selecting a control step; the steps are exported": [
     "control-step-sm",
     "control-step-md",

package/src/tooling/theme-contrast.js

@@ -37,7 +37,7 @@ export const INTENTS = ["primary", "secondary", "success", "warning", "danger",
 export const SURFACES = ["surface", "surface-raised", "surface-subtle"];
 
 /* Badges state .soft explicitly: a theme may fill badges by default
-   (bootstrap-v6), which would measure a solid pair against the soft hover.
+   by a local rule, which would measure a solid pair against the soft hover.
    The theme name is read from a file by a regex, so it never enters this
    markup: measureContrast() sets it through dataset. `scheme` is only ever
    "light" or "dark". */