@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/src/color/createColorWheel.ts

@@ -290,7 +290,6 @@ export function createColorWheel(
       name: p.name,
       form: p.form,
       disabled: s.isDisabled || p.isDisabled,
-      tabIndex: s.isDisabled || p.isDisabled ? undefined : 0,
       "aria-label":
         p["aria-label"] ??
         (p["aria-labelledby"] ? undefined : s.value.getChannelName("hue", locale().locale)),
@@ -308,11 +307,6 @@ export function createColorWheel(
         const target = e.target as HTMLInputElement;
         s.setHue(parseFloat(target.value));
       },
-      onBlur: () => {
-        if (s.isDragging) {
-          s.setDragging(false);
-        }
-      },
       style: {
         position: "absolute" as const,
         width: "100%",

package/src/color/intl/index.ts

@@ -0,0 +1,316 @@
+/**
+ * Color internationalization strings.
+ *
+ * Port of `@react-aria/color`'s intl catalog — the `colorPicker`,
+ * `twoDimensionalSlider`, `colorSwatch`, `transparent`, `colorNameAndValue`,
+ * and `colorInputLabel` messages across all 34 upstream locales. Consumed via
+ * `createColorStringFormatter`, mirroring upstream's
+ * `useLocalizedStringFormatter(intlMessages, '@react-aria/color')`.
+ *
+ * The per-locale message SEPARATORS differ (e.g. CJK `：`/`、`, French
+ * non-breaking ` :`), so each locale's function form is preserved
+ * verbatim rather than shared.
+ */
+
+import type { LocalizedStrings } from "@internationalized/string";
+import { createStringFormatter } from "../../i18n";
+
+export type ColorIntlKey =
+  | "colorPicker"
+  | "twoDimensionalSlider"
+  | "colorSwatch"
+  | "transparent"
+  | "colorNameAndValue"
+  | "colorInputLabel";
+
+export type ColorIntlVariables = {
+  name?: string;
+  value?: string;
+  label?: string;
+  channelLabel?: string;
+};
+
+type ColorIntlMessage = string | ((args: ColorIntlVariables | undefined) => string);
+
+export const colorIntlStrings: LocalizedStrings<ColorIntlKey, ColorIntlMessage> = {
+  "ar-AE": {
+    colorPicker: "أداة انتقاء اللون",
+    twoDimensionalSlider: "مُنزلق 2D",
+    colorSwatch: "تغيير الألوان",
+    transparent: "شفاف",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "bg-BG": {
+    colorPicker: "Средство за избиране на цвят",
+    twoDimensionalSlider: "2D плъзгач",
+    colorSwatch: "цветна мостра",
+    transparent: "прозрачен",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "cs-CZ": {
+    colorPicker: "Výběr barvy",
+    twoDimensionalSlider: "2D posuvník",
+    colorSwatch: "barevný vzorek",
+    transparent: "průhledný",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "da-DK": {
+    colorPicker: "Farvevælger",
+    twoDimensionalSlider: "2D-skyder",
+    colorSwatch: "farveprøve",
+    transparent: "gennemsigtig",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "de-DE": {
+    colorPicker: "Farbwähler",
+    twoDimensionalSlider: "2D-Schieberegler",
+    colorSwatch: "Farbfeld",
+    transparent: "transparent",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "el-GR": {
+    colorPicker: "Επιλογέας χρωμάτων",
+    twoDimensionalSlider: "Ρυθμιστικό 2D",
+    colorSwatch: "χρωματικό δείγμα",
+    transparent: "διαφανές",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "en-US": {
+    colorPicker: "Color picker",
+    twoDimensionalSlider: "2D slider",
+    colorSwatch: "color swatch",
+    transparent: "transparent",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "es-ES": {
+    colorPicker: "Selector de color",
+    twoDimensionalSlider: "Regulador 2D",
+    colorSwatch: "muestra de color",
+    transparent: "transparente",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "et-EE": {
+    colorPicker: "Värvivalija",
+    twoDimensionalSlider: "2D-liugur",
+    colorSwatch: "värvinäidis",
+    transparent: "läbipaistev",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "fi-FI": {
+    colorPicker: "Värimuokkain",
+    twoDimensionalSlider: "2D-liukusäädin",
+    colorSwatch: "värimalli",
+    transparent: "läpinäkyvä",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "fr-FR": {
+    colorPicker: "Sélecteur de couleurs",
+    twoDimensionalSlider: "Curseur 2D",
+    colorSwatch: "Échantillon de couleurs",
+    transparent: "Transparent",
+    colorNameAndValue: (args) => `${args?.name} : ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "he-IL": {
+    colorPicker: "בוחר הצבעים",
+    twoDimensionalSlider: "מחוון דו מימדי",
+    colorSwatch: "דוגמית צבע",
+    transparent: "שקוף",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "hr-HR": {
+    colorPicker: "Odabir boje",
+    twoDimensionalSlider: "2D klizač",
+    colorSwatch: "uzorak boje",
+    transparent: "transparentno",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "hu-HU": {
+    colorPicker: "Színválasztó",
+    twoDimensionalSlider: "2D-csúszka",
+    colorSwatch: "színtár",
+    transparent: "átlátszó",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "it-IT": {
+    colorPicker: "Selettore colore",
+    twoDimensionalSlider: "Cursore 2D",
+    colorSwatch: "campione di colore",
+    transparent: "trasparente",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "ja-JP": {
+    colorPicker: "カラーピッカー",
+    twoDimensionalSlider: "2D スライダー",
+    colorSwatch: "カラースウォッチ",
+    transparent: "透明",
+    colorNameAndValue: (args) => `${args?.name} : ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}、${args?.channelLabel}`,
+  },
+  "ko-KR": {
+    colorPicker: "색상 피커",
+    twoDimensionalSlider: "2D 슬라이더",
+    colorSwatch: "색상 견본",
+    transparent: "투명도",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "lt-LT": {
+    colorPicker: "Spalvų parinkiklis",
+    twoDimensionalSlider: "2D slankiklis",
+    colorSwatch: "spalvų pavyzdys",
+    transparent: "skaidrus",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "lv-LV": {
+    colorPicker: "Krāsu atlasītājs",
+    twoDimensionalSlider: "2D slīdnis",
+    colorSwatch: "krāsu paraugs",
+    transparent: "caurspīdīgs",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "nb-NO": {
+    colorPicker: "Fargevelger",
+    twoDimensionalSlider: "2D-glidebryter",
+    colorSwatch: "fargekart",
+    transparent: "gjennomsiktig",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "nl-NL": {
+    colorPicker: "Kleurkiezer",
+    twoDimensionalSlider: "2D-schuifregelaar",
+    colorSwatch: "kleurstaal",
+    transparent: "transparant",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "pl-PL": {
+    colorPicker: "Próbnik kolorów",
+    twoDimensionalSlider: "Suwak 2D",
+    colorSwatch: "próbka koloru",
+    transparent: "przezroczysty",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "pt-BR": {
+    colorPicker: "Seletor de cores",
+    twoDimensionalSlider: "Controle deslizante 2D",
+    colorSwatch: "amostra de cores",
+    transparent: "transparente",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "pt-PT": {
+    colorPicker: "Seletor de cores",
+    twoDimensionalSlider: "Controle deslizante 2D",
+    colorSwatch: "amostra de cor",
+    transparent: "transparente",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "ro-RO": {
+    colorPicker: "Selector de culori",
+    twoDimensionalSlider: "Glisor 2D",
+    colorSwatch: "specimen de culoare",
+    transparent: "transparent",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "ru-RU": {
+    colorPicker: "Палитра цветов",
+    twoDimensionalSlider: "Ползунок 2D",
+    colorSwatch: "цветовой образец",
+    transparent: "прозрачный",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "sk-SK": {
+    colorPicker: "Výber farieb",
+    twoDimensionalSlider: "2D jazdec",
+    colorSwatch: "vzorkovník farieb",
+    transparent: "transparentný",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "sl-SI": {
+    colorPicker: "Izbirnik barv",
+    twoDimensionalSlider: "2D drsnik",
+    colorSwatch: "barvna paleta",
+    transparent: "prozorno",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "sr-SP": {
+    colorPicker: "Birač boja",
+    twoDimensionalSlider: "2D klizač",
+    colorSwatch: "Uzorak boje",
+    transparent: "providno",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "sv-SE": {
+    colorPicker: "Färgväljaren",
+    twoDimensionalSlider: "2D-reglage",
+    colorSwatch: "färgruta",
+    transparent: "genomskinlig",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "tr-TR": {
+    colorPicker: "Renk Seçici",
+    twoDimensionalSlider: "2D sürgü",
+    colorSwatch: "renk örneği",
+    transparent: "saydam",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "uk-UA": {
+    colorPicker: "Палітра кольорів",
+    twoDimensionalSlider: "Повзунок 2D",
+    colorSwatch: "зразок кольору",
+    transparent: "прозорий",
+    colorNameAndValue: (args) => `${args?.name}: ${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}, ${args?.channelLabel}`,
+  },
+  "zh-CN": {
+    colorPicker: "拾色器",
+    twoDimensionalSlider: "2D 滑块",
+    colorSwatch: "颜色色板",
+    transparent: "透明",
+    colorNameAndValue: (args) => `${args?.name}：${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}、${args?.channelLabel}`,
+  },
+  "zh-TW": {
+    colorPicker: "檢色器",
+    twoDimensionalSlider: "2D 滑桿",
+    colorSwatch: "色票",
+    transparent: "透明",
+    colorNameAndValue: (args) => `${args?.name}：${args?.value}`,
+    colorInputLabel: (args) => `${args?.label}，${args?.channelLabel}`,
+  },
+};
+
+/**
+ * Reactive color string formatter for the current locale. Mirrors upstream
+ * `useLocalizedStringFormatter(intlMessages, '@react-aria/color')`.
+ */
+export function createColorStringFormatter() {
+  return createStringFormatter(colorIntlStrings, "@react-aria/color");
+}

package/src/combobox/createComboBox.ts

@@ -9,6 +9,7 @@ import { isServer } from "solid-js/web";
 import { createPress } from "../interactions/createPress";
 import { createFocusRing } from "../interactions/createFocusRing";
 import { createLabel } from "../label/createLabel";
+import { createLabels } from "../label/createLabels";
 import { filterDOMProps } from "../utils/filterDOMProps";
 import { mergeProps } from "../utils/mergeProps";
 import { createId } from "../ssr";
@@ -215,8 +216,14 @@ export function createComboBox<T>(
     labelElementType: "label",
   });
 
-  // Focus ring for keyboard focus styling
+  // Focus ring for keyboard focus styling. `isTextInput: true` mirrors RAC's
+  // `<Input>` (react-aria-components Input.tsx:84-85): a text input focused via
+  // pointer (e.g. clicking the chevron to open) must NOT read as focus-visible,
+  // and typing must not flash the ring. Without it the input — and, through the
+  // option's activedescendant focus-visible inheritance, the highlighted option —
+  // paints the brighter `:focused` neutral/accent tokens on a mouse open.
   const { isFocusVisible, focusProps } = createFocusRing({
+    isTextInput: true,
     get autoFocus() {
       return getProps().autoFocus;
     },
@@ -670,6 +677,15 @@ export function createComboBox<T>(
       const isDisabled = p.isDisabled ?? state.isDisabled;
       const isReadOnly = p.isReadOnly ?? state.isReadOnly;
 
+      // Mirror useComboBox: fold the field label into the trigger's name via
+      // useLabels — keeps aria-label ("Show suggestions") and self-references the
+      // button so the accessible name resolves to "<buttonLabel> <fieldLabel>".
+      const triggerLabels = createLabels({
+        id: buttonId,
+        "aria-label": stringFormatter?.().format("buttonLabel") ?? "Show suggestions",
+        "aria-labelledby": p["aria-labelledby"] ?? labelProps.id,
+      });
+
       return mergeProps(
         pressProps as Record<string, unknown>,
         {
@@ -681,20 +697,35 @@ export function createComboBox<T>(
           "aria-controls": isOpen ? listBoxId : undefined,
           "aria-disabled": isDisabled || isReadOnly || undefined,
           disabled: isDisabled || isReadOnly || undefined,
-          "aria-label": stringFormatter?.().format("buttonLabel") ?? "Show suggestions",
+          "aria-label": triggerLabels["aria-label"],
+          "aria-labelledby": triggerLabels["aria-labelledby"],
           "data-open": isOpen || undefined,
           "data-disabled": isDisabled || isReadOnly || undefined,
         } as Record<string, unknown>,
       ) as JSX.HTMLAttributes<HTMLElement>;
     },
     get listBoxProps() {
+      const p = getProps();
       const isMulti = state.selectionMode() === "multiple";
+      // Mirror useComboBox: name the listbox via useLabels — aria-label
+      // ("Suggestions") folded with the field label id (not the input id).
+      const boxLabels = createLabels({
+        id: listBoxId,
+        "aria-label": stringFormatter?.().format("listboxLabel") ?? "Suggestions",
+        "aria-labelledby": p["aria-labelledby"] ?? labelProps.id,
+      });
       return {
         id: listBoxId,
         role: "listbox",
-        "aria-labelledby": inputId,
+        "aria-label": boxLabels["aria-label"],
+        "aria-labelledby": boxLabels["aria-labelledby"],
         "aria-multiselectable": isMulti || undefined,
-        tabIndex: -1,
+        // No tabIndex here: useComboBox's listBoxProps never set one
+        // (useComboBox.ts:488-496) — the popover listbox's tabIndex flows from
+        // `useSelectableCollection`, which leaves it `undefined` under virtual
+        // focus so the container never enters the roving-focus trail. createListBox
+        // computes that (undefined for virtual focus); hardcoding -1 here made the
+        // listbox a stray `[tabindex]` node in the D5 focus snapshot.
         shouldSelectOnPressUp: true,
         shouldFocusOnHover: true,
         // Track pointerdown inside listbox to prevent blur from closing