ferst-core 0.6.2 → 0.7.2

package/components/recipes/Tiles.astro

@@ -1,252 +1,285 @@
----
-/**
- * Tiles — a Level-2 recipe: a responsive grid of tiles in one of five looks,
- * chosen with `variant`:
- *   outline   — stroke only, no shadow (the "wireframe" look)
- *   elevated  — soft shadow, lifts on hover
- *   filled    — soft brand-tinted background
- *   gradient  — brand → derived accent-2 gradient, light text
- *   image     — full-bleed photo with a legibility scrim, light text
- *
- * Radius, stroke and elevation come from the GLOBAL surface tokens (--radius,
- * --card-border, --shadow-*), so tiles stay consistent with every other card and
- * a single knob restyles them all. A tile with `href` becomes one big link.
- * Composes the Icon primitive.
- */
-import Heading from '../blocks/Heading.astro';
-import Icon from '../Icon.astro';
-import { isIconKey } from '../../lib/icons';
-
-interface Tile {
-  icon?: string;
-  eyebrow?: string;
-  title: string;
-  text?: string;
-  href?: string;
-  image?: { src: string; alt?: string };
-}
-interface Props {
-  title?: string;
-  intro?: string;
-  columns?: 2 | 3 | 4;
-  variant?: 'outline' | 'elevated' | 'filled' | 'gradient' | 'image';
-  spotlight?: boolean;
-  tiles?: Tile[];
-}
-const { title, intro, columns = 3, variant = 'elevated', spotlight = false, tiles = [] } = Astro.props;
-// Never reserve more columns than there are tiles; `data-single` centres a lone one.
-const cols = Math.min(columns, Math.max(tiles.length, 1)) as 1 | 2 | 3 | 4;
----
-
-<section class="b-tiles">
-  {(title || intro) && (
-    <div class="b-tiles__head">
-      {title && <Heading text={title} level={2} align="center" />}
-      {intro && <p class="b-tiles__intro">{intro}</p>}
-    </div>
-  )}
-  <div class="b-tiles__grid" data-cols={cols} data-single={tiles.length === 1 ? 'true' : undefined} data-variant={variant} data-spotlight={spotlight ? 'true' : 'false'}>
-    {tiles.map((tile) => {
-      const Tag = tile.href ? 'a' : 'div';
-      const bg =
-        variant === 'image' && tile.image
-          ? `--tile-image: url('${tile.image.src}')`
-          : undefined;
-      return (
-        <Tag class="b-tile" href={tile.href} style={bg}>
-          {tile.icon && isIconKey(tile.icon) && (
-            <span class="b-tile__icon"><Icon name={tile.icon} size={26} /></span>
-          )}
-          {tile.eyebrow && <span class="b-tile__eyebrow">{tile.eyebrow}</span>}
-          <h3 class="b-tile__title">{tile.title}</h3>
-          {tile.text && <p class="b-tile__text">{tile.text}</p>}
-          {tile.href && <span class="b-tile__more" aria-hidden="true">Learn more &rarr;</span>}
-        </Tag>
-      );
-    })}
-  </div>
-</section>
-
-<style>
-  .b-tiles {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    max-width: 72rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-  }
-  .b-tiles__head {
-    max-width: var(--max);
-    margin-inline: auto;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-  .b-tiles__intro {
-    margin: 0;
-    color: var(--muted);
-    font-size: 1.0625rem;
-    line-height: 1.6;
-  }
-  .b-tiles__grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1.25rem;
-  }
-  /* A solitary tile is a centred feature, not a full-width slab. */
-  .b-tiles__grid[data-single] { max-width: 26rem; margin-inline: auto; }
-  @media (min-width: 48em) {
-    .b-tiles__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
-    .b-tiles__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
-    .b-tiles__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
-  }
-  @media (min-width: 64em) {
-    .b-tiles__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
-  }
-
-  /* Base tile — radius/stroke/shadow all from the global surface tokens. */
-  .b-tile {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: 1.5rem;
-    border-radius: var(--radius);
-    background: var(--bg-surface);
-    color: var(--fg);
-    text-decoration: none;
-    overflow: hidden;
-    isolation: isolate;
-    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-  }
-
-  /* ── Variants ── */
-  .b-tiles__grid[data-variant='outline'] .b-tile {
-    border: var(--card-border);
-  }
-  .b-tiles__grid[data-variant='elevated'] .b-tile {
-    box-shadow: var(--shadow-md);
-    border: var(--card-border);
-  }
-  .b-tiles__grid[data-variant='filled'] .b-tile {
-    background: var(--gold-light);
-  }
-  .b-tiles__grid[data-variant='gradient'] .b-tile {
-    background: linear-gradient(135deg, var(--gold), var(--accent-2, var(--gold)));
-    color: var(--text-light);
-  }
-  .b-tiles__grid[data-variant='image'] .b-tile {
-    color: #fff;
-    min-height: 15rem;
-    justify-content: flex-end;
-    background: var(--bg-section);
-  }
-  .b-tiles__grid[data-variant='image'] .b-tile::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    background-image: linear-gradient(to top, rgba(10, 12, 20, 0.85), rgba(10, 12, 20, 0.15)), var(--tile-image);
-    background-size: cover;
-    background-position: center;
-  }
-
-  /* Hover: only tiles that link lift. */
-  a.b-tile:hover {
-    transform: translateY(-4px);
-  }
-  .b-tiles__grid[data-variant='elevated'] a.b-tile:hover {
-    box-shadow: var(--shadow-lg);
-  }
-  .b-tiles__grid[data-variant='outline'] a.b-tile:hover {
-    border-color: var(--gold);
-  }
-  a.b-tile:focus-visible {
-    outline: 2px solid var(--gold);
-    outline-offset: 2px;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .b-tile { transition: none; }
-    a.b-tile:hover { transform: none; }
-  }
-
-  .b-tile__icon {
-    display: inline-flex;
-    color: var(--gold);
-    margin-bottom: 0.25rem;
-  }
-  .b-tiles__grid[data-variant='gradient'] .b-tile__icon,
-  .b-tiles__grid[data-variant='image'] .b-tile__icon {
-    color: currentColor;
-  }
-  .b-tile__eyebrow {
-    font-size: 0.75rem;
-    font-weight: 700;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--gold);
-  }
-  .b-tiles__grid[data-variant='gradient'] .b-tile__eyebrow,
-  .b-tiles__grid[data-variant='image'] .b-tile__eyebrow {
-    color: currentColor;
-    opacity: 0.85;
-  }
-  .b-tile__title {
-    margin: 0;
-    font-size: 1.2rem;
-    color: inherit;
-  }
-  .b-tile__text {
-    margin: 0;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  .b-tiles__grid[data-variant='gradient'] .b-tile__text,
-  .b-tiles__grid[data-variant='image'] .b-tile__text,
-  .b-tiles__grid[data-variant='filled'] .b-tile__text {
-    color: inherit;
-    opacity: 0.92;
-  }
-  .b-tile__more {
-    margin-top: auto;
-    padding-top: 0.5rem;
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: var(--gold);
-  }
-  .b-tiles__grid[data-variant='gradient'] .b-tile__more,
-  .b-tiles__grid[data-variant='image'] .b-tile__more {
-    color: currentColor;
-  }
-
-  /* Spotlight — a soft glow that follows the pointer on hover (opt-in). The glow
-     sits above the surface but below the content, so text stays crisp. */
-  .b-tiles__grid[data-spotlight='true'] .b-tile > * { position: relative; z-index: 1; }
-  .b-tiles__grid[data-spotlight='true'] .b-tile::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    border-radius: inherit;
-    background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%);
-    opacity: 0;
-    transition: opacity 0.25s ease;
-    pointer-events: none;
-  }
-  .b-tiles__grid[data-spotlight='true'] .b-tile:hover::after { opacity: 1; }
-</style>
-
-<script>
-  // Spotlight: track the pointer over opt-in tiles and drive the glow position.
-  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-    document.querySelectorAll<HTMLElement>('.b-tiles__grid[data-spotlight="true"] .b-tile').forEach((tile) => {
-      tile.addEventListener('pointermove', (e) => {
-        const r = tile.getBoundingClientRect();
-        tile.style.setProperty('--mx', `${((e.clientX - r.left) / r.width) * 100}%`);
-        tile.style.setProperty('--my', `${((e.clientY - r.top) / r.height) * 100}%`);
-      });
-    });
-  }
-</script>
+---
+/**
+ * Tiles — a Level-2 recipe: a responsive grid of tiles in one of five looks,
+ * chosen with `variant`:
+ *   outline   — stroke only, no shadow (the "wireframe" look)
+ *   elevated  — soft shadow, lifts on hover
+ *   filled    — soft brand-tinted background
+ *   gradient  — brand → derived accent-2 gradient, light text
+ *   image     — full-bleed photo with a legibility scrim, light text
+ *
+ * Radius, stroke and elevation come from the GLOBAL surface tokens (--radius,
+ * --card-border, --shadow-*), so tiles stay consistent with every other card and
+ * a single knob restyles them all. A tile with `href` becomes one big link.
+ * Composes the Icon primitive.
+ */
+import Heading from '../blocks/Heading.astro';
+import Icon from '../Icon.astro';
+import { isIconKey } from '../../lib/icons';
+
+interface Tile {
+  icon?: string;
+  eyebrow?: string;
+  title?: string;
+  text?: string;
+  href?: string;
+  linkLabel?: string;
+  image?: { src: string; alt?: string };
+}
+interface Props {
+  title?: string;
+  intro?: string;
+  columns?: 2 | 3 | 4;
+  variant?: 'outline' | 'elevated' | 'filled' | 'gradient' | 'image';
+  spotlight?: boolean;
+  tiles?: Tile[];
+}
+const { title, intro, columns = 3, variant = 'elevated', spotlight = false, tiles = [] } = Astro.props;
+// Never reserve more columns than there are tiles; `data-single` centres a lone one.
+const cols = Math.min(columns, Math.max(tiles.length, 1)) as 1 | 2 | 3 | 4;
+---
+
+<section class="b-tiles">
+  {(title || intro) && (
+    <div class="b-tiles__head">
+      {title && <Heading text={title} level={2} align="center" />}
+      {intro && <p class="b-tiles__intro">{intro}</p>}
+    </div>
+  )}
+  <div class="b-tiles__grid" data-cols={cols} data-single={tiles.length === 1 ? 'true' : undefined} data-variant={variant} data-spotlight={spotlight ? 'true' : 'false'}>
+    {tiles.map((tile) => {
+      const Tag = tile.href ? 'a' : 'div';
+      // A picture tile: an image with no words, shown WHOLE as a real <img> (posters,
+      // wide logos, badges must never be cropped), its alt naming the tile / link.
+      const plain = variant === 'image' && !!tile.image && !tile.title && !tile.text && !tile.eyebrow;
+      const bg =
+        variant === 'image' && tile.image && !plain
+          ? `--tile-image: url('${tile.image.src}')`
+          : undefined;
+      return (
+        <Tag
+          class="b-tile"
+          href={tile.href}
+          style={bg}
+          data-plain={plain ? 'true' : undefined}
+        >
+          {plain && <img class="b-tile__picture" src={tile.image!.src} alt={tile.image!.alt ?? ''} loading="lazy" decoding="async" />}
+          {tile.icon && isIconKey(tile.icon) && (
+            <span class="b-tile__icon"><Icon name={tile.icon} size={26} /></span>
+          )}
+          {tile.eyebrow && <span class="b-tile__eyebrow">{tile.eyebrow}</span>}
+          {tile.title && <h3 class="b-tile__title">{tile.title}</h3>}
+          {tile.text && <p class="b-tile__text">{tile.text}</p>}
+          {tile.href && !plain && <span class="b-tile__more" aria-hidden="true">{tile.linkLabel ?? 'Learn more'} &rarr;</span>}
+        </Tag>
+      );
+    })}
+  </div>
+</section>
+
+<style>
+  .b-tiles {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-tiles__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-tiles__intro {
+    margin: 0;
+    color: var(--muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+  }
+  .b-tiles__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.25rem;
+  }
+  /* A solitary tile is a centred feature, not a full-width slab. */
+  .b-tiles__grid[data-single] { max-width: 26rem; margin-inline: auto; }
+  @media (min-width: 48em) {
+    .b-tiles__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
+    .b-tiles__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
+    .b-tiles__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (min-width: 64em) {
+    .b-tiles__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
+  }
+
+  /* Base tile — radius/stroke/shadow all from the global surface tokens. */
+  .b-tile {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1.5rem;
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+    color: var(--fg);
+    text-decoration: none;
+    overflow: hidden;
+    isolation: isolate;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  }
+
+  /* ── Variants ── */
+  .b-tiles__grid[data-variant='outline'] .b-tile {
+    border: var(--card-border);
+  }
+  .b-tiles__grid[data-variant='elevated'] .b-tile {
+    box-shadow: var(--shadow-md);
+    border: var(--card-border);
+  }
+  .b-tiles__grid[data-variant='filled'] .b-tile {
+    background: var(--gold-light);
+  }
+  .b-tiles__grid[data-variant='gradient'] .b-tile {
+    background: linear-gradient(135deg, var(--gold), var(--accent-2, var(--gold)));
+    color: var(--text-light);
+  }
+  .b-tiles__grid[data-variant='image'] .b-tile {
+    color: #fff;
+    min-height: 15rem;
+    justify-content: flex-end;
+    background: var(--bg-section);
+  }
+  .b-tiles__grid[data-variant='image'] .b-tile::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background-image: linear-gradient(to top, rgba(10, 12, 20, 0.85), rgba(10, 12, 20, 0.15)), var(--tile-image);
+    background-size: cover;
+    background-position: center;
+  }
+  /* A picture tile shows the whole image, whatever its shape: no scrim, no crop. */
+  .b-tiles__grid[data-variant='image'] .b-tile[data-plain] {
+    min-height: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0.75rem;
+    background: var(--bg-surface);
+    border: var(--card-border);
+  }
+  .b-tiles__grid[data-variant='image'] .b-tile[data-plain]::before {
+    content: none;
+  }
+  .b-tile__picture {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 18rem;
+    object-fit: contain;
+  }
+  a.b-tile[data-plain]:focus-visible {
+    outline: 3px solid var(--accent);
+    outline-offset: 3px;
+  }
+
+  /* Hover: only tiles that link lift. */
+  a.b-tile:hover {
+    transform: translateY(-4px);
+  }
+  .b-tiles__grid[data-variant='elevated'] a.b-tile:hover {
+    box-shadow: var(--shadow-lg);
+  }
+  .b-tiles__grid[data-variant='outline'] a.b-tile:hover {
+    border-color: var(--gold);
+  }
+  a.b-tile:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .b-tile { transition: none; }
+    a.b-tile:hover { transform: none; }
+  }
+
+  .b-tile__icon {
+    display: inline-flex;
+    color: var(--gold);
+    margin-bottom: 0.25rem;
+  }
+  .b-tiles__grid[data-variant='gradient'] .b-tile__icon,
+  .b-tiles__grid[data-variant='image'] .b-tile__icon {
+    color: currentColor;
+  }
+  .b-tile__eyebrow {
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--gold);
+  }
+  .b-tiles__grid[data-variant='gradient'] .b-tile__eyebrow,
+  .b-tiles__grid[data-variant='image'] .b-tile__eyebrow {
+    color: currentColor;
+    opacity: 0.85;
+  }
+  .b-tile__title {
+    margin: 0;
+    font-size: 1.2rem;
+    color: inherit;
+  }
+  .b-tile__text {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-tiles__grid[data-variant='gradient'] .b-tile__text,
+  .b-tiles__grid[data-variant='image'] .b-tile__text,
+  .b-tiles__grid[data-variant='filled'] .b-tile__text {
+    color: inherit;
+    opacity: 0.92;
+  }
+  .b-tile__more {
+    margin-top: auto;
+    padding-top: 0.5rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--gold);
+  }
+  .b-tiles__grid[data-variant='gradient'] .b-tile__more,
+  .b-tiles__grid[data-variant='image'] .b-tile__more {
+    color: currentColor;
+  }
+
+  /* Spotlight — a soft glow that follows the pointer on hover (opt-in). The glow
+     sits above the surface but below the content, so text stays crisp. */
+  .b-tiles__grid[data-spotlight='true'] .b-tile > * { position: relative; z-index: 1; }
+  .b-tiles__grid[data-spotlight='true'] .b-tile::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: inherit;
+    background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%);
+    opacity: 0;
+    transition: opacity 0.25s ease;
+    pointer-events: none;
+  }
+  .b-tiles__grid[data-spotlight='true'] .b-tile:hover::after { opacity: 1; }
+</style>
+
+<script>
+  // Spotlight: track the pointer over opt-in tiles and drive the glow position.
+  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    document.querySelectorAll<HTMLElement>('.b-tiles__grid[data-spotlight="true"] .b-tile').forEach((tile) => {
+      tile.addEventListener('pointermove', (e) => {
+        const r = tile.getBoundingClientRect();
+        tile.style.setProperty('--mx', `${((e.clientX - r.left) / r.width) * 100}%`);
+        tile.style.setProperty('--my', `${((e.clientY - r.top) / r.height) * 100}%`);
+      });
+    });
+  }
+</script>