@the-portland-company/shell 0.88.0 → 0.89.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.89.0
+
+Card follows the theme, and the form set gains Checkbox and FileInput. Follow-up to the 0.88.0 migrations.
+
+- **Card tokens.** Surface, border and text come from new `--app-card-bg`, `--app-card-border`, `--app-card-fg` and `--app-card-fg-muted` (chrome.css). Light: `#FFFFFF`, `#D7DADF`, `#2F3136`, `#5C6B80`. Dark (under `.dark`): `#161616`, `#333333`, `#E8E8E8`, `#A3A3A3`. Both pairs clear 4.5:1. This fixes the white cards on surveys dark mode and the petitions contrast failure on dark pages. The Brand `.dark {}` can still override the tokens.
+- **Card props.** `subtitle`, `aside`, `actions`, `footer`, `bodyClassName`, `padding` (`none | sm | md | lg`, default `md`). A plain `<Card title>` renders as before (p-6, h3 title). Any of `subtitle`, `aside`, `actions`, `footer`, `bodyClassName` switches to a bordered header / body / footer layout, which is what dashboard `RdParts` and settings `ui/kit` Card need.
+- **New `Checkbox`.** `label`, `description`, `indeterminate`, `invalid`, forwards its ref, 44px-tall clickable row, accent fill, `data-shell-field`. Exported from the root and `/native`.
+- **New `FileInput`.** The `type="file"` control with the Input label/helper/error chrome, 44px tall, secondary-button styling on the native button. `Input` still rejects `file` and `checkbox`; its docs point to these.
+- **ESLint guard.** `no-raw-control-styling` now flags `<input type="checkbox">` and `<input type="file">` with `className` or `style` unless the file imports `Checkbox` / `FileInput` (importing `Input` no longer excuses them). `no-local-primitives` also covers `Checkbox` and `FileInput`.
+- Tests: `__tests__/cardCheckboxFileInput.test.tsx` (including light and dark contrast of the card tokens), `__tests__/eslintGuard.test.ts`.
+
 ## 0.88.0
 
 Shared form primitives, so apps stop hand-rolling them.

package/README.md

@@ -173,7 +173,7 @@ All `<ShellChrome>` props are optional — only supply what your app has. The ch
 
 ## Form primitives
 
-Shared `Button`, `Input`, `Select` and `Textarea`, styled from the shell's tokens (`--app-btn-*`, `--app-field-*`, `--color-*`). 5px radius, 12px horizontal padding.
+Shared `Button`, `Input`, `Select`, `Textarea`, `Checkbox`, `FileInput` and `Card`, styled from the shell's tokens (`--app-btn-*`, `--app-field-*`, `--color-*`). 5px radius, 12px horizontal padding.
 
 | Export | Props |
 |---|---|
@@ -181,6 +181,11 @@ Shared `Button`, `Input`, `Select` and `Textarea`, styled from the shell's token
 | `<Input>` | All native input props plus `label`, `helperText`, `error`, `invalid`, `wrapperClassName`. 44px tall. Forwards its ref to the `<input>`. |
 | `<Select>` | Same as `Input`, with `<option>` children. 44px tall. Forwards its ref to the `<select>`. |
 | `<Textarea>` | Same as `Input`, 88px minimum height. Forwards its ref to the `<textarea>`. |
+| `<Checkbox>` | All native checkbox props plus `label`, `description`, `indeterminate`, `invalid`, `wrapperClassName`. The whole row is a 44px touch target; accent fill; `data-shell-field`. Forwards its ref to the `<input>`. |
+| `<FileInput>` | The `type="file"` control: `label`, `helperText`, `error`, `invalid`, `accept`, `multiple`, `wrapperClassName`. 44px tall. Forwards its ref. `Input` does not accept `type="file"` or `"checkbox"`. |
+| `<Card>` | `title`, `subtitle`, `aside`, `actions`, `footer`, `bodyClassName`, `padding` (`none \| sm \| md \| lg`, default `md`), `minH`, plus any div props. Plain `<Card title>` is a padded box with an h3; any of `subtitle`, `aside`, `actions`, `footer`, `bodyClassName` gives a bordered header / body / footer. |
+
+**Card and dark mode.** Card and Checkbox read `--app-card-bg`, `--app-card-border`, `--app-card-fg` and `--app-card-fg-muted` from `chrome.css`: light on `:root`, dark under `.dark`. Do not paint a card white in app CSS; override these tokens if an app needs a different surface.
 
 An `error` message marks the control invalid (`aria-invalid`, red border) and replaces the helper text; the label, helper and error are wired with `htmlFor` and `aria-describedby`.
 
@@ -209,8 +214,8 @@ Run `shell-version-check` in CI too (it is a package `bin`, so `npx shell-versio
 
 | Rule (`politogy-shell/…`) | Fails on |
 |---|---|
-| `no-local-primitives` | Declaring or exporting a local `Button`, `Card`, `Input`, `Select`, `Textarea`, `PageHeader` or `FormColumn` (re-exports from the shell are fine). |
-| `no-raw-control-styling` | JSX `<button>`, `<input>`, `<select>`, `<textarea>` with `className` or `style`. Allowed in a file that imports the shell primitive of the same kind (wrapping). |
+| `no-local-primitives` | Declaring or exporting a local `Button`, `Card`, `Input`, `Select`, `Textarea`, `Checkbox`, `FileInput`, `PageHeader` or `FormColumn` (re-exports from the shell are fine). |
+| `no-raw-control-styling` | JSX `<button>`, `<input>`, `<select>`, `<textarea>` with `className` or `style`. Allowed in a file that imports the shell primitive of the same kind (wrapping). `<input type="checkbox">` needs `Checkbox` and `<input type="file">` needs `FileInput`; importing `Input` does not excuse them. |
 | `no-global-control-classes` | `className` strings matching `\b(btn\|input)(-[a-z]+)?\b`, including inside `clsx(...)`, ternaries and template literals. |
 
 Escape hatch: put `// shell-primitive-exempt: <reason>` on the line above (or the same line as) the offending code. A reason is required. Prefer adding the missing variant to the shell instead.