@semiont/react-ui 0.5.20 → 0.5.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.5.20",
+  "version": "0.5.22",
   "engines": {
     "node": ">=24.0.0"
   },
@@ -77,8 +77,8 @@
     "test:split:coverage": "npm run test:coverage"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "styled-components": "^6.0.0",
     "vitest": "^4.0.0"
   },
@@ -122,9 +122,9 @@
     "directory": "packages/react-ui"
   },
   "dependencies": {
-    "@semiont/core": "0.5.20",
-    "@semiont/http-transport": "0.5.20",
-    "@semiont/sdk": "0.5.20",
+    "@semiont/core": "0.5.22",
+    "@semiont/http-transport": "0.5.22",
+    "@semiont/sdk": "0.5.22",
     "pdfjs-dist": "^6.1.200",
     "react-error-boundary": "^6.1.2",
     "react-markdown": "^10.1.0",

package/src/components/annotation/__tests__/AnnotateToolbar.display.test.tsx

@@ -71,6 +71,16 @@ describe('Annotate Bar display forms (Phase 3)', () => {
   it('stylesheet carries the compact form (static gate — icon-only, chromeless)', () => {
     const css = readFileSync(resolve(process.cwd(), 'src/components/toolbar/Toolbar.css'), 'utf8');
     expect(css).toMatch(/\.semiont-annotate-toolbar--compact\s*\{/);
-    expect(css).toMatch(/\.semiont-annotate-toolbar--compact\s+\.semiont-dropdown-label\s*\{[^}]*display:\s*none/);
+
+    // Icon-only VISUALLY, but the label stays in the accessibility tree: its
+    // sibling is a bare emoji span with no accessible name, so `display: none`
+    // would leave the collapsed trigger unnamed for screen readers. The
+    // clipped-1px technique (same as .semiont-sr-only) is the contract.
+    const compactLabel = css.match(
+      /\.semiont-annotate-toolbar--compact\s+\.semiont-dropdown-label\s*\{([^}]*)\}/,
+    );
+    expect(compactLabel).not.toBeNull();
+    expect(compactLabel![1]).toMatch(/clip:\s*rect\(0,\s*0,\s*0,\s*0\)/);
+    expect(compactLabel![1]).not.toMatch(/display:\s*none/);
   });
 });

package/src/components/toolbar/Toolbar.css

@@ -230,6 +230,18 @@
   border-bottom: none;
 }
 
+/* Icon-only collapsed triggers — but the label stays in the accessibility
+   tree rather than `display: none`. Its sibling is a bare emoji span with no
+   accessible name, so hiding the label outright would leave the trigger
+   unnamed for screen readers. Same technique as .semiont-sr-only. */
 .semiont-annotate-toolbar--compact .semiont-dropdown-label {
-  display: none; /* icon-only collapsed triggers; expanded menus keep labels */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }

package/src/styles/features/compose.css

@@ -121,6 +121,14 @@
   background: var(--semiont-color-primary-50, rgba(59, 130, 246, 0.06));
 }
 
+/* Dark mode needs its own tint: primary-50 is a near-white wash that would
+   glare inside a dark dropzone. Lighter border for contrast, translucent
+   fill — matching the upload-area hover treatment above. */
+[data-theme="dark"] .semiont-form__upload-dropzone[data-drag-over="true"] {
+  border-color: var(--semiont-color-blue-400);
+  background: rgba(59, 130, 246, 0.15);
+}
+
 .semiont-form__upload-text {
   font-size: 0.875rem;
   color: var(--semiont-color-gray-600);