@justai/cuts 0.30.0 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -24,13 +24,13 @@
     "./ground.css": "./src/ground.css"
   },
   "peerDependencies": {
-    "@justai/ui": ">=0.3.0",
     "astro": ">=5"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.5.0"
+    "@justai/core": "^0.5.0",
+    "@justai/ui": "^0.3.0"
   }
 }

package/src/LangPicker.astro

@@ -50,7 +50,11 @@ const ordered = orderLocales(locales);
         every page). `name` answers it without the one risk an `id` would carry — an id must be
         unique in a document. The value is never submitted: this input lives in no form and filters
         the list client-side. */}
-    <input type="search" class="search" name="lang-search" placeholder={searchLabel} autocomplete="off" spellcheck="false" data-search aria-label={searchLabel} />
+    {/* `id` as well as `name` now. The id is the runtime-i18n hook (see <Sheet>'s title): a
+        consumer that translates in the browser re-writes this placeholder from its own dictionary.
+        Safe because the picker already assumes one instance per page — <Sheet> requires a unique
+        id and this file hardcodes `lang-sheet`. */}
+    <input type="search" class="search" id="lang-search" name="lang-search" placeholder={searchLabel} autocomplete="off" spellcheck="false" data-search aria-label={searchLabel} />
     <div class="list" role="listbox" aria-label={label} data-list>
       {ordered.map((l) => (
         <a

package/src/Sheet.astro

@@ -61,7 +61,12 @@ interface Props {
 const { id, title, detent = "medium" } = Astro.props;
 ---
 
-<dialog class="sheet" id={id} data-detent={detent} aria-label={title}>
+{/* aria-labelledby over aria-label when there IS a title, so the accessible name and the visible
+    one are the same string — and `${id}-title` is a STABLE HOOK, the same contract ConfirmSheet
+    exposes. A surface that translates at RUNTIME (the vault, the feed — one bundle, thirteen
+    languages, no per-locale routes) renders this cut in English and re-labels it from its own
+    dictionary. Without the hook such a consumer cannot adopt the cut at all, and writes its own. */}
+<dialog class="sheet" id={id} data-detent={detent} aria-labelledby={title ? `${id}-title` : undefined} aria-label={title ? undefined : "Sheet"}>
   {/* tabindex="-1" so the PANEL can take the focus when the sheet opens. Without it, showModal()
       hands focus to the first focusable descendant — which for a picker is the search field, and on
       a phone that throws the software keyboard over the list the visitor opened the sheet to read.
@@ -72,7 +77,7 @@ const { id, title, detent = "medium" } = Astro.props;
         the thing you see is the thing you can grab. Hidden from AX: Escape and the backdrop are the
         keyboard/assistive paths, and a decorative pill announced as a control is noise. */}
     <div class="sheet-grip" data-grip aria-hidden="true"><span></span></div>
-    {title && <h2 class="sheet-title">{title}</h2>}
+    {title && <h2 class="sheet-title" id={`${id}-title`}>{title}</h2>}
     <div class="sheet-body"><slot /></div>
   </div>
 </dialog>