@scattered-light/loomiere-mojave 0.24.1 → 0.41.0

package/dist/exports/design-system/components/ChecklistNotice/README.md

@@ -0,0 +1,53 @@
+# ChecklistNotice
+
+The Base UI ChecklistNotice styled by the theme. A Notice with a list of pass/fail rows. The title is subtitle-condense; each row is a mark (check or close) and the label in body-condense, with an optional detail line in the secondary color. Rows are split by a hairline. A passed row's mark is the success color, a failed one's the error color, so the two differ in lightness as well as hue in every theme; the visually hidden "Done" / "Not done" carries the state for assistive tech. look="sheet" (data-look) is the working-paper version, for a check list in a drawer or panel: the sheet surface (sheet.background, sheet.border, sheet.rule on top) with no status tint, the tag and title as a header row over a hairline, 15px rows split by a faint rule, and each mark a 22px filled circle: success-dark with a check, accent-dark with "!". An item's content (the form that resolves it) sits under its row in a box with the accent edge on the tray. The footer is the last row: a dashed info circle and the note in the secondary color.
+
+Use `Loomiere.ChecklistNotice` (`import { ChecklistNotice } from '@base-ui/react/checklist-notice'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/checklist-notice
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `ChecklistNotice` | `data-look`: `sheet` |
+| `ChecklistNoticeTitle` | `data-tagged` |
+| `ChecklistNoticeList` |   |
+| `ChecklistNoticeItem` | `data-passed` |
+| `ChecklistNoticeRow` |   |
+| `ChecklistNoticeContent` |   |
+| `ChecklistNoticeMark` |   |
+| `ChecklistNoticeText` |   |
+| `ChecklistNoticeDetail` |   |
+| `ChecklistNoticeFooter` |   |
+| `ChecklistNoticeFooterMark` |   |
+| `ChecklistNoticeControl` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the ChecklistNotice stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  args: {
+    title: 'Not ready to post yet',
+    items: [
+      { id: 'balanced', label: 'Debits equal credits', passed: true },
+      { id: 'period', label: 'Oct 31, 2026 is in an open period', passed: true },
+      {
+        id: 'reconciled',
+        label: 'Fictional Checking is reconciled through Oct 31',
+        passed: false,
+        detail: 'It is reconciled through Jul 31. Remove the bank line or reconcile Aug–Oct first.',
+      },
+    ],
+  },
+  render: (args) => <ChecklistNotice {...args} style={{ maxWidth: 460 }} />,
+};
+
+/** Every check passes, so the notice turns success. The footer holds the action the checks unlock. */
+```
+
+The preview also shows `Ready`, `Live`, `WithTag`.