ionbase-ui 0.17.0 → 0.18.0

package/README.md

@@ -172,16 +172,53 @@ icon sit correctly inside a Button.
 
 ## Entry points
 
-| Import                  | What it is                                          |
-| ----------------------- | --------------------------------------------------- |
-| `ionbase-ui`            | Components, `Icon`, and the `tokens` object         |
-| `ionbase-ui/styles`     | Everything: tokens + typography + components        |
-| `ionbase-ui/styles/*`   | One component stylesheet, e.g. `button.css`         |
-| `ionbase-ui/tokens`     | Token custom properties only, no component CSS      |
-| `ionbase-ui/tokens/*`   | One token layer, e.g. `theme-dark.css`              |
-| `ionbase-ui/meta/index` | Component index — names, summaries, variants (12KB) |
-| `ionbase-ui/meta`       | Every component's full contract in one file (180KB) |
-| `ionbase-ui/meta/*`     | One component's contract, e.g. `Button.json`        |
+| Import                        | What it is                                          |
+| ----------------------------- | --------------------------------------------------- |
+| `ionbase-ui`                  | Components, `Icon`, and the `tokens` object         |
+| `ionbase-ui/styles`           | Everything: tokens + typography + components        |
+| `ionbase-ui/styles/*`         | One component stylesheet, e.g. `button.css`         |
+| `ionbase-ui/tokens`           | Token custom properties only, no component CSS      |
+| `ionbase-ui/tokens/*`         | One token layer, e.g. `theme-dark.css`              |
+| `ionbase-ui/meta/index`       | Component index — names, summaries, variants (12KB) |
+| `ionbase-ui/meta`             | Every component's full contract in one file (180KB) |
+| `ionbase-ui/meta/*`           | One component's contract, e.g. `Button.json`        |
+| `ionbase-ui/eslint-plugin`    | Lint rules generated from the contracts             |
+| `ionbase-ui/stylelint-config` | Token rules for your own CSS                        |
+
+## Lint rules that ship with the system
+
+```js
+// eslint.config.js
+import ionbase from 'ionbase-ui/eslint-plugin';
+export default [ionbase.configs.recommended];
+```
+
+```js
+// stylelint.config.js
+export default { extends: ['ionbase-ui/stylelint-config'] };
+```
+
+| rule                        | catches                                         |
+| --------------------------- | ----------------------------------------------- |
+| `no-deprecated-props`       | `<Button disabled>` — autofixes to `isDisabled` |
+| `no-known-contrast-failure` | prop combinations measured to fail WCAG AA      |
+| `no-raw-style-values`       | `style={{ color: '#1a73e8', padding: 16 }}`     |
+| `needs-accessible-name`     | icon-only controls announced as just "button"   |
+| `one-primary-action`        | more than one primary Button in a Modal         |
+
+The rules read their data from the component contracts, so they stay correct on
+their own: when a contrast defect is fixed the measurement changes, the contract
+loses the entry, and the rule stops firing.
+
+Messages name the fix, not the principle — a raw `13px` reports that it is not
+on the scale and that the neighbouring rungs are `var(--spacing-12)` and
+`var(--spacing-14)`.
+
+Use `ionbase.configs.warn` instead if you are adopting IonBase in an existing
+app and want the same rules without failing the build. Both configs need peer
+dependencies you may already have (`eslint`, `stylelint`,
+`stylelint-declaration-strict-value`); all are optional, so nothing is installed
+unless you opt in.
 
 ## Machine-readable component contracts
 

package/dist/meta/Alert.json

@@ -77,6 +77,27 @@
     ],
     "notes": [
       "role=alert interrupts whatever the screen reader is saying; role=status waits for a pause. This is why the role is not a prop."
+    ],
+    "knownIssues": [
+      {
+        "pairing": "--text-on-color on --surface-information",
+        "mode": "Dark",
+        "ratio": 3.44,
+        "required": 4.5,
+        "sc": "1.4.3",
+        "states": [
+          "default"
+        ],
+        "status": "known, not yet fixed",
+        "where": "Alert with emphasis=solid intent=information",
+        "appliesTo": {
+          "component": "Alert",
+          "props": {
+            "emphasis": "solid",
+            "intent": "information"
+          }
+        }
+      }
     ]
   },
   "antiPatterns": [

package/dist/meta/Button.json

@@ -80,6 +80,44 @@
     ],
     "requires": [
       "an accessible name — `children`, or `aria-label` when the button is icon-only"
+    ],
+    "knownIssues": [
+      {
+        "pairing": "--text-primary on --surface-primary-subtle-hover",
+        "mode": "Dark",
+        "ratio": 4.25,
+        "required": 4.5,
+        "sc": "1.4.3",
+        "states": [
+          "hover"
+        ],
+        "status": "known, not yet fixed",
+        "where": "Button variant=primary-soft, hover",
+        "appliesTo": {
+          "component": "Button",
+          "props": {
+            "variant": "primary-soft"
+          }
+        }
+      },
+      {
+        "pairing": "--text-primary on --surface-primary-tint",
+        "mode": "Dark",
+        "ratio": 4.25,
+        "required": 4.5,
+        "sc": "1.4.3",
+        "states": [
+          "pressed"
+        ],
+        "status": "known, not yet fixed",
+        "where": "Button variant=primary-soft, pressed",
+        "appliesTo": {
+          "component": "Button",
+          "props": {
+            "variant": "primary-soft"
+          }
+        }
+      }
     ]
   },
   "antiPatterns": [

package/dist/meta/components.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "generated": "by scripts/build-meta.mjs — do not edit; intent lives in meta/*.json",
   "hooks": [
     "useToast"
@@ -85,6 +85,27 @@
         ],
         "notes": [
           "role=alert interrupts whatever the screen reader is saying; role=status waits for a pause. This is why the role is not a prop."
+        ],
+        "knownIssues": [
+          {
+            "pairing": "--text-on-color on --surface-information",
+            "mode": "Dark",
+            "ratio": 3.44,
+            "required": 4.5,
+            "sc": "1.4.3",
+            "states": [
+              "default"
+            ],
+            "status": "known, not yet fixed",
+            "where": "Alert with emphasis=solid intent=information",
+            "appliesTo": {
+              "component": "Alert",
+              "props": {
+                "emphasis": "solid",
+                "intent": "information"
+              }
+            }
+          }
         ]
       },
       "antiPatterns": [
@@ -598,6 +619,44 @@
         ],
         "requires": [
           "an accessible name — `children`, or `aria-label` when the button is icon-only"
+        ],
+        "knownIssues": [
+          {
+            "pairing": "--text-primary on --surface-primary-subtle-hover",
+            "mode": "Dark",
+            "ratio": 4.25,
+            "required": 4.5,
+            "sc": "1.4.3",
+            "states": [
+              "hover"
+            ],
+            "status": "known, not yet fixed",
+            "where": "Button variant=primary-soft, hover",
+            "appliesTo": {
+              "component": "Button",
+              "props": {
+                "variant": "primary-soft"
+              }
+            }
+          },
+          {
+            "pairing": "--text-primary on --surface-primary-tint",
+            "mode": "Dark",
+            "ratio": 4.25,
+            "required": 4.5,
+            "sc": "1.4.3",
+            "states": [
+              "pressed"
+            ],
+            "status": "known, not yet fixed",
+            "where": "Button variant=primary-soft, pressed",
+            "appliesTo": {
+              "component": "Button",
+              "props": {
+                "variant": "primary-soft"
+              }
+            }
+          }
         ]
       },
       "antiPatterns": [