@contentrain/astro-kit 0.29.3 → 0.30.0

package/catalog.json

@@ -2427,6 +2427,18 @@
           "type": "boolean",
           "default": false,
           "description": "The title in the site's link colour (--color-link), as themes that colour every link do."
+        },
+        "sizes": {
+          "type": "string",
+          "description": "The image's `sizes` hint; absent, the card's own guess. A list passes the slot its columns give."
+        },
+        "imageHeight": {
+          "type": "string",
+          "description": "The image block's height as the source sets it (a CSS length or clamp()), cropped to fit; wins over imageAspect."
+        },
+        "imageAspect": {
+          "type": "string",
+          "description": "The image block's aspect ratio (16 / 9) where the source sets an aspect ratio; absent, 16 / 9."
         }
       },
       "slots": {},

package/components/_shared/KitImage.astro

@@ -23,6 +23,8 @@ interface Props {
   /** Rendered width in the layout, for srcset selection. */
   sizes?: string | undefined
   class?: string | undefined
+  /** Inline style, for a size the source sets (a card image's height). */
+  style?: string | undefined
   /** The page's largest image: load it first. */
   priority?: boolean | undefined
 }
@@ -30,7 +32,7 @@ interface Props {
 // Raster files under public/, loaded only when a page shows one.
 const LOCAL = import.meta.glob<ImageMetadata>('/public/**/*.{avif,gif,jpeg,jpg,png,tif,tiff,webp,AVIF,GIF,JPEG,JPG,PNG,TIF,TIFF,WEBP}', { import: 'default' })
 
-const { image: given, sizes = '100vw', class: className, priority = false } = Astro.props
+const { image: given, sizes = '100vw', class: className, style, priority = false } = Astro.props
 // Content stores an address; the size the migration measured comes from the site's media table.
 const measured = given.width && given.height ? undefined : mediaSize(given.src)
 const image: ImageInput = measured ? { ...given, ...measured } : given
@@ -48,7 +50,7 @@ const STEPS = [320, 640, 960, 1280, 1600, 1920, 2560]
 const widthsUpTo = (max: number) => [...STEPS.filter(step => step < max), max]
 ---
 {local
-  ? <Image src={local} alt={image.alt ?? ''} {...size} widths={widthsUpTo(image.width ?? local.width)} sizes={sizes} class={className} loading={loading} fetchpriority={fetchpriority} />
+  ? <Image src={local} alt={image.alt ?? ''} {...size} widths={widthsUpTo(image.width ?? local.width)} sizes={sizes} class={className} style={style} loading={loading} fetchpriority={fetchpriority} />
   : image.width && image.height && path === undefined
-    ? <Image src={image.src} alt={image.alt ?? ''} width={image.width} height={image.height} widths={widthsUpTo(image.width)} sizes={sizes} class={className} loading={loading} fetchpriority={fetchpriority} />
-    : <img src={image.src} alt={image.alt ?? ''} width={image.width} height={image.height} class={className} loading={loading} fetchpriority={fetchpriority} decoding="async" />}
+    ? <Image src={image.src} alt={image.alt ?? ''} width={image.width} height={image.height} widths={widthsUpTo(image.width)} sizes={sizes} class={className} style={style} loading={loading} fetchpriority={fetchpriority} />
+    : <img src={image.src} alt={image.alt ?? ''} width={image.width} height={image.height} class={className} style={style} loading={loading} fetchpriority={fetchpriority} decoding="async" />}

package/components/nav/Nav.astro

@@ -1,6 +1,6 @@
 ---
 // Site navigation. Wide screens get an inline list whose submenus open on
-// hover and keyboard focus; narrow screens get a toggle that opens the menu as
+// hover and keyboard focus (a chevron button marks the ones that have one); narrow screens get a toggle that opens the menu as
 // a native popover (drawer) or a <details> dropdown. No JavaScript.
 import { tv } from 'tailwind-variants'
 import type { NavItem } from '../_shared/types'
@@ -57,11 +57,17 @@ const drawer = `${id}-drawer`
         <li class="group relative">
           <a href={item.href} aria-current={item.href === current ? 'page' : undefined} target={item.newTab ? '_blank' : undefined} rel={item.newTab ? 'noopener' : undefined} class={link()}>{item.label}</a>
           {item.children && item.children.length > 0 && (
+            <>
+              {/* The chevron is the submenu's handle: focusing it (a tap on a touch screen, Tab on a keyboard) opens the submenu, with no script. */}
+              <button type="button" aria-haspopup="true" aria-label={item.label} class="ms-1 inline-flex cursor-pointer items-center align-middle opacity-80 hover:opacity-100">
+                <svg aria-hidden="true" viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
+              </button>
             <ul class={sub()}>
               {item.children.map(child => (
                 <li><a href={child.href} aria-current={child.href === current ? 'page' : undefined} class="block rounded-md px-3 py-2 text-sm text-ink no-underline hover:bg-surface-muted">{child.label}</a></li>
               ))}
             </ul>
+            </>
           )}
         </li>
       ))}

package/components/post-card/PostCard.astro

@@ -52,19 +52,26 @@ interface Props {
   byline?: 'inline' | 'below' | undefined
   /** The title in the site's link colour, as themes that colour every link do (Hello Elementor). */
   linkTitle?: boolean | undefined
+  /** The image's `sizes` hint; absent, the card's own guess. A list passes the slot its columns give. */
+  sizes?: string | undefined
+  /** The image block's height as the source sets it (a CSS length or `clamp()`), cropped to fit; wins over `imageAspect`. */
+  imageHeight?: string | undefined
+  /** The image block's aspect ratio (`16 / 9`) where the source sets an aspect ratio; absent, 16 / 9. */
+  imageAspect?: string | undefined
 }
 
-const { title, href, excerpt, date: rawDate, locale = 'en', image, category, author, headingLevel = 2, layout, surface, byline, linkTitle } = Astro.props
+const { title, href, excerpt, date: rawDate, locale = 'en', image, category, author, headingLevel = 2, layout, surface, byline, linkTitle, sizes, imageHeight, imageAspect } = Astro.props
 const date = rawDate === undefined ? undefined : new Date(rawDate)
 const slots = card({ layout, surface, byline })
 const below = byline === 'below'
 const shown = date?.toLocaleDateString(locale, { dateStyle: 'long', timeZone: 'UTC' })
+const imageStyle = imageHeight ? `height:${imageHeight}` : imageAspect ? `aspect-ratio:${imageAspect}` : undefined
 const Heading = `h${headingLevel}` as 'h2' | 'h3'
 ---
 <article class={slots.root()}>
   {image && layout !== 'minimal' && (
     <div class={slots.media()}>
-      <KitImage image={image} sizes={layout === 'horizontal' ? '256px' : '(min-width: 1024px) 360px, 100vw'} class="aspect-[16/9] w-full object-cover transition duration-300 group-hover:scale-[1.02]" />
+      <KitImage image={image} sizes={sizes ?? (layout === 'horizontal' ? '256px' : '(min-width: 1024px) 360px, 100vw')} class:list={['w-full object-cover transition duration-300 group-hover:scale-[1.02]', !imageStyle && 'aspect-[16/9]']} style={imageStyle} />
     </div>
   )}
   <div class={slots.body()}>

package/components/post-card/meta.json

@@ -20,7 +20,10 @@
     "category": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true } }, "description": "Primary category and its archive." },
     "author": { "type": "string", "description": "Author name (posts.author → authors.name)." },
     "headingLevel": { "type": "integer", "min": 2, "max": 3, "default": 2, "description": "Title heading level in the page outline." },
-    "linkTitle": { "type": "boolean", "default": false, "description": "The title in the site's link colour (--color-link), as themes that colour every link do." }
+    "linkTitle": { "type": "boolean", "default": false, "description": "The title in the site's link colour (--color-link), as themes that colour every link do." },
+    "sizes": { "type": "string", "description": "The image's `sizes` hint; absent, the card's own guess. A list passes the slot its columns give." },
+    "imageHeight": { "type": "string", "description": "The image block's height as the source sets it (a CSS length or clamp()), cropped to fit; wins over imageAspect." },
+    "imageAspect": { "type": "string", "description": "The image block's aspect ratio (16 / 9) where the source sets an aspect ratio; absent, 16 / 9." }
   },
   "slots": {},
   "js": "none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.29.3",
+  "version": "0.30.0",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",
@@ -42,7 +42,7 @@
     "mapping"
   ],
   "dependencies": {
-    "@contentrain/types": "1.56.1"
+    "@contentrain/types": "1.58.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",