ionbase-ui 0.27.0 → 0.29.0

package/dist/meta/ScrollProgress.json

@@ -43,6 +43,10 @@
     {
       "dont": "deriving `progress` from a scroll listener without throttling",
       "why": "this re-renders the rail on every scroll frame"
+    },
+    {
+      "dont": "expecting every section to be visible at once",
+      "why": "the panel caps at 60vh and scrolls — a document-length index would otherwise grow off both edges of the viewport, taking the rows nearest the active one with it"
     }
   ],
   "stylesheet": "src/styles/scroll-progress.css",
@@ -57,18 +61,23 @@
     "--font-weight-regular",
     "--ion-duration-base",
     "--ion-ease-out",
+    "--ion-shadow-shadow-md",
+    "--radius-full",
     "--radius-md",
     "--radius-sm",
-    "--spacing-12",
-    "--spacing-2",
-    "--spacing-32",
+    "--spacing-24",
+    "--spacing-4",
+    "--spacing-6",
     "--spacing-8",
     "--surface-default",
     "--surface-muted",
+    "--text-default",
     "--text-secondary",
     "--text-tertiary",
     "--type-body-sm",
-    "--type-body-sm-line-height"
+    "--type-body-sm-line-height",
+    "--type-caption",
+    "--type-caption-line-height"
   ],
   "props": {
     "progress": {

package/dist/meta/components.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "generated": "by scripts/build-meta.mjs — do not edit; intent lives in meta/*.json",
   "hooks": [
     "useToast"
@@ -1190,10 +1190,10 @@
       "name": "AvatarGradient",
       "source": "src/components/AvatarGradient.tsx",
       "propsType": "AvatarGradientProps",
-      "description": "AvatarGradient is Avatar's initials-only sibling: a lit, bevelled disc for\npeople who have no photo.\n\nIT IS A SEPARATE COMPONENT BECAUSE FIGMA DRAWS A SEPARATE COMPONENT, AND THE\nAXES ARE THE ARGUMENT\n\nIt has `Color`, which Avatar does not. It has no `Shape`, because a gradient\nthis directional only reads on a circle. It has no `Type`, because there is\nno image and no icon to fall back to — the initials are the whole content.\nFolding it into Avatar would mean a `color` prop that does nothing on three\nof Avatar's four states and a `shape` prop that this one has to reject.\n\nThere is no `icon` and no `src` fallback here on purpose. If you have a\nphoto, or nothing at all to put in the circle, that is `Avatar`.",
+      "description": "AvatarGradient is Avatar's initials-only sibling: a tinted, bevelled disc for\npeople who have no photo.\n\nIT IS A SEPARATE COMPONENT BECAUSE FIGMA DRAWS A SEPARATE COMPONENT, AND THE\nAXES ARE THE ARGUMENT\n\nIt has `Color`, which Avatar does not. It has no `Shape`, because a gradient\nthis directional only reads on a circle. It has no `Type`, because there is\nno image and no icon to fall back to — the initials are the whole content.\nFolding it into Avatar would mean a `color` prop that does nothing on three\nof Avatar's four states and a `shape` prop that this one has to reject.\n\nThere is no `icon` and no `src` fallback here on purpose. If you have a\nphoto, or nothing at all to put in the circle, that is `Avatar`.",
       "import": "import { AvatarGradient } from 'ionbase-ui';",
       "status": "stable",
-      "summary": "Avatar's initials-only sibling: a lit, bevelled disc in one of eight colours, for people with no photo.",
+      "summary": "Avatar's initials-only sibling: a tinted, bevelled disc in one of seven colours, for people with no photo.",
       "useWhen": [
         "someone has no profile image and the fallback should still look deliberate rather than empty",
         "a list of people reads better when each one is a different colour — the colour is recognisable long before the letters are legible"
@@ -1234,83 +1234,36 @@
             "use": "the default. The one to reach for when nothing about the person suggests a colour"
           },
           "blue": {
-            "use": "as slate — one of seven, picked to tell people apart"
+            "use": "one of seven, picked to tell people apart"
           },
           "violet": {
-            "use": "as slate"
+            "use": "one of seven, picked to tell people apart"
           },
           "pink": {
-            "use": "as slate. See `a11y.knownIssues` before putting it behind text that matters"
+            "use": "one of seven, picked to tell people apart"
           },
           "orange": {
-            "use": "as slate. See `a11y.knownIssues`"
+            "use": "one of seven, picked to tell people apart"
           },
           "green": {
-            "use": "as slate. Not a status — a green disc here does not mean online, and Avatar's `bottomIndicator` is what does"
+            "use": "as the rest. Not a status — a green disc here does not mean online, and Avatar's `bottomIndicator` is what does"
           },
           "red": {
-            "use": "as slate. Not an error — this is identity, not state. See `a11y.knownIssues`"
-          },
-          "light": {
-            "use": "dark text on a near-white disc, for dense surfaces where seven saturated circles would shout"
+            "use": "as the rest. Not an error — this is identity, not state"
           }
         }
       },
       "a11y": {
         "guarantees": [
-          "`alt` falls back to `initials`, so the disc is never announced as an unlabelled image"
+          "`alt` falls back to `initials`, so the disc is never announced as an unlabelled image",
+          "all seven colours clear WCAG AA for the initials against the palest end of their own gradient, which is the worst case the text sits on"
         ],
         "requires": [
           "`alt` naming the person — \"Ada Lovelace\", not \"AB\". Two letters are not a name, and that is all a screen reader would otherwise get"
         ],
         "notes": [
-          "Colour is decoration here, never information. Nothing about which of the eight a person gets should be recoverable, because a screen reader cannot recover it."
-        ],
-        "knownIssues": [
-          {
-            "pairing": "--color-base-white on --color-pink-500",
-            "mode": "Light",
-            "ratio": 3.53,
-            "required": 4.5,
-            "sc": "1.4.3",
-            "states": [
-              "default"
-            ],
-            "status": "known, not yet fixed"
-          },
-          {
-            "pairing": "--color-base-white on --color-orange-500",
-            "mode": "Light",
-            "ratio": 3.6,
-            "required": 4.5,
-            "sc": "1.4.3",
-            "states": [
-              "default"
-            ],
-            "status": "known, not yet fixed"
-          },
-          {
-            "pairing": "--color-base-white on --color-green-500",
-            "mode": "Light",
-            "ratio": 3.69,
-            "required": 4.5,
-            "sc": "1.4.3",
-            "states": [
-              "default"
-            ],
-            "status": "known, not yet fixed"
-          },
-          {
-            "pairing": "--color-base-white on --color-red-500",
-            "mode": "Light",
-            "ratio": 3.78,
-            "required": 4.5,
-            "sc": "1.4.3",
-            "states": [
-              "default"
-            ],
-            "status": "known, not yet fixed"
-          }
+          "Colour is decoration here, never information. Nothing about which of the seven a person gets should be recoverable, because a screen reader cannot recover it.",
+          "The first version of this component was a saturated disc with white initials and failed AA on four of its colours. It was fixed in Figma by inverting it — pale disc, coloured initials — rather than in code. Do not reintroduce the saturated version."
         ]
       },
       "antiPatterns": [
@@ -1331,32 +1284,43 @@
       ],
       "stylesheet": "src/styles/avatar-gradient.css",
       "tokens": [
-        "--color-base-white",
-        "--color-blue-500",
+        "--color-blue-200",
+        "--color-blue-300",
+        "--color-blue-50",
         "--color-blue-600",
-        "--color-gray-100",
         "--color-gray-200",
-        "--color-gray-500",
+        "--color-gray-300",
+        "--color-gray-50",
         "--color-gray-600",
-        "--color-gray-900",
-        "--color-green-500",
+        "--color-green-200",
+        "--color-green-300",
+        "--color-green-50",
         "--color-green-600",
-        "--color-orange-500",
+        "--color-orange-200",
+        "--color-orange-300",
+        "--color-orange-50",
         "--color-orange-600",
-        "--color-pink-500",
+        "--color-pink-200",
+        "--color-pink-300",
+        "--color-pink-50",
         "--color-pink-600",
-        "--color-purple-500",
+        "--color-purple-200",
+        "--color-purple-300",
+        "--color-purple-50",
         "--color-purple-600",
-        "--color-red-500",
+        "--color-red-200",
+        "--color-red-300",
+        "--color-red-50",
         "--color-red-600",
         "--font-family-sans",
         "--font-weight-medium",
         "--font-weight-regular",
-        "--ion-avatar-gradient-elevation",
+        "--ion-avatar-gradient-bevel",
         "--ion-avatar-gradient-font-size",
         "--ion-avatar-gradient-font-weight",
         "--ion-avatar-gradient-from",
         "--ion-avatar-gradient-line-height",
+        "--ion-avatar-gradient-mid",
         "--ion-avatar-gradient-sheen",
         "--ion-avatar-gradient-sheen-mid",
         "--ion-avatar-gradient-size",
@@ -1401,8 +1365,7 @@
             "pink",
             "orange",
             "green",
-            "red",
-            "light"
+            "red"
           ]
         },
         "initials": {
@@ -1881,6 +1844,7 @@
         "--ion-button-pressed",
         "--ion-button-raised",
         "--ion-button-ring",
+        "--ion-button-shadow",
         "--ion-button-size",
         "--ion-duration-base",
         "--ion-duration-fast",
@@ -1896,6 +1860,9 @@
         "--ion-shadow-raised-lifted-lg",
         "--ion-shadow-raised-lifted-sm",
         "--ion-shadow-raised-lifted-xs",
+        "--ion-shadow-shadow-md",
+        "--ion-shadow-shadow-sm",
+        "--ion-shadow-shadow-xs",
         "--radius-md",
         "--spacing-12",
         "--spacing-16",
@@ -6150,6 +6117,10 @@
         {
           "dont": "deriving `progress` from a scroll listener without throttling",
           "why": "this re-renders the rail on every scroll frame"
+        },
+        {
+          "dont": "expecting every section to be visible at once",
+          "why": "the panel caps at 60vh and scrolls — a document-length index would otherwise grow off both edges of the viewport, taking the rows nearest the active one with it"
         }
       ],
       "stylesheet": "src/styles/scroll-progress.css",
@@ -6164,18 +6135,23 @@
         "--font-weight-regular",
         "--ion-duration-base",
         "--ion-ease-out",
+        "--ion-shadow-shadow-md",
+        "--radius-full",
         "--radius-md",
         "--radius-sm",
-        "--spacing-12",
-        "--spacing-2",
-        "--spacing-32",
+        "--spacing-24",
+        "--spacing-4",
+        "--spacing-6",
         "--spacing-8",
         "--surface-default",
         "--surface-muted",
+        "--text-default",
         "--text-secondary",
         "--text-tertiary",
         "--type-body-sm",
-        "--type-body-sm-line-height"
+        "--type-body-sm-line-height",
+        "--type-caption",
+        "--type-caption-line-height"
       ],
       "props": {
         "progress": {