@domandigital/craft 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @domandigital/craft
 
+## 0.2.0
+
+### Minor Changes
+
+- 6462b3a: Use the `text-wrap-style` longhand, and stop applying orphan control to every
+  `li`.
+
+  `text-wrap` is shorthand for `text-wrap-mode` + `text-wrap-style`, so
+  `text-wrap: pretty` silently resets the mode to `wrap`. `white-space: nowrap` is
+  itself shorthand setting `text-wrap-mode: nowrap`, so the shorthand defeated it
+  along with any `text-overflow: ellipsis` truncation that relied on it.
+
+  Caught by a visual regression suite: `li { text-wrap: pretty }` expanded a
+  breadcrumb that truncates to one line into three lines and pushed the page 40px
+  taller. The longhand sets only the style, so an element that asked not to wrap
+  still does not.
+
+  `li` is now scoped to `.craft-prose li`. Breadcrumbs, navs, tab strips and menus
+  are all `li` and none of them are body copy.
+
 ## 0.1.0
 
 ### Minor Changes

package/css/craft.css

@@ -21,6 +21,25 @@ html {
   text-rendering: optimizeLegibility;
 }
 
+/*
+ * THE LONGHAND, NOT `text-wrap`. This matters.
+ *
+ * `text-wrap` is a shorthand for `text-wrap-mode` + `text-wrap-style`, so
+ * `text-wrap: pretty` silently resets the MODE to `wrap`. `white-space: nowrap`
+ * is itself shorthand for `white-space-collapse: collapse` + `text-wrap-mode:
+ * nowrap`, so any element the shorthand touches loses its nowrap — and with it
+ * any `text-overflow: ellipsis` truncation that depended on it.
+ *
+ * That is not hypothetical: `li { text-wrap: pretty }` broke a breadcrumb that
+ * truncates to one line, expanding it to three and pushing the page 40px taller.
+ * `text-wrap-style` sets only the style and leaves the mode alone, so an element
+ * that asked not to wrap still does not.
+ *
+ * Browsers without `text-wrap-style` simply get no orphan control, which is the
+ * correct degradation. A `text-wrap` shorthand fallback would reintroduce the
+ * bug, so there deliberately isn't one.
+ */
+
 /* A heading that wraps one word onto its own line looks like a mistake.
    `balance` evens the lines; it is capped at ~6 lines by the spec, which is why
    it is scoped to headings and not applied to body copy. */
@@ -31,16 +50,22 @@ h4,
 h5,
 h6,
 .craft-balance {
-  text-wrap: balance;
+  text-wrap-style: balance;
 }
 
-/* `pretty` is the body-copy counterpart: it only prevents orphans, so it stays
-   cheap on long text where `balance` would not. */
+/*
+ * `pretty` is the body-copy counterpart: it only prevents orphans, so it stays
+ * cheap on long text where `balance` would not.
+ *
+ * `li` is deliberately scoped to prose. Breadcrumbs, navs, tab strips and menus
+ * are all `li` and none of them are body copy; orphan control there is at best
+ * meaningless and at worst fights a deliberate truncation.
+ */
 p,
-li,
 figcaption,
-blockquote {
-  text-wrap: pretty;
+blockquote,
+.craft-prose li {
+  text-wrap-style: pretty;
 }
 
 .craft-prose {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domandigital/craft",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "description": "The Doman Digital house craft standard as numbers: OKLCh colour ramps that snap to existing anchors, derived semantic tokens with measured WCAG and APCA contrast, one shared motion vocabulary for CSS and JS, and a base stylesheet. Zero dependencies.",
   "license": "Apache-2.0",
@@ -30,12 +30,6 @@
     "css",
     "dist"
   ],
-  "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "prepublishOnly": "pnpm run build"
-  },
   "devDependencies": {
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
@@ -44,7 +38,6 @@
   "engines": {
     "node": ">=20"
   },
-  "packageManager": "pnpm@9.15.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Doman-Digital/dd-packages.git",
@@ -57,5 +50,10 @@
   "publishConfig": {
     "access": "public",
     "provenance": true
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
-}
+}