@twentyfirstmedia/ui-core 0.2.0 → 0.3.0

package/src/components/previews.tsx

@@ -1,5 +1,7 @@
 "use client";
 import * as React from "react";
+import { useStrings } from "../context.js";
+import { PREVIEWS_STRINGS } from "../strings.js";
 import { useControlled } from "../hooks.js";
 import { cx } from "../cx.js";
 import { Avatar } from "./foundation.js";
@@ -10,6 +12,7 @@ import type { EmailPreviewProps, SearchAdPreviewProps } from "./types.js";
 
 /* ── Email and ad previews ── */
 export function EmailPreview(p: EmailPreviewProps) {
+  const t = useStrings(PREVIEWS_STRINGS);
   const dev = useControlled<string>(p.device, "desktop", p.onDevice);
   return (
     <div className="tf-mailprev">
@@ -19,7 +22,7 @@ export function EmailPreview(p: EmailPreviewProps) {
           <div className="tf-option-text">
             <b>{p.fromName || p.from}</b>
             <span className="tf-mailprev-subj">
-              <b>{p.subject || "(No subject)"}</b>
+              <b>{p.subject || t.noSubject}</b>
               {p.preheader && <span>{" — " + p.preheader}</span>}
             </span>
           </div>
@@ -28,15 +31,15 @@ export function EmailPreview(p: EmailPreviewProps) {
           size="sm"
           value={dev[0]}
           onChange={dev[1]}
-          label="Device"
+          label={t.device}
           options={[
             {
               value: "desktop",
-              label: "Desktop",
+              label: t.desktop,
             },
             {
               value: "mobile",
-              label: "Mobile",
+              label: t.mobile,
             },
           ]}
         />
@@ -44,7 +47,7 @@ export function EmailPreview(p: EmailPreviewProps) {
       <div className={cx("tf-mailprev-stage", dev[0])}>
         <div className="tf-mailprev-frame">
           {p.html != null ? (
-            <iframe title="Email preview" sandbox="" srcDoc={p.html} />
+            <iframe title={t.emailPreview} sandbox="" srcDoc={p.html} />
           ) : (
             <div className="tf-mailprev-body">{p.children}</div>
           )}
@@ -62,6 +65,7 @@ export function EmailPreview(p: EmailPreviewProps) {
 }
 
 export function SearchAdPreview(p: SearchAdPreviewProps) {
+  const t = useStrings(PREVIEWS_STRINGS);
   const dev = useControlled<string>(p.device, "mobile", p.onDevice),
     hl = (p.headlines || []).filter(Boolean).slice(0, 3),
     ds = (p.descriptions || []).filter(Boolean).slice(0, 2);
@@ -75,9 +79,7 @@ export function SearchAdPreview(p: SearchAdPreviewProps) {
     (p[x[0]] || []).forEach((s, i) => {
       if (s && s.length > x[1])
         warn.push(
-          `${
-            x[0] === "headlines" ? "Headline" : x[0] === "descriptions" ? "Description" : "Path"
-          } ${i + 1} is ${s.length} characters, the limit is ${x[1]}`,
+          t.adTooLong(x[0] as "headlines" | "descriptions" | "paths", i + 1, s.length, x[1]),
         );
     });
   });
@@ -101,21 +103,21 @@ export function SearchAdPreview(p: SearchAdPreviewProps) {
             padding: 0,
           }}
         >
-          {"Preview"}
+          {t.preview}
         </span>
         <Segmented
           size="sm"
           value={dev[0]}
           onChange={dev[1]}
-          label="Device"
+          label={t.device}
           options={[
             {
               value: "mobile",
-              label: "Mobile",
+              label: t.mobile,
             },
             {
               value: "desktop",
-              label: "Desktop",
+              label: t.desktop,
             },
           ]}
         />
@@ -129,7 +131,7 @@ export function SearchAdPreview(p: SearchAdPreviewProps) {
             <b>{p.name || p.domain}</b>
             <small>{url}</small>
           </div>
-          <span className="tf-adprev-tag">{p.sponsoredLabel || "Sponsored"}</span>
+          <span className="tf-adprev-tag">{p.sponsoredLabel || t.sponsored}</span>
         </div>
         <a
           className="tf-adprev-hl"
@@ -138,9 +140,9 @@ export function SearchAdPreview(p: SearchAdPreviewProps) {
             e.preventDefault();
           }}
         >
-          {hl.join(" | ") || "Your headline"}
+          {hl.join(" | ") || t.yourHeadline}
         </a>
-        <p className="tf-adprev-desc">{ds.join(" ") || "Your description"}</p>
+        <p className="tf-adprev-desc">{ds.join(" ") || t.yourDescription}</p>
         {p.sitelinks && p.sitelinks.length > 0 && (
           <div className="tf-adprev-links">
             {p.sitelinks.map((s, i) => (

package/src/components/primitives.tsx

@@ -8,6 +8,8 @@ import * as React from "react";
 import { leaving, usePresence } from "../presence.js";
 import { Icon } from "../Icon.js";
 import { cx } from "../cx.js";
+import { useStrings } from "../context.js";
+import { PRIMITIVES_STRINGS } from "../strings.js";
 import { moveFocus, useControlled, useId, useKeepInView } from "../hooks.js";
 import type {
   AccordionProps,
@@ -273,6 +275,7 @@ export function HoverCard(p: HoverCardProps) {
 
 /* ── Carousel ── */
 export function Carousel(p: CarouselProps) {
+  const t = useStrings(PRIMITIVES_STRINGS);
   const slides = p.slides || [];
   const n = slides.length;
   const idx = useControlled(p.index, p.defaultIndex || 0, p.onChange);
@@ -332,8 +335,8 @@ export function Carousel(p: CarouselProps) {
             key={i}
             className="tf-carousel-slide"
             role="group"
-            aria-roledescription="slide"
-            aria-label={`${i + 1} of ${n}`}
+            aria-roledescription={t.slide}
+            aria-label={t.slideOf(i + 1, n)}
           >
             {s}
           </div>
@@ -343,7 +346,7 @@ export function Carousel(p: CarouselProps) {
         <button
           type="button"
           className="tf-iconbtn tf-iconbtn-soft tf-iconbtn-sm"
-          aria-label="Previous slide"
+          aria-label={t.previousSlide}
           disabled={!p.loop && idx[0] <= 0}
           onClick={() => go(idx[0] - 1)}
         >
@@ -356,7 +359,7 @@ export function Carousel(p: CarouselProps) {
                 key={i}
                 type="button"
                 className="tf-carousel-dot"
-                aria-label={`Go to slide ${i + 1}`}
+                aria-label={t.goToSlide(i + 1)}
                 aria-current={i === idx[0] ? "true" : undefined}
                 onClick={() => go(i)}
               />
@@ -366,7 +369,7 @@ export function Carousel(p: CarouselProps) {
         <button
           type="button"
           className="tf-iconbtn tf-iconbtn-soft tf-iconbtn-sm"
-          aria-label="Next slide"
+          aria-label={t.nextSlide}
           disabled={!p.loop && idx[0] >= last}
           onClick={() => go(idx[0] + 1)}
         >

package/src/components/real-estate.tsx

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
 import { Icon } from "../Icon.js";
-import { formatMoney, formatNumber } from "../format.js";
+import { useFormat, useStrings, type Formatters } from "../context.js";
+import { REAL_ESTATE_STRINGS, type UIStrings } from "../strings.js";
 import { cx } from "../cx.js";
 import { Switch, cbox } from "./inputs.js";
 import { Badge, Button, IconButton, TintIcon } from "./foundation.js";
@@ -20,27 +21,35 @@ import type {
 } from "./types.js";
 
 /* ── Real estate ── */
-function listingFacts(x: Listing) {
+type ListingStrings = Pick<UIStrings, "rooms" | "priceOnRequest" | "perMonth">;
+
+function listingFacts(x: Listing, t: ListingStrings, { formatNumber }: Formatters) {
   return [
     x.area != null && [<Icon key="i" name="ruler" size={14} />, `${formatNumber(x.area)} m²`],
-    x.rooms != null && [<Icon key="i" name="bed" size={14} />, `${formatNumber(x.rooms)} rooms`],
+    x.rooms != null && [
+      <Icon key="i" name="bed" size={14} />,
+      t.rooms(formatNumber(x.rooms), x.rooms),
+    ],
     x.place && [<Icon key="i" name="pin" size={14} />, x.place],
   ]
     .filter(Boolean)
     .map((f, i) => <span key={i}>{f}</span>);
 }
 
-function listingPrice(x: Listing) {
-  if (x.price == null) return <b className="tf-listing-price">{"Price on request"}</b>;
+function listingPrice(x: Listing, t: ListingStrings, { formatMoney }: Formatters) {
+  if (x.price == null) return <b className="tf-listing-price">{t.priceOnRequest}</b>;
   return (
     <b className="tf-listing-price">
       {formatMoney(x.price, x.currency)}
-      {x.rent && <small> {"/ month"}</small>}
+      {x.rent && <small> {t.perMonth}</small>}
     </b>
   );
 }
 
 export function ListingCard(p: ListingCardProps) {
+  const t = useStrings(REAL_ESTATE_STRINGS);
+  const fm = useFormat();
+  const { formatMoney, formatNumber } = fm;
   const x = p.listing || p;
   return (
     <article
@@ -65,7 +74,7 @@ export function ListingCard(p: ListingCardProps) {
             <Icon name="image" size={24} />
           </div>
         )}
-        {x.isNew && <span className="tf-listing-new">{"New"}</span>}
+        {x.isNew && <span className="tf-listing-new">{t.isNew}</span>}
         {(x.photos ?? 0) > 1 && (
           <span className="tf-listing-photos">
             <Icon name="image" size={12} />
@@ -84,14 +93,14 @@ export function ListingCard(p: ListingCardProps) {
               onChange: () => {
                 p.onSelect?.(x);
               },
-              label: "Select",
+              label: t.select,
             })}
           </label>
         )}
       </div>
       <div className="tf-listing-body">
         <div className="tf-listing-top">
-          {listingPrice(x)}
+          {listingPrice(x, t, fm)}
           {x.pricePerSqm != null && (
             <span className="tf-listing-ppsqm">
               {formatMoney(x.pricePerSqm, x.currency) + " / m²"}
@@ -101,7 +110,7 @@ export function ListingCard(p: ListingCardProps) {
             <IconButton
               icon="heart"
               size="sm"
-              label={x.wished ? "Remove from saved" : "Save"}
+              label={x.wished ? t.removeFromSaved : t.save}
               className={cx("tf-listing-wish", x.wished && "on")}
               onClick={(e) => {
                 e.stopPropagation();
@@ -111,16 +120,16 @@ export function ListingCard(p: ListingCardProps) {
           )}
         </div>
         <b className="tf-listing-title">{x.title}</b>
-        <div className="tf-listing-facts">{listingFacts(x)}</div>
+        <div className="tf-listing-facts">{listingFacts(x, t, fm)}</div>
         <div className="tf-listing-foot">
           {x.source && <span className="tf-listing-src">{x.source}</span>}
           {x.seller && (
             <Badge tone={x.seller === "private" ? "success" : "neutral"} dot={false}>
-              {x.sellerLabel || (x.seller === "private" ? "Private seller" : "Agent")}
+              {x.sellerLabel || (x.seller === "private" ? t.privateSeller : t.agent)}
             </Badge>
           )}
           {x.phone && (
-            <span className="tf-listing-flag" title="Phone number available">
+            <span className="tf-listing-flag" title={t.phoneAvailable}>
               <Icon name="phone" size={13} />
             </span>
           )}
@@ -143,7 +152,7 @@ export function ListingCard(p: ListingCardProps) {
                 onChange={(s) => {
                   p.onStatus && p.onStatus(x, s);
                 }}
-                label="Status"
+                label={t.status}
               />
             </span>
           )}
@@ -154,6 +163,8 @@ export function ListingCard(p: ListingCardProps) {
 }
 
 export function ResultsToolbar(p: ResultsToolbarProps) {
+  const t = useStrings(REAL_ESTATE_STRINGS);
+  const { formatNumber } = useFormat();
   const all = p.total > 0 && p.selected === p.total,
     some = (p.selected ?? 0) > 0 && !all;
   return (
@@ -166,7 +177,7 @@ export function ResultsToolbar(p: ResultsToolbarProps) {
             onChange: () => {
               p.onSelectAll?.(!all);
             },
-            label: all ? "Deselect all" : "Select all",
+            label: all ? t.deselectAll : t.selectAll,
           })}
         </label>
       )}
@@ -178,10 +189,12 @@ export function ResultsToolbar(p: ResultsToolbarProps) {
       >
         <b>
           {(p.selected ?? 0) > 0
-            ? `${formatNumber(p.selected ?? 0)} selected`
-            : p.title || "Results"}
+            ? t.selectedCount(p.selected ?? 0, formatNumber(p.selected ?? 0))
+            : p.title || t.results}
         </b>
-        <small>{`${formatNumber(p.total || 0)} found` + (p.meta ? " · " + p.meta : "")}</small>
+        <small>
+          {t.foundCount(p.total || 0, formatNumber(p.total || 0)) + (p.meta ? " · " + p.meta : "")}
+        </small>
       </div>
       {(p.selected ?? 0) > 0 &&
         (p.bulkActions || []).map((a, i) => (
@@ -193,12 +206,12 @@ export function ResultsToolbar(p: ResultsToolbarProps) {
             disabled={a.busy}
             onClick={a.onClick}
           >
-            {a.busy ? a.busyLabel || "Working…" : a.label}
+            {a.busy ? a.busyLabel || t.workingEllipsis : a.label}
           </Button>
         ))}
       {p.sortOptions && (
         <label className="tf-results-sort">
-          <span>{"Sort"}</span>
+          <span>{t.sort}</span>
           <select
             className="tf-input"
             value={p.sort}
@@ -219,11 +232,11 @@ export function ResultsToolbar(p: ResultsToolbarProps) {
           size="sm"
           value={p.view}
           onChange={p.onView}
-          label="View"
+          label={t.view}
           options={p.views.map((v) => ({
             value: v,
             icon: v === "grid" ? "grid" : v === "map" ? "map" : "list",
-            label: v === "grid" ? "Grid" : v === "map" ? "Map" : "List",
+            label: v === "grid" ? t.viewGrid : v === "map" ? t.viewMap : t.viewList,
           }))}
         />
       )}
@@ -232,6 +245,8 @@ export function ResultsToolbar(p: ResultsToolbarProps) {
 }
 
 export function SavedSearch(p: SavedSearchProps) {
+  const t = useStrings(REAL_ESTATE_STRINGS);
+  const { formatNumber } = useFormat();
   return (
     <div className={cx("tf-saved", p.enabled === false && "off")}>
       <div className="tf-saved-head">
@@ -245,14 +260,14 @@ export function SavedSearch(p: SavedSearchProps) {
         >
           <b>{p.name}</b>
           <small>
-            {[p.lastRun && `Checked ${p.lastRun}`, p.frequency].filter(Boolean).join(" · ")}
+            {[p.lastRun && t.checkedAt(p.lastRun), p.frequency].filter(Boolean).join(" · ")}
           </small>
         </div>
         {(p.newCount ?? 0) > 0 && (
           <span className="tf-nav-count">{formatNumber(p.newCount ?? 0)}</span>
         )}
         {p.onToggle && (
-          <Switch checked={p.enabled !== false} onChange={p.onToggle} label="Enabled" />
+          <Switch checked={p.enabled !== false} onChange={p.onToggle} label={t.enabled} />
         )}
       </div>
       <div className="tf-saved-crit">
@@ -271,12 +286,12 @@ export function SavedSearch(p: SavedSearchProps) {
         >
           {p.onEdit && (
             <Button size="sm" variant="ghost" icon="edit" onClick={p.onEdit}>
-              {"Edit"}
+              {t.edit}
             </Button>
           )}
           {p.onOpen && (
             <Button size="sm" variant="soft" onClick={p.onOpen}>
-              {p.openLabel || "Show results"}
+              {p.openLabel || t.showResults}
             </Button>
           )}
         </div>
@@ -286,6 +301,8 @@ export function SavedSearch(p: SavedSearchProps) {
 }
 
 export function ValuationCard(p: ValuationCardProps) {
+  const t = useStrings(REAL_ESTATE_STRINGS);
+  const { formatMoney, formatNumber } = useFormat();
   const lo = p.low,
     hi = p.high,
     v = p.value,
@@ -296,10 +313,10 @@ export function ValuationCard(p: ValuationCardProps) {
       conf == null
         ? null
         : conf >= 0.75
-          ? ["ok", "High confidence"]
+          ? ["ok", t.highConfidence]
           : conf >= 0.5
-            ? ["warn", "Medium confidence"]
-            : ["danger", "Low confidence"];
+            ? ["warn", t.mediumConfidence]
+            : ["danger", t.lowConfidence];
   return (
     <div className="tf-valuation">
       <div className="tf-valuation-head">
@@ -309,7 +326,7 @@ export function ValuationCard(p: ValuationCardProps) {
             padding: 0,
           }}
         >
-          {p.title || "Estimated value"}
+          {p.title || t.estimatedValue}
         </span>
         {cl && <StatusIndicator status={cl[0]} label={p.confidenceLabel || cl[1]} size="sm" />}
       </div>
@@ -322,7 +339,7 @@ export function ValuationCard(p: ValuationCardProps) {
       <div
         className="tf-valuation-range"
         role="img"
-        aria-label={`Range ${formatMoney(lo, p.currency)} to ${formatMoney(hi, p.currency)}`}
+        aria-label={t.range(formatMoney(lo, p.currency), formatMoney(hi, p.currency))}
       >
         <div className="tf-valuation-bar">
           {p.asking != null && (
@@ -331,7 +348,7 @@ export function ValuationCard(p: ValuationCardProps) {
               style={{
                 left: Math.max(0, Math.min(100, ((p.asking - lo) / span) * 100)) + "%",
               }}
-              title="Asking price"
+              title={t.askingPrice}
             />
           )}
           <span
@@ -350,7 +367,9 @@ export function ValuationCard(p: ValuationCardProps) {
         <span
           className={cx("tf-valuation-diff", p.asking > hi ? "bad" : p.asking < lo ? "good" : "")}
         >
-          {`Asking price ${formatMoney(p.asking, p.currency)}` +
+          {t.askingPrice +
+            " " +
+            formatMoney(p.asking, p.currency) +
             " · " +
             (p.asking > v ? "+" : "") +
             formatNumber((p.asking - v) / v, {
@@ -378,6 +397,8 @@ export function ValuationCard(p: ValuationCardProps) {
 const ENERGY = ["A+", "A", "B", "C", "D", "E", "F", "G", "H"];
 
 export function EnergyClass(p: EnergyClassProps) {
+  const t = useStrings(REAL_ESTATE_STRINGS);
+  const { formatNumber } = useFormat();
   const scale = p.scale || ENERGY,
     i = scale.indexOf(p.value);
   return (
@@ -385,8 +406,7 @@ export function EnergyClass(p: EnergyClassProps) {
       className="tf-energy"
       role="img"
       aria-label={
-        `Energy class ${p.value}` +
-        (p.kwh != null ? ", " + formatNumber(p.kwh) + " kWh/(m²·a)" : "")
+        t.energyClass(p.value) + (p.kwh != null ? ", " + formatNumber(p.kwh) + " kWh/(m²·a)" : "")
       }
     >
       <div

package/src/components/rich-text-editor.tsx

@@ -2,6 +2,8 @@
 import * as React from "react";
 import { formatNumber } from "../format.js";
 import { cx } from "../cx.js";
+import { useStrings } from "../context.js";
+import { RICH_TEXT_EDITOR_STRINGS } from "../strings.js";
 import { Icon } from "../Icon.js";
 import { FormField } from "./forms.js";
 import { Popover } from "./overlays.js";
@@ -72,6 +74,7 @@ function rteClean(html: string | undefined): string {
 }
 
 export function RichTextEditor(p: RichTextEditorProps) {
+  const strings = useStrings(RICH_TEXT_EDITOR_STRINGS);
   const ref = React.useRef<HTMLDivElement>(null),
     count = React.useState(0),
     active = React.useState<Record<string, boolean>>({}),
@@ -411,7 +414,7 @@ export function RichTextEditor(p: RichTextEditorProps) {
       () => {
         mark("B", "STRONG");
       },
-      "Bold",
+      strings.bold,
       "B",
     ],
     [
@@ -419,7 +422,7 @@ export function RichTextEditor(p: RichTextEditorProps) {
       () => {
         mark("I", "EM");
       },
-      "Italic",
+      strings.italic,
       "I",
     ],
     [
@@ -427,7 +430,7 @@ export function RichTextEditor(p: RichTextEditorProps) {
       () => {
         mark("U");
       },
-      "Underline",
+      strings.underline,
       "U",
     ],
     "-",
@@ -436,38 +439,38 @@ export function RichTextEditor(p: RichTextEditorProps) {
       () => {
         setBlock("H3");
       },
-      "Heading",
+      strings.heading,
     ],
     [
       "quote",
       () => {
         setBlock("BLOCKQUOTE");
       },
-      "Quote",
+      strings.quote,
     ],
     [
       "list",
       () => {
         setList("UL");
       },
-      "Bulleted list",
+      strings.bulletedList,
     ],
     [
       "olist",
       () => {
         setList("OL");
       },
-      "Numbered list",
+      strings.numberedList,
     ],
     "-",
-    ["link", openLink, "Link", "K"],
+    ["link", openLink, strings.link, "K"],
     "-",
     [
       "undo",
       () => {
         restore(-1);
       },
-      "Undo",
+      strings.undo,
       "Z",
     ],
     [
@@ -475,7 +478,7 @@ export function RichTextEditor(p: RichTextEditorProps) {
       () => {
         restore(1);
       },
-      "Redo",
+      strings.redo,
     ],
   ];
   const over = p.maxLength && count[0] > p.maxLength,
@@ -486,7 +489,7 @@ export function RichTextEditor(p: RichTextEditorProps) {
   return (
     <FormField label={p.label} hint={p.hint} error={p.error}>
       <div className={cx("tf-rte", over && "invalid")}>
-        <div className="tf-rte-bar" role="toolbar" aria-label="Formatting">
+        <div className="tf-rte-bar" role="toolbar" aria-label={strings.formatting}>
           {tools.map((t, i) => {
             if (t === "-") return <span key={i} className="tf-rte-sep" aria-hidden />;
             const btn = (
@@ -531,8 +534,8 @@ export function RichTextEditor(p: RichTextEditorProps) {
                     onChange={(e) => {
                       linkUrl[1](e.target.value);
                     }}
-                    placeholder="Link address"
-                    aria-label="Link address"
+                    placeholder={strings.linkAddress}
+                    aria-label={strings.linkAddress}
                     inputMode="url"
                   />
                   <div
@@ -550,11 +553,11 @@ export function RichTextEditor(p: RichTextEditorProps) {
                           applyLink(true);
                         }}
                       >
-                        {"Remove link"}
+                        {strings.removeLink}
                       </Button>
                     )}
                     <Button size="sm" type="submit">
-                      {"Apply"}
+                      {strings.apply}
                     </Button>
                   </div>
                 </form>
@@ -577,7 +580,7 @@ export function RichTextEditor(p: RichTextEditorProps) {
                   aria-expanded={s.open}
                 >
                   {"{ }"}
-                  <span>{"Insert field"}</span>
+                  <span>{strings.insertField}</span>
                 </button>
               )}
             >
@@ -617,7 +620,7 @@ export function RichTextEditor(p: RichTextEditorProps) {
           contentEditable={!p.disabled}
           role="textbox"
           aria-multiline="true"
-          aria-label={typeof p.label === "string" ? p.label : "Text"}
+          aria-label={typeof p.label === "string" ? p.label : strings.text}
           data-placeholder={p.placeholder || ""}
           suppressContentEditableWarning
           onInput={input}

package/src/components/select-menu.tsx

@@ -5,6 +5,8 @@
  * picks, Escape closes. Inside a Form it submits under `name` and shows its message.
  */
 import * as React from "react";
+import { useStrings } from "../context.js";
+import { SELECT_MENU_STRINGS } from "../strings.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
 import { useControlled, useId } from "../hooks.js";
@@ -16,6 +18,7 @@ const norm = (o: string | SelectMenuOption): SelectMenuOption =>
   typeof o === "string" ? { value: o, label: o } : o;
 
 export function SelectMenu(p: SelectMenuProps) {
+  const t = useStrings(SELECT_MENU_STRINGS);
   const uid = useId("sel");
   const id = p.id || uid;
   const fromForm = useFieldError(p.name);
@@ -121,7 +124,7 @@ export function SelectMenu(p: SelectMenuProps) {
           >
             {cur?.icon && <Icon name={cur.icon} size={15} />}
             <span className="tf-selectmenu-value">
-              {cur ? cur.label : p.placeholder || "Select…"}
+              {cur ? cur.label : p.placeholder || t.selectPlaceholder}
             </span>
             <Icon name="chevronDown" size={16} className="tf-selectmenu-chev" />
           </button>
@@ -134,7 +137,7 @@ export function SelectMenu(p: SelectMenuProps) {
           role="listbox"
           tabIndex={-1}
           aria-labelledby={p.label ? `${id}-label` : undefined}
-          aria-label={p.label ? undefined : p.placeholder || "Options"}
+          aria-label={p.label ? undefined : p.placeholder || t.options}
           aria-activedescendant={active >= 0 ? `${uid}-o${active}` : undefined}
           onKeyDown={(e) => {
             const keys: Record<string, () => void> = {