feat(native): Swift Thumbnail previews an image attachment with open and remove actions

packages/native/apple/Package.swift

@@ -28,7 +28,7 @@ let package = Package(
       dependencies: ["AstryxNative"],
       path: "Sources/Astryx",
       // Each component's spec lives beside its view (AST-093 FR1).
-      exclude: ["Avatar/Avatar.spec.md", "Avatar/AvatarStatusDot.spec.md", "Icon/Icon.spec.md"],
+      exclude: ["Avatar/Avatar.spec.md", "Avatar/AvatarStatusDot.spec.md", "Icon/Icon.spec.md", "Thumbnail/Thumbnail.spec.md"],
       resources: [.process("Resources")]
     ),
     .testTarget(name: "AstryxNativeTests", dependencies: ["AstryxNative"], path: "Tests/AstryxNativeTests"),

packages/native/apple/README.md

@@ -32,6 +32,7 @@ apple/
 │   │   ├── Heading/       # Heading
 │   │   ├── Button/        # Button
 │   │   ├── TextInput/     # TextInput
+│   │   ├── Thumbnail/     # Thumbnail, Thumbnail.spec.md
 │   │   ├── Card/          # Card
 │   │   └── Banner/        # Banner
 │   └── AstryxNative/      # contracts, wire, logic host (module AstryxNative)

packages/native/apple/Sources/Astryx/Localization/AstryxStrings.swift

@@ -31,6 +31,19 @@ enum AstryxStrings {
     return result + rest
   }
 
+  /// What a busy view announces when it starts loading.
+  static var spinnerLoading: String { localized("@astryx.spinner.loading", "Loading") }
+  /// A thumbnail's name when it has no alt or label.
+  static var thumbnailFallbackName: String { localized("@astryx.thumbnail.fallbackName", "Thumbnail") }
+  /// The name of a thumbnail's open button.
+  static func thumbnailOpen(_ accessibleName: String) -> String {
+    fill(localized("@astryx.thumbnail.open", "Open {accessibleName}"), ["accessibleName": accessibleName])
+  }
+  /// The name of a thumbnail's remove button.
+  static func thumbnailRemove(_ accessibleName: String) -> String {
+    fill(localized("@astryx.thumbnail.remove", "Remove {accessibleName}"), ["accessibleName": accessibleName])
+  }
+
   static func localized(_ key: String, _ english: String) -> String {
     resourceBundle.localizedString(forKey: key, value: english, table: nil)
   }

packages/native/apple/Sources/Astryx/Resources/af.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Laai tans";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Laai tans";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Duimnael";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "Maak {accessibleName} oop";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "Verwyder {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/ar.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "جارٍ التحميل";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "جارٍ التحميل";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "صورة مصغّرة";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "فتح {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "إزالة {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/ca.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "S’està carregant";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "S’està carregant";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Miniatura";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "Obre {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "Elimina {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/cs.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Načítání";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Načítání";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Náhled";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "Otevřít {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "Odebrat {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/da.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Indlæser";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Indlæser";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Miniature";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "Åbn {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "Fjern {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/de.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Wird geladen";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Wird geladen";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Miniaturansicht";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "{accessibleName} öffnen";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "{accessibleName} entfernen";

packages/native/apple/Sources/Astryx/Resources/el.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Φόρτωση";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Φόρτωση";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Μικρογραφία";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "Άνοιγμα {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "Αφαίρεση {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/en.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Loading";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label; also announced once when a busy input or selector starts loading, in place of its decorative Spinner. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Loading";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Thumbnail";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "Open {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "Remove {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/es.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Cargando";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Cargando";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Miniatura";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "Abrir {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "Quitar {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/fi.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Ladataan";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Ladataan";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Pikkukuva";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "Avaa {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "Poista {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/fr.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Chargement";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Chargement";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Miniature";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "Ouvrir {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "Supprimer {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/he.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "טוען";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "טוען";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "תמונה ממוזערת";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "פתח את {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "הסר את {accessibleName}";

packages/native/apple/Sources/Astryx/Resources/hu.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Betöltés";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Betöltés";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Bélyegkép";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "{accessibleName} megnyitása";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "{accessibleName} eltávolítása";

packages/native/apple/Sources/Astryx/Resources/it.lproj/Localizable.strings

@@ -5,3 +5,15 @@
 
 /* Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense ("work in progress"), not a noun. Kept separate from `typeahead.loading` — translations may diverge. */
 "@astryx.button.loading" = "Caricamento";
+
+/* Screen-reader-only default name for a standalone Spinner's role="status" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge. */
+"@astryx.spinner.loading" = "Caricamento";
+
+/* Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`. */
+"@astryx.thumbnail.fallbackName" = "Miniatura";
+
+/* "Open" = launch/reveal (not "unfold" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`. */
+"@astryx.thumbnail.open" = "Apri {accessibleName}";
+
+/* Screen-reader-only label on the "×" on a Thumbnail (image preview chip). `{accessibleName}` is the thumbnail's name — example: `Remove profile.jpg`. */
+"@astryx.thumbnail.remove" = "Rimuovi {accessibleName}";