actual-css 0.14.0 → 0.14.1

package/docs/design-notes/widget-primitives.md

@@ -35,6 +35,10 @@ The named exports each module carries:
 - `selectors` — `CLASSES`
 
 `surface` also owns outside-click and Escape dismissal, and focus restore.
+A click on an element with `data-flyout-close` closes the open panel around
+it, whichever widget opened that panel. The attribute keeps the `flyout` name
+because the panels authors write are flyouts; `surface` is only the code that
+opens and closes them.
 `menu` filters to usable items.
 
 ## Focus group

package/docs/pages/enhancements/flyout.md

@@ -67,9 +67,10 @@ For a modal bottom sheet or action sheet, use `dialog.drawer`; use
 `dialog.modal` for a centered modal. Those components own modal focus,
 dismissal, scroll locking, and backdrop behavior explicitly.
 
-Use `data-flyout-placement` for the preferred anchored placement. It accepts the
-placement strings supported by the floating runtime, such as `bottom-start`,
-`bottom-end`, `top-start`, `right`, or `left`.
+Use `data-flyout-placement` for the preferred anchored placement: a side
+(`top`, `bottom`, `left`, `right`), optionally followed by `-start` or `-end`,
+such as `bottom-start` or `right`. An unknown value logs a console warning and
+falls back to `bottom-start`.
 
 Use `data-flyout-distance` for the trigger gap in pixels. The default is `4`.
 

package/docs/pages/enhancements/overview.md

@@ -56,7 +56,8 @@ is a no-op until the module is loaded again with a DOM.
 Load the full bundle **or** the source modules, never both: each evaluation
 owns its registry and document handlers, so a dist bundle mixed with
 `actual-css/js/*` source subpaths (or two dist bundles) registers every
-behavior twice and a flyout opens then immediately closes.
+behavior twice and a flyout opens then immediately closes. The second copy
+logs a console warning when it loads.
 
 ## Component pages
 

package/docs/pages/enhancements/tooltip.md

@@ -115,7 +115,9 @@ viewport-aware maximum width.
 ## Positioning
 
 Set `data-tooltip-placement` to control where the tooltip appears relative to
-its trigger. The arrow follows the placement automatically.
+its trigger: a side (`top`, `bottom`, `left`, `right`), optionally followed by
+`-start` or `-end`. An unknown value logs a console warning and falls back to
+`top`. The arrow follows the placement automatically.
 
 The runtime also picks the coordinate space, and writes `position` to match. A
 tooltip whose trigger scrolls with the page is placed in document coordinates

package/docs/pages/examples/overview.md

@@ -4,8 +4,8 @@
 
 The examples live in the repository under `demo/` and load `actual.full.css`
 and `actual.full.js` from `dist/`, plus the theme palettes bundle from
-`demo/assets/`. The bundle is committed and regenerated by
-`bun run build:themes`, so the pages open from a fresh checkout.
+`demo/assets/`. Both are build output: in a clone, run `bun run build:dist`,
+`bun run build:js` and `bun run build:themes` before opening a page.
 
 ## Templates
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "actual-css",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
   "type": "module",
   "packageManager": "bun@1.4.3",
@@ -132,6 +132,7 @@
     "build:js": "bun scripts/build-js.js",
     "build:themes": "bun scripts/build-themes.js",
     "build:size": "bun scripts/build-size.js",
+    "build:pages": "bun scripts/pages.js",
     "export:design": "bun scripts/export-design.js",
     "check:enhance": "bun run scripts/check-enhance.js",
     "generate:reserved": "bun scripts/generate-reserved-classes.js",
@@ -157,9 +158,9 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.15",
-    "happy-dom": "^20.14.0"
+    "happy-dom": "^21.0.1"
   },
   "dependencies": {
-    "@lekoala/floating": "^0.2.0"
+    "@lekoala/floating": "^0.3.0"
   }
 }

package/src/css/forms/color-swatch.css

@@ -49,6 +49,10 @@
      its invisible reach. */
   margin: calc(var(--color-swatch-reach) / -2);
   padding: 0;
+  /* No in-flow text, so the baseline would be the box's bottom edge and an
+     inline swatch would ride above the line (a flyout trigger beside its
+     label). A palette in .cluster or .grid ignores it. */
+  vertical-align: middle;
   border: 0;
   background: transparent;
   color: inherit;

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) {