actual-css 0.13.0 → 0.14.1

package/src/css/layout/scroll-snap.css

@@ -13,16 +13,36 @@
  * --scroll-snap-align
  * --scroll-snap-item-size
  * --scroll-snap-padding
+ *
+ * Internal:
+ * --scroll-snap-focus-bleed
  */
 .scroll-snap {
   --scroll-snap-gap: var(--gap);
   --scroll-snap-align: start;
   --scroll-snap-item-size: auto;
+  /* Declared here, not as a :root alias: an inherited alias arrives already
+     computed, so a --focus-ring-width override on the rail would not reach it. */
+  --scroll-snap-focus-bleed: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 
   display: flex;
   flex-direction: row;
   gap: var(--scroll-snap-gap);
+  /* Both axes clip: `auto` on one computes the other to `auto`, so a ring on
+     the top or bottom item would be lost too. Every side reserves the ring's
+     own width; the block reserve returns to the flow through a negative
+     margin, while the inline reserve stays as the rail's focus gutter.
+     Bleeding the inline reserve outward instead would make the border box
+     `containing block + 2 * reserve` wide, which at the viewport edge grows
+     the page: a rail cannot be flush with arbitrary surrounding content and
+     free of page overflow at once. */
+  margin-block: calc(var(--scroll-snap-focus-bleed) * -1);
+  padding-block: var(--scroll-snap-focus-bleed);
+  padding-inline: var(--scroll-snap-focus-bleed);
   overflow-x: auto;
+  /* One scroll axis, stated: a fractional content height could otherwise raise
+     a phantom vertical scrollbar under one font or zoom step. */
+  overflow-y: hidden;
 }
 
 .scroll-snap > * {
@@ -32,7 +52,17 @@
 @supports (scroll-snap-type: x mandatory) {
   .scroll-snap {
     overscroll-behavior-inline: contain;
+    /* Fallback only, never the ring's protector: padding-inline above already
+       guarantees paint. A unitless `0` drops the clamp below but keeps this
+       declaration, so the worst case is a snapped item flush with the gutter,
+       not a clipped ring. */
     scroll-padding-inline: var(--scroll-snap-padding, var(--scroll-snap-gap));
+    /* A conforming <length> stays at least the focus reserve, so scroll and
+       snap stop with the gutter's air. */
+    scroll-padding-inline: max(
+      var(--scroll-snap-padding, var(--scroll-snap-gap)),
+      var(--scroll-snap-focus-bleed)
+    );
     /* x then inline: an engine that lacks the logical keyword keeps x.
        proximity is the default, so a short rail cannot trap the pointer. */
     scroll-snap-type: x proximity;

package/src/css/layout/topbar.css

@@ -45,3 +45,13 @@
     -webkit-backdrop-filter: blur(0.75rem);
   }
 }
+
+/* A reduce override, not a no-preference gate: a browser without the feature
+   evaluates it false and keeps the frosted bar instead of losing it. */
+@media (prefers-reduced-transparency: reduce) {
+  .topbar {
+    background: var(--surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}

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/focus.js

@@ -44,8 +44,23 @@ export function getFocusable(root) {
   return [...root.querySelectorAll(FOCUSABLE_SELECTOR)].filter(isFocusable);
 }
 
+/* Tab reaches a radio group at its checked radio, or at its first one when none
+   is checked; the other radios are arrow-key stops only. Entering a panel on
+   an unchecked radio put focus on a value the user had not picked. */
+function isRadioTabStop(el) {
+  if (el.type !== "radio" || el.checked || !el.name) return true;
+  // form.elements also holds controls associated through form="…".
+  const candidates = el.form
+    ? [...el.form.elements]
+    : [...el.getRootNode().querySelectorAll('input[type="radio"]')];
+  return !candidates.some(
+    (radio) =>
+      radio.type === "radio" && radio.name === el.name && radio.form === el.form && radio.checked,
+  );
+}
+
 export function focusFirstDescendant(root) {
-  const target = getFocusable(root)[0];
+  const target = getFocusable(root).filter(isRadioTabStop)[0];
   target?.focus();
   return !!target;
 }

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/surface.js

@@ -386,8 +386,17 @@ export function disconnectSurface(menu) {
   }
 }
 
+/* Arrow keys in a radio group check the next radio by dispatching a click
+   (detail 0, no pointer). That click is navigation, not a pick: closing on it
+   shut a palette on the first arrow press, before the user could reach the
+   color they wanted. Space dispatches the same click and is left alone too. */
+function isKeyboardRadioMove(e) {
+  return e.detail === 0 && e.target?.matches?.('input[type="radio"]') === true;
+}
+
 function onDocumentClick(e) {
   const path = e.composedPath();
+  const radioMove = isKeyboardRadioMove(e);
 
   for (const menu of openSurfaces) {
     if (menu.ownerDocument !== e.currentTarget) continue;
@@ -396,6 +405,7 @@ function onDocumentClick(e) {
 
     const menuIndex = path.indexOf(menu);
     const isInside = menuIndex >= 0;
+    if (isInside && radioMove) continue;
     const hasCloseTrigger =
       isInside &&
       path

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/color.js

@@ -10,7 +10,8 @@
  * `const rgba = ${RASTERIZE};`. getComputedStyle returns color-mix() and
  * light-dark() results as oklab() or color(), so a 1x1 canvas turns any
  * computed color into sRGB bytes. Alpha is kept so contrast() can refuse a
- * translucent color instead of measuring it as if it were opaque.
+ * translucent color instead of measuring it as if it were opaque; composite()
+ * resolves it over its backdrop first.
  */
 export const RASTERIZE = `(() => {
   const canvas = Object.assign(document.createElement("canvas"), { width: 1, height: 1 });
@@ -46,6 +47,18 @@ export function contrast(a, b) {
   return (hi + 0.05) / (lo + 0.05);
 }
 
+/* `top` painted over `base`, the way the page composites a fill: source-over
+   on gamma-encoded sRGB bytes. The result is opaque when `base` is, so a
+   translucent soft fill becomes measurable once its backdrop is known. */
+export function composite(top, base) {
+  const a = (top[3] ?? 255) / 255;
+  const b = (base[3] ?? 255) / 255;
+  const alpha = a + b * (1 - a);
+  if (alpha === 0) return [0, 0, 0, 0];
+  const channel = (i) => Math.round((top[i] * a + base[i] * b * (1 - a)) / alpha);
+  return [channel(0), channel(1), channel(2), Math.round(alpha * 255)];
+}
+
 /* OKLCH of an sRGB color: L 0-1, C chroma, h degrees. */
 export function oklch([r, g, b]) {
   const [lr, lg, lb] = [r, g, b].map(toLinear);

package/src/tooling/css-bundle.js

@@ -298,11 +298,6 @@ export function bundledCssIssues(css) {
   const issues = [];
 
   if (css.includes("@import")) issues.push("contains unresolved @import");
-  if (css.includes("--lightningcss")) issues.push("contains --lightningcss-* variables");
-  if (/color-mix\(in srgb/.test(css)) issues.push("contains color-mix(in srgb, ...)");
-  if (/@media[^{]*\(\s*width\s*[<>]=/.test(css)) {
-    issues.push("contains transpiled media query range syntax");
-  }
 
   return issues;
 }

package/src/tooling/design-components.js

@@ -15,7 +15,7 @@
  * padding, height, type — about 1,800 bindings over 221 variants) froze
  * Penpot, and a theme's own lengths already arrive through the measurement.
  */
-import { hexOf, inPage, parseSrgb } from "./design-tokens.js";
+import { hexOf, hexRgbOf, inPage, parseSrgb } from "./design-tokens.js";
 
 /* Every list starts with its default: the first combination is the one a
    design tool picks for a new instance. */
@@ -214,11 +214,15 @@ export async function measureComponents({ css, resolved, linked, components = CO
       modes.forEach((mode, m) => {
         const known = recipes[mode][token];
         // A recipe name carries no size and no component: if two of them
-        // ever paint different colors, the name has to grow a dimension.
-        if (known && known.hex !== hexes[m]) {
-          throw new Error(`Recipe ${token} paints ${known.hex} and ${hexes[m]} in ${mode}`);
+        // ever paint different colors, the name has to grow a dimension. The
+        // comparison is on the CSS form (alpha included), the stored hex is the
+        // 6-digit DTCG form.
+        if (known && hexOf(known.color) !== hexes[m]) {
+          throw new Error(
+            `Recipe ${token} paints ${hexOf(known.color)} and ${hexes[m]} in ${mode}`,
+          );
         }
-        recipes[mode][token] = { color: colors[m], hex: hexes[m] };
+        recipes[mode][token] = { color: colors[m], hex: hexRgbOf(colors[m]) };
       });
     }
     const [first] = colors;

package/src/tooling/design-export.js

@@ -14,6 +14,7 @@ import {
   linkTokens,
   resolveTokens,
   themeNameOf,
+  toDtcg,
   toFigma,
   toPenpot,
 } from "./design-tokens.js";
@@ -24,6 +25,7 @@ const PLUGIN = fileURLToPath(new URL("./penpot-plugin/", import.meta.url));
 /*
  * Writes, under `out`:
  *   figma/foundations.tokens.json, figma/<scheme>.tokens.json
+ *   dtcg/foundations.tokens.json, dtcg/<scheme>.tokens.json
  *   penpot/tokens.json
  *   penpot/plugin/ (manifest.json, plugin.js, ui.html, spec.json)
  * Without `themeFile`, exports the default theme. `name` overrides the
@@ -49,6 +51,12 @@ export async function exportDesign({ themeFile, name, out }) {
         doc,
       ]),
     ),
+    ...Object.fromEntries(
+      Object.entries(toDtcg(linked, recipes)).map(([file, doc]) => [
+        `dtcg/${file}.tokens.json`,
+        doc,
+      ]),
+    ),
     "penpot/tokens.json": toPenpot(linked, recipes),
     "penpot/plugin/spec.json": spec,
   };