fix: correct CSS output edges and declaration diagnostics

.changepacks/changepack_log_css_output_edges.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "apps/landing/package.json": "Patch"
+  },
+  "note": "Preserve unitless legacy vendor numbers, classify vendor time values as milliseconds and emit the Opera vendor prefix correctly; reject nested responsive arrays and known dead unprefixed CSS property names with source-located build errors, while preserving supported experimental CSS, unknown properties and documented shorthands.",
+  "date": "2026-10-01T00:00:00.000Z"
+}

.changepacks/changepack_log_selectors.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch"
+  },
+  "note": "Selectors: a nested rule without `&` in a styled or css template is scoped to the component instead of becoming a global rule (`.child {}` and `> p {}` select descendants, `:hover {}` and `::before {}` the component), and a rule nested in a selector list applies under each of its selectors; `content` keeps the quotes of its strings (`content: 'x'`, `content: \"\"`); `params` go on the pseudo-class that takes them, so `_groupNthChild` gives `:is(...):nth-child(2n) .a` also when nested; a bare `selectors` key is a pseudo-class name, an attribute of the element or a descendant selector (`'div p'`, `'> p'`), under a parent too, and keeps the case of class names; `::part()`, `::slotted()`, `::highlight()`, `::picker()` and the view-transition pseudo-elements get two colons. New build errors: a `_name` prop or selector key that names nothing (`_notASelector`, `selectors={{ div: ... }}`), and a string under a selector that is not CSS text (`_hover=\"external-class\"`)",
+  "date": "2026-09-30T00:00:00.000Z"
+}

apps/landing/src/app/(detail)/docs/api/box/page.mdx

@@ -64,12 +64,12 @@ However, the following properties are exceptions and **are not multiplied by 4**
 - `grid-column`, `grid-column-start`, `grid-column-end`
 - `grid-row`, `grid-row-start`, `grid-row-end`
 - `animation-iteration-count`
-- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+- `tab-size`, `-moz-tab-size`, `-webkit-line-clamp`
 - `grid-area`
 - `column-count`, `columns`, `orphans`, `widows`, `zoom`
 - `border-image`, `border-image-outset`, `border-image-slice`, `border-image-width`
 - `mask-border`, `mask-border-outset`, `mask-border-slice`, `mask-border-width`
-- `box-flex`, `box-flex-group`, `box-ordinal-group`, `initial-letter`, `max-lines`, `shape-image-threshold`
+- `initial-letter`, `max-lines`, `shape-image-threshold`
 - `fill-opacity`, `flood-opacity`, `stop-opacity`, `stroke-opacity`, `stroke-width`, `stroke-dashoffset`, `stroke-miterlimit`
 
 ### Rendering as Another Element

apps/landing/src/app/(detail)/docs/api/button/page.mdx

@@ -67,10 +67,10 @@ However, the following properties are exceptions and **are not multiplied by 4**
 - `grid-column`, `grid-column-start`, `grid-column-end`
 - `grid-row`, `grid-row-start`, `grid-row-end`
 - `animation-iteration-count`
-- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+- `tab-size`, `-moz-tab-size`, `-webkit-line-clamp`
 - `grid-area`
 - `column-count`, `columns`, `orphans`, `widows`, `zoom`
 - `border-image`, `border-image-outset`, `border-image-slice`, `border-image-width`
 - `mask-border`, `mask-border-outset`, `mask-border-slice`, `mask-border-width`
-- `box-flex`, `box-flex-group`, `box-ordinal-group`, `initial-letter`, `max-lines`, `shape-image-threshold`
+- `initial-letter`, `max-lines`, `shape-image-threshold`
 - `fill-opacity`, `flood-opacity`, `stop-opacity`, `stroke-opacity`, `stroke-width`, `stroke-dashoffset`, `stroke-miterlimit`

apps/landing/src/app/(detail)/docs/api/center/page.mdx

@@ -84,12 +84,12 @@ However, the following properties are exceptions and **are not multiplied by 4**
 - `grid-column`, `grid-column-start`, `grid-column-end`
 - `grid-row`, `grid-row-start`, `grid-row-end`
 - `animation-iteration-count`
-- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+- `tab-size`, `-moz-tab-size`, `-webkit-line-clamp`
 - `grid-area`
 - `column-count`, `columns`, `orphans`, `widows`, `zoom`
 - `border-image`, `border-image-outset`, `border-image-slice`, `border-image-width`
 - `mask-border`, `mask-border-outset`, `mask-border-slice`, `mask-border-width`
-- `box-flex`, `box-flex-group`, `box-ordinal-group`, `initial-letter`, `max-lines`, `shape-image-threshold`
+- `initial-letter`, `max-lines`, `shape-image-threshold`
 - `fill-opacity`, `flood-opacity`, `stop-opacity`, `stroke-opacity`, `stroke-width`, `stroke-dashoffset`, `stroke-miterlimit`
 
 <br />

apps/landing/src/app/(detail)/docs/api/grid/page.mdx

@@ -76,12 +76,12 @@ However, the following properties are exceptions and **are not multiplied by 4**
 - `grid-column`, `grid-column-start`, `grid-column-end`
 - `grid-row`, `grid-row-start`, `grid-row-end`
 - `animation-iteration-count`
-- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+- `tab-size`, `-moz-tab-size`, `-webkit-line-clamp`
 - `grid-area`
 - `column-count`, `columns`, `orphans`, `widows`, `zoom`
 - `border-image`, `border-image-outset`, `border-image-slice`, `border-image-width`
 - `mask-border`, `mask-border-outset`, `mask-border-slice`, `mask-border-width`
-- `box-flex`, `box-flex-group`, `box-ordinal-group`, `initial-letter`, `max-lines`, `shape-image-threshold`
+- `initial-letter`, `max-lines`, `shape-image-threshold`
 - `fill-opacity`, `flood-opacity`, `stop-opacity`, `stroke-opacity`, `stroke-width`, `stroke-dashoffset`, `stroke-miterlimit`
 
 <br />

apps/landing/src/app/(detail)/docs/api/selector/page.mdx

@@ -183,6 +183,49 @@ The attributes defined in Pseudo-Class correspond to those defined in Selector,
   </tbody>
 </table>
 
+Any other pseudo-class or pseudo-element works the same way, as `_nthChild` for `:nth-child` or `_placeholder` for `::placeholder`. A name that selects nothing, such as `_notASelector`, is a build error rather than CSS that matches nothing.
+
+Pseudo-classes that take arguments get them from `params`, also in their group form:
+
+```tsx
+const example = (
+  <Box
+    _groupNthChild={{ params: ['odd'], color: 'red' }}
+    _nthChild={{ params: ['2n'], bg: 'gray' }}
+  />
+)
+// :is([role=group],[data-group]):nth-child(odd) .a{color:red}
+// .b:nth-child(2n){background:gray}
+```
+
+A selector takes styles: an object, or CSS text such as `_hover="color: red"`. Any other string, such as a class name, is a build error.
+
+## `selectors`
+
+`selectors` takes any selector. A key with `&` says where the element goes; a key without `&` is relative to the element:
+
+- a pseudo-class name, as `hover` or `focusVisible`, is that pseudo-class of the element; a name that selects nothing, such as `div`, is a build error
+- a key starting with `:`, `::` or `[` applies to the element itself, as `':hover'` or `'[aria-busy]'`
+- any other selector selects descendants, as `'.child'`, `'> p'` or `'div p'`
+
+```tsx
+const example = (
+  <Box
+    selectors={{
+      '&:hover, .parent &': { color: 'red' },
+      '[aria-busy]': { opacity: 0.5 },
+      '> p': { m: 0 },
+    }}
+  />
+)
+// .a:hover{color:red}
+// .parent .b{color:red}
+// .c[aria-busy]{opacity:.5}
+// .d > p{margin:0}
+```
+
+Nested rules in `styled` and `css` templates follow styled-components and Emotion: `.child { }` and `> p { }` select descendants, `:hover { }` and `::before { }` apply to the component, and a rule nested in a selector list applies under each of its selectors.
+
 ## Media Shorthands
 
 These props wrap their styles in a fixed media query. They accept responsive arrays and nest in either direction with selectors and other at-rules.

apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx

@@ -82,12 +82,12 @@ However, the following properties are exceptions and **are not multiplied by 4**
 - `grid-column`, `grid-column-start`, `grid-column-end`
 - `grid-row`, `grid-row-start`, `grid-row-end`
 - `animation-iteration-count`
-- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+- `tab-size`, `-moz-tab-size`, `-webkit-line-clamp`
 - `grid-area`
 - `column-count`, `columns`, `orphans`, `widows`, `zoom`
 - `border-image`, `border-image-outset`, `border-image-slice`, `border-image-width`
 - `mask-border`, `mask-border-outset`, `mask-border-slice`, `mask-border-width`
-- `box-flex`, `box-flex-group`, `box-ordinal-group`, `initial-letter`, `max-lines`, `shape-image-threshold`
+- `initial-letter`, `max-lines`, `shape-image-threshold`
 - `fill-opacity`, `flood-opacity`, `stop-opacity`, `stroke-opacity`, `stroke-width`, `stroke-dashoffset`, `stroke-miterlimit`
 
 <br />