@dogsbay/ui 0.2.0-beta.118 → 0.2.0-beta.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/ui",
-  "version": "0.2.0-beta.118",
+  "version": "0.2.0-beta.119",
   "description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
   "type": "module",
   "exports": {
@@ -22,9 +22,9 @@
     "katex": "^0.16.47",
     "maplibre-gl": "^5.24.0",
     "shiki": "^4.3.1",
-    "@dogsbay/elements": "0.2.0-beta.118",
-    "@dogsbay/icons": "0.2.0-beta.118",
-    "@dogsbay/primitives": "0.2.0-beta.118"
+    "@dogsbay/elements": "0.2.0-beta.119",
+    "@dogsbay/icons": "0.2.0-beta.119",
+    "@dogsbay/primitives": "0.2.0-beta.119"
   },
   "files": [
     "src",

package/src/api-layout/ExampleBlock.astro

@@ -55,9 +55,10 @@ const content = code || (json !== undefined && json !== null ? JSON.stringify(js
 
 {content && (
   <div class={className}>
-    <h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-white/60">
+    {/* A label, not a heading: on an operation page it followed the h1 (axe heading-order). */}
+    <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-white/60">
       {title}
-    </h3>
+    </p>
     <CodeBlock code={content} lang={resolvedLang} copy={true} />
   </div>
 )}

package/src/api-symbol/api-symbol.css

@@ -1,4 +1,7 @@
-/* API Symbol badges — colored by kind */
+/* API Symbol badges, coloured by kind. Text on its own 20% tint must reach
+   WCAG AA (4.5:1) on the page background: the light colours were L 0.5–0.6
+   (3.2–4.0:1) and are L 0.44 (5.0:1 or more); render-html's
+   tests/contrast.test.ts measures every kind in both modes. */
 .api-badge {
   display: inline-flex;
   align-items: center;
@@ -13,8 +16,8 @@
 }
 
 .api-badge-class {
-  background-color: oklch(0.55 0.18 265 / 0.2);
-  color: oklch(0.55 0.18 265);
+  background-color: oklch(0.44 0.18 265 / 0.2);
+  color: oklch(0.44 0.18 265);
 }
 .dark .api-badge-class {
   background-color: oklch(0.7 0.15 265 / 0.2);
@@ -22,8 +25,8 @@
 }
 
 .api-badge-meth {
-  background-color: oklch(0.55 0.15 155 / 0.2);
-  color: oklch(0.55 0.15 155);
+  background-color: oklch(0.44 0.15 155 / 0.2);
+  color: oklch(0.44 0.15 155);
 }
 .dark .api-badge-meth {
   background-color: oklch(0.7 0.15 155 / 0.2);
@@ -31,8 +34,8 @@
 }
 
 .api-badge-attr {
-  background-color: oklch(0.6 0.15 55 / 0.2);
-  color: oklch(0.6 0.15 55);
+  background-color: oklch(0.44 0.15 55 / 0.2);
+  color: oklch(0.44 0.15 55);
 }
 .dark .api-badge-attr {
   background-color: oklch(0.75 0.15 55 / 0.2);
@@ -40,8 +43,8 @@
 }
 
 .api-badge-func {
-  background-color: oklch(0.55 0.18 330 / 0.2);
-  color: oklch(0.55 0.18 330);
+  background-color: oklch(0.44 0.18 330 / 0.2);
+  color: oklch(0.44 0.18 330);
 }
 .dark .api-badge-func {
   background-color: oklch(0.7 0.15 330 / 0.2);
@@ -49,8 +52,8 @@
 }
 
 .api-badge-module {
-  background-color: oklch(0.5 0.12 200 / 0.2);
-  color: oklch(0.5 0.12 200);
+  background-color: oklch(0.44 0.12 200 / 0.2);
+  color: oklch(0.44 0.12 200);
 }
 .dark .api-badge-module {
   background-color: oklch(0.65 0.12 200 / 0.2);

package/src/property-list/PropertyList.astro

@@ -47,9 +47,10 @@ const groups = locationOrder
 <div class={className}>
   {groups.map((group) => (
     <div class="mb-4 last:mb-0">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+      {/* A label, not a heading: under an embed's tag h2 an h4 skipped a level (axe heading-order). */}
+      <p class="mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
         {group.label}
-      </h4>
+      </p>
       <div class="rounded-lg border bg-card">
         {group.params.map((param) => (
           <PropertyItem

package/src/toc/TableOfContents.astro

@@ -99,40 +99,40 @@ const filtered = headings.filter(
     line-height: 1.4;
   }
   .toc-kind-class {
-    background-color: oklch(0.55 0.18 265 / 0.15);
-    color: oklch(0.55 0.18 265);
+    background-color: oklch(0.44 0.18 265 / 0.15);
+    color: oklch(0.44 0.18 265);
   }
   :global(.dark) .toc-kind-class {
     background-color: oklch(0.7 0.15 265 / 0.2);
     color: oklch(0.7 0.15 265);
   }
   .toc-kind-meth {
-    background-color: oklch(0.55 0.15 155 / 0.15);
-    color: oklch(0.55 0.15 155);
+    background-color: oklch(0.44 0.15 155 / 0.15);
+    color: oklch(0.44 0.15 155);
   }
   :global(.dark) .toc-kind-meth {
     background-color: oklch(0.7 0.15 155 / 0.2);
     color: oklch(0.7 0.15 155);
   }
   .toc-kind-attr {
-    background-color: oklch(0.6 0.15 55 / 0.15);
-    color: oklch(0.6 0.15 55);
+    background-color: oklch(0.44 0.15 55 / 0.15);
+    color: oklch(0.44 0.15 55);
   }
   :global(.dark) .toc-kind-attr {
     background-color: oklch(0.75 0.15 55 / 0.2);
     color: oklch(0.75 0.15 55);
   }
   .toc-kind-func {
-    background-color: oklch(0.55 0.18 330 / 0.15);
-    color: oklch(0.55 0.18 330);
+    background-color: oklch(0.44 0.18 330 / 0.15);
+    color: oklch(0.44 0.18 330);
   }
   :global(.dark) .toc-kind-func {
     background-color: oklch(0.7 0.15 330 / 0.2);
     color: oklch(0.7 0.15 330);
   }
   .toc-kind-module {
-    background-color: oklch(0.5 0.12 200 / 0.15);
-    color: oklch(0.5 0.12 200);
+    background-color: oklch(0.44 0.12 200 / 0.15);
+    color: oklch(0.44 0.12 200);
   }
   :global(.dark) .toc-kind-module {
     background-color: oklch(0.65 0.12 200 / 0.2);