@sarimarcus/content-sites-ui 0.31.0 → 0.31.2

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.31.2 (2026-10-08)
+
+- `./composed`: `EntityCard` takes `eager` (default 3), `priority`, `mediaClass`, `sizes`, `fallbackWidth`/`fallbackHeight`, `tone` (`primary` | `accent`), `footer` (default `true`) and `footerJustify` (`between` | `end`); `fallbackSrc` is optional, and without `image` or `fallbackSrc` the new `fallback` slot renders (never an `<img>` without `src`). Default output is unchanged apart from the image's new `motion-reduce:group-hover:scale-100`, which cancels the hover zoom under `prefers-reduced-motion` on every EntityCard (Hotel, Activity, Lodge, Tour and the tourism cards moved onto it) (SLA-3019).
+- `./primitives`: `Icon` takes `strokeWidth` (default 2; a non-default value reaches Lucide's `stroke-width`, default output unchanged). New `RatingStars` (`value` fills `Math.round(value)` of 5, or `count` filled stars; `ariaLabel`, `sizeClass` default `w-3.5 h-3.5`, `class`). `ArrowLabel` and `LinkArrow` share one arrow svg: LinkArrow's output is byte-identical, ArrowLabel's loses the space between its two `<path>`s (whitespace only, every ArrowLabel page on all three sites) (SLA-3019).
+
+## 0.31.1 (2026-10-08)
+
+- No changes; lockstep release with tourism (SLA-3018).
+
 ## 0.31.0 (2026-10-08)
 
 - `./editorial` adds `AlsoExplore` (`AlsoExploreItem`) and `VisitTiming` (`VisitTimingData`; props `title`, `id`, `class` default `mt-12`, `labelClass` default `text-[0.8125rem]`), moved from the sites (SLA-3017).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.31.0",
+  "version": "0.31.2",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -49,6 +49,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.31.0"
+    "@sarimarcus/content-sites-core": "0.31.2"
   }
 }

package/src/composed/EntityCard.astro

@@ -1,15 +1,28 @@
 ---
 /**
  * EntityCard — the shared frame of an entity teaser card: a whole-card link with a focus ring, an image block
- * (optimized Picture, or a fallback img), a content area and a footer row. Everything that varies between card types
+ * (optimized Picture, or a fallback), a content area and a footer row. Everything that varies between card types
  * comes in through slots, so the frame owns no copy and no data shape.
  *
  * Variants:
- *   media  — fixed-height image, the name heading sits in the body (hotel, lodge).
- *   poster — 3:2 image, the name heading is overlaid on the image through the `overlay` slot (activity, tour).
+ *   media  — fixed-height image, the name heading sits in the body (hotel, lodge, restaurant, bar).
+ *   poster — 3:2 image, the content area grows to the card's height (activity, tour, monument, dish, walk).
+ *
+ * Options (each default reproduces the original frame):
+ *   eager / priority     — the first `eager` cards (default 3) load eagerly; fetchpriority=high on index 0 or with
+ *                          `priority`, otherwise omitted.
+ *   mediaClass           — the image block's size utilities (media 'h-44 sm:h-52', poster 'aspect-[3/2]').
+ *   sizes                — the picture's sizes attribute.
+ *   fallbackWidth/Height — the fallback img's intrinsic size (media 320×192, poster 400×224).
+ *   tone                 — 'primary' or 'accent': the article border and the focus ring.
+ *   footer               — false drops the footer row (a card whose CTA ends its body).
+ *   footerJustify        — 'between' (meta start, CTA end) or 'end' (CTA only).
+ * Without `image`, `fallbackSrc` renders an <img>; without that too, the `fallback` slot renders (nothing if absent).
+ * Under prefers-reduced-motion the hover zoom is cancelled.
  *
  * Slots:
  *   overlay     — inside the image block, after the image: corner badges, gradient scrims, an overlaid heading.
+ *   fallback    — the image block's content when there is neither `image` nor `fallbackSrc` (a placeholder icon).
  *   (default)   — the body above the footer.
  *   footer-meta — start of the footer row (location, closing time…).
  *   footer-cta  — end of the footer row.
@@ -22,12 +35,21 @@ interface Props {
   variant?: 'media' | 'poster';
   image?: ImageMetadata;
   /** Shown when `image` is absent. */
-  fallbackSrc: string;
+  fallbackSrc?: string;
   imageAlt: string;
   /** @deprecated Ignored: images are WebP only (SLA-2960). Removed in the next minor. */
   formats?: Array<'avif' | 'webp' | 'png' | 'jpeg' | 'jpg' | 'svg'>;
-  /** Position in the list: the first three load eagerly, the first one at high priority. */
+  /** Position in the list: the first `eager` load eagerly, the first one at high priority. */
   index?: number;
+  eager?: number;
+  priority?: boolean;
+  mediaClass?: string;
+  sizes?: string;
+  fallbackWidth?: string | number;
+  fallbackHeight?: string | number;
+  tone?: 'primary' | 'accent';
+  footer?: boolean;
+  footerJustify?: 'between' | 'end';
   class?: string;
 }
 
@@ -38,49 +60,65 @@ const {
   fallbackSrc,
   imageAlt,
   index = 999,
+  eager = 3,
+  priority = false,
+  sizes = '(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw',
+  tone = 'primary',
+  footer = true,
+  footerJustify = 'between',
   class: className,
 } = Astro.props;
 
 const poster = variant === 'poster';
+const {
+  mediaClass: media = poster ? 'aspect-[3/2]' : 'h-44 sm:h-52',
+  fallbackWidth = poster ? '400' : '320',
+  fallbackHeight = poster ? '224' : '192',
+} = Astro.props;
+const ring = tone === 'accent' ? 'focus-visible:ring-accent' : 'focus-visible:ring-primary';
+const border = tone === 'accent' ? 'border-accent/20' : 'border-border';
 const linkClass = poster
-  ? 'flex flex-col h-full focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-xl'
-  : 'flex flex-col flex-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-xl';
-const mediaClass = poster
-  ? 'relative aspect-[3/2] overflow-hidden img-placeholder shrink-0'
-  : 'relative h-44 sm:h-52 overflow-hidden img-placeholder shrink-0';
-const fallbackWidth = poster ? '400' : '320';
-const fallbackHeight = poster ? '224' : '192';
+  ? `flex flex-col h-full focus-visible:ring-2 ${ring} focus-visible:ring-offset-2 rounded-xl`
+  : `flex flex-col flex-1 focus-visible:ring-2 ${ring} focus-visible:ring-offset-2 rounded-xl`;
+const mediaClass = `relative ${media} overflow-hidden img-placeholder shrink-0`;
 const contentClass = poster ? 'p-4 sm:p-5 flex flex-col flex-1' : 'flex-1 p-4 sm:p-5 flex flex-col';
+const justify = footerJustify === 'end' ? 'justify-end' : 'justify-between';
 const footerClass = poster
-  ? 'flex items-center justify-between pt-3 border-t border-border mt-auto'
-  : 'flex items-center justify-between pt-3 border-t border-border';
+  ? `flex items-center ${justify} pt-3 border-t border-border mt-auto`
+  : `flex items-center ${justify} pt-3 border-t border-border`;
+// motion-reduce:group-hover:scale-100 has group-hover:scale-105's specificity and compiles after it, so it wins.
+const imgClass = 'w-full h-full object-cover transition-transform duration-500 group-hover:scale-105 motion-reduce:group-hover:scale-100';
+const loading = index < eager ? 'eager' : 'lazy';
+const fetchpriority = priority || index === 0 ? 'high' : undefined;
 ---
 
-<article class:list={['group relative bg-card rounded-xl overflow-hidden card-lift border border-border flex flex-col h-full', className]}>
+<article class:list={[`group relative bg-card rounded-xl overflow-hidden card-lift border ${border} flex flex-col h-full`, className]}>
   <a href={href} class={linkClass}>
     <div class={mediaClass}>
       {image ? (
         <ResponsivePicture
           src={image}
           alt={imageAlt}
-          sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
+          sizes={sizes}
           pictureAttributes={{ class: 'block w-full h-full' }}
-          class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
-          loading={index < 3 ? "eager" : "lazy"}
-          fetchpriority={index === 0 ? "high" : undefined}
+          class={imgClass}
+          loading={loading}
+          fetchpriority={fetchpriority}
           decoding="async"
         />
-      ) : (
+      ) : fallbackSrc ? (
         <img
           src={fallbackSrc}
           alt={imageAlt}
           width={fallbackWidth}
           height={fallbackHeight}
-          class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
-          loading={index < 3 ? "eager" : "lazy"}
-          fetchpriority={index === 0 ? "high" : undefined}
+          class={imgClass}
+          loading={loading}
+          fetchpriority={fetchpriority}
           decoding="async"
         />
+      ) : (
+        <slot name="fallback" />
       )}
 
       <slot name="overlay" />
@@ -95,11 +133,13 @@ const footerClass = poster
         </div>
       )}
 
-      <div class={footerClass}>
-        <slot name="footer-meta" />
+      {footer && (
+        <div class={footerClass}>
+          <slot name="footer-meta" />
 
-        <slot name="footer-cta" />
-      </div>
+          <slot name="footer-cta" />
+        </div>
+      )}
     </div>
   </a>
 </article>

package/src/primitives/ArrowGlyph.astro

@@ -0,0 +1,20 @@
+---
+/** The right arrow of ArrowLabel and LinkArrow. `class` is emitted verbatim. */
+interface Props {
+  class: string;
+}
+
+const { class: className } = Astro.props;
+---
+<svg
+  class={className}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
+</svg>

package/src/primitives/ArrowLabel.astro

@@ -1,4 +1,6 @@
 ---
+import ArrowGlyph from './ArrowGlyph.astro';
+
 interface Props {
   class?: string;
   arrowClass?: string;
@@ -8,17 +10,5 @@ const { class: className = '', arrowClass = 'h-4 w-4' } = Astro.props;
 ---
 <span class:list={['inline-flex items-center gap-2', className]}>
   <slot />
-  <svg
-    class:list={[arrowClass, 'shrink-0 transition-transform group-hover:translate-x-1']}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    aria-hidden="true"
-  >
-    <path d="M5 12h14" />
-    <path d="m12 5 7 7-7 7" />
-  </svg>
+  <ArrowGlyph class={`${arrowClass} shrink-0 transition-transform group-hover:translate-x-1`} />
 </span>

package/src/primitives/Icon.astro

@@ -8,6 +8,8 @@
  *   class   — Tailwind classes for sizing/color (default: "w-4 h-4")
  *   size    — explicit px size (optional — prefer Tailwind sizing classes)
  *   filled  — render as filled shape instead of outline (e.g. solid stars)
+ *   strokeWidth — outline weight (default 2). @lucide/astro reads `stroke-width` and emits `strokeWidth` as a literal
+ *                 attribute, which stays for byte-identical output.
  *   style   — inline style passthrough (e.g. a breadcrumb fading its separators by index)
  */
 
@@ -19,9 +21,10 @@ interface Props {
   size?: number;
   filled?: boolean;
   style?: string;
+  strokeWidth?: number;
 }
 
-const { name, class: className = 'w-4 h-4', size, filled = false, style } = Astro.props;
+const { name, class: className = 'w-4 h-4', size, filled = false, style, strokeWidth = 2 } = Astro.props;
 
 // 'map-pin' → 'MapPin', 'arrow-right' → 'ArrowRight'
 const pascalName = name
@@ -41,7 +44,8 @@ const resolvedClass = filled ? `${className} fill-current [stroke:none]` : class
     class={resolvedClass}
     {...(size !== undefined ? { size } : {})}
     {...(style ? { style } : {})}
-    strokeWidth={2}
+    strokeWidth={strokeWidth}
+    {...(strokeWidth !== 2 ? { 'stroke-width': strokeWidth } : {})}
     aria-hidden="true"
   />
 )}

package/src/primitives/LinkArrow.astro

@@ -1,5 +1,6 @@
 ---
 import { newTab } from './newTab';
+import ArrowGlyph from './ArrowGlyph.astro';
 interface Props {
   href: string;
   size?: 'sm' | 'base';
@@ -34,16 +35,5 @@ const colorClass = {
   ]}
 >
   <slot />
-  <svg
-    class="w-4 h-4 transition-transform group-hover:translate-x-1"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    aria-hidden="true"
-  >
-    <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
-  </svg>
+  <ArrowGlyph class="w-4 h-4 transition-transform group-hover:translate-x-1" />
 </a>

package/src/primitives/RatingStars.astro

@@ -0,0 +1,30 @@
+---
+/**
+ * RatingStars — a row of filled stars with one accessible label. `value` fills Math.round(value) of 5 stars and mutes
+ * the rest; `count` draws that many filled stars (a hotel's star class).
+ */
+interface Props {
+  value?: number;
+  count?: number;
+  ariaLabel: string;
+  /** Size utilities of each star. */
+  sizeClass?: string;
+  class?: string;
+}
+
+const { value, count, ariaLabel, sizeClass = 'w-3.5 h-3.5', class: className } = Astro.props;
+const total = count ?? 5;
+const filled = count ?? Math.round(value ?? 0);
+const stars = Array.from({ length: total }, (_, i) => i + 1);
+---
+<div class:list={['flex items-center gap-0.5', className]} role="img" aria-label={ariaLabel}>
+  {stars.map((star) => (
+    <svg
+      class={`${sizeClass} ${star <= filled ? 'text-accent fill-current' : 'text-muted fill-current'}`}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+    >
+      <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
+    </svg>
+  ))}
+</div>

package/src/primitives/index.ts

@@ -3,6 +3,7 @@ export { default as Icon } from './Icon.astro';
 export { default as Badge } from './Badge.astro';
 export { default as Chip } from './Chip.astro';
 export { default as ArrowLabel } from './ArrowLabel.astro';
+export { default as RatingStars } from './RatingStars.astro';
 export { default as SectionDivider } from './SectionDivider.astro';
 export { default as LinkArrow } from './LinkArrow.astro';
 export { default as Button } from './Button.astro';