srcdev-nuxt-components 9.6.0 → 9.6.2

package/app/components/02.molecules/profile-section/CONSUMER-STYLING.md

@@ -2,35 +2,89 @@
 
 ## Public token API
 
+### Grid and picture
+
 | Token | Default | Controls |
 |---|---|---|
-| `--profile-section-gap` | `2rem` | Gap between picture and info, single column (below 768px) |
-| `--profile-section-gap-wide` | `4rem` | Gap between picture and info columns (768px+) |
-| `--profile-section-picture-width` | `384px` | Picture column width (768px+) |
+| `--profile-section-gap` | `2rem` | Gap between picture and info, single column (component under 768px wide) |
+| `--profile-section-gap-wide` | `4rem` | Gap between picture and info columns (component 768px wide or more) |
+| `--profile-section-picture-width` | `38.4rem` | Maximum picture column width in the two-column layout. The column can shrink below it |
 | `--profile-section-picture-aspect-ratio` | `3 / 4` | Picture frame aspect ratio |
-| `--profile-section-picture-border-radius` | `8px` | Picture frame corner rounding |
+| `--profile-section-picture-border-radius` | `0.8rem` | Picture frame corner rounding |
 | `--profile-section-info-block-gap` | `1.5rem` | Space after each `profile-info-N` block |
 | `--profile-section-links-gap` | `1rem` | Gap between items in the `profileLinks` slot |
+| `--profile-section-info-text-colour` | `inherit` | Text colour of the info column (blocks and links) |
+
+### Info block highlights
+
+| Token | Default | Controls |
+|---|---|---|
+| `--profile-section-highlight-colour` | `var(--colour-text-accent)` | `.highlight` inside a `.location` element |
+| `--profile-section-link-colour` | `var(--colour-link-default)` | `.highlight` inside a `.services` element |
+| `--profile-section-link-colour-hover` | `var(--colour-link-hover)` | The same, on hover |
+| `--profile-section-highlight-font-weight` | `600` | Weight of both highlight kinds (also sets the `wght` variation axis) |
+
+The defaults read the global `--colour-*` tokens, so setting those on an ancestor still works.
 
-Highlight colours inside info blocks read the global `--colour-text-accent`,
-`--colour-link-default` and `--colour-link-hover` (see **State hooks**).
+### Header in picture
 
+These only apply when `header-placement` is `picture-bottom` or `picture-top`. The scrim fades
+upward from the bottom edge for `picture-bottom` and downward from the top edge for `picture-top`.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--profile-section-picture-header-scrim-colour` | `#000` | Colour the scrim starts from at the frame's edge |
+| `--profile-section-picture-header-scrim-opacity` | `75%` | Opacity of the scrim colour at its start |
+| `--profile-section-picture-header-scrim-solid-stop` | `0%` | How far into the header the scrim stays at full strength before it starts to fade (e.g. `55%` keeps it solid behind the text) |
+| `--profile-section-picture-header-scrim-target-colour` | `transparent` | Colour the scrim fades into at the header's inner edge. Set it to roughly the photo's colour there (often translucent) so the fade blends into the image instead of leaving a grey band or a visible edge |
+| `--profile-section-picture-header-scrim` | gradient from the scrim colour | The whole scrim `background`; set `none` to remove it |
+| `--profile-section-picture-header-text-colour` | `contrast-color(<scrim colour>)`, `#fff` without support | Eyebrow and heading text colour |
+| `--profile-section-picture-header-eyebrow-colour` | `inherit` | Eyebrow colour only |
+| `--profile-section-picture-header-padding` | `2.4rem` | Padding around the header inside the picture |
+| `--profile-section-picture-header-gap` | `0.4rem` | Gap between eyebrow and heading |
+
+Matching the photo is a judgement call per image: pick the target colour from the part of the photo
+the fade ends on, and add end padding (`--profile-section-picture-header-padding`, e.g.
+`3.2rem 3.2rem 6.4rem` for `picture-top`) so the fade sits past the text. The header only rounds the
+corners on the frame's edge, so an opaque target colour doesn't show rounded inner corners.
+Browsers without `color-mix()` (before Safari 16.2) start the scrim from 75% black whatever the scrim
+colour and opacity; the solid stop and target colour still apply.
+
+`contrast-color()` only reads the scrim colour, not the photo. If you remove the scrim, set
+`--profile-section-picture-header-text-colour` yourself to suit the image. The eyebrow's own
+`--eyebrow-text-bg-img` is set to `none` inside the picture.
+
+> Changed 2026-10-14: new `header-placement` prop and its tokens, and `--profile-section-info-text-colour`. The scrim
+> gained opacity, solid-stop and target-colour tokens. The image is now absolutely positioned
+> inside the frame (no visual change), so a header in the frame can grow it past its aspect ratio.
+>
+> Changed 2026-10-14: the highlight colours read the global `--colour-*` tokens directly; they now
+> go through the `--profile-section-*` tokens above, with the same defaults. `384px` and `8px`
+> became the same values in rem.
+>
 > Changed 2026-09-27: all of these were hardcoded values; they're now tokens with the same
 > defaults.
 
-No private `--_` tokens.
+Private tokens (not public API): `--_scrim-colour`, the resolved scrim colour used by the gradient
+and `contrast-color()`, `--_scrim-direction` (`to top` or `to bottom`, set by the placement), and
+`--_scrim-start-colour`, `--_scrim-solid-stop` and `--_scrim-target-colour`, which compose the
+gradient from the tokens above.
 
 ---
 
 ## State hooks
 
-Inner classes: `.profile-section-header`, `.profile-section-inner` (the grid),
-`.profile-section-picture` (frame), `.profile-section-image` (the `NuxtImg`),
-`.profile-section-info`, `.profile-section-info-content`, `.profile-section-info-block` (one per
-`profile-info-N` slot), `.profile-section-links`.
+Inner classes: `.profile-section-header` (only rendered when the `eyebrowText` or `heroText` slot
+is given; it moves inside `.profile-section-picture`, before the image, when `header-placement` is
+`picture-bottom` or `picture-top`), `.profile-section-inner` (the grid), `.profile-section-picture` (frame),
+`.profile-section-image` (the `NuxtImg`), `.profile-section-info`,
+`.profile-section-info-content`, `.profile-section-info-block` (one per `profile-info-N` slot
+given), `.profile-section-links`.
 
-Content hooks inside info blocks: an element with class `location` or `services` containing a
-`.highlight` gets a bold accent (`location`) or link (`services`) colour.
+`data-header-placement` on the root: `above`, `picture-bottom` or `picture-top`.
+
+Content hooks inside info blocks: a `.highlight` inside an element with class `location` or
+`services` gets the highlight or link colour above.
 
 > Changed 2026-09-27: renamed from `.picture`, `.profile-picture`, `.profile-info`,
 > `.profile-info-content`, `.profile-info-block` and `.profile-links`. `.picture` in particular
@@ -38,6 +92,35 @@ Content hooks inside info blocks: an element with class `location` or `services`
 
 ---
 
+## Layout
+
+The root is a size container named `profile-section` (`container: profile-section / inline-size`).
+The grid switches to two columns when **the component itself** is 768px wide or more, not the
+viewport, so it stays stacked in a narrow column or sidebar. Because it's an inline-size container,
+its width can't come from its content: in a flex row or other shrink-to-fit context, give it a
+width (`flex: 1`, `width: 100%`) or it collapses.
+
+Both grid columns are `minmax(0, …)`, so long unbroken text wraps (the root sets
+`overflow-wrap: anywhere`) instead of widening the grid. Profile links wrap onto more lines.
+
+To target the two-column layout in your own CSS, query the same container:
+
+```css
+.my-page .profile-section-inner {
+  @container profile-section (min-width: 768px) {
+    align-items: center;
+  }
+}
+```
+
+> Changed 2026-10-14: the breakpoint was a viewport `@media (min-width: 768px)` query. A
+> `@media (min-width: 768px)` override of `.profile-section-inner`'s `grid-template-columns` now
+> applies at a different point from the component's own switch. Remove it and set
+> `--profile-section-picture-width` instead (`minmax(0, 320px) 1fr` is
+> `--profile-section-picture-width: 32rem`, since the column is now `minmax(0, …)` by default).
+
+---
+
 ## Local overrides
 
 Set the tokens above on an element you own (a page or section class, or a class added with
@@ -51,3 +134,10 @@ Set the tokens above on an element you own (a page or section class, or a class
 ## Class passthrough
 
 `style-class-passthrough` adds classes to the root element. Reactive after mount.
+
+---
+
+## Notes
+
+There are no line-clamp tokens. All text comes through slots, so it is your own markup: clamp it
+there, for example with `-webkit-line-clamp` on your own paragraph class.

package/app/components/02.molecules/profile-section/ProfileSection.vue

@@ -1,17 +1,27 @@
 <template>
-  <component :is="tag" class="profile-section" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
-    <header class="profile-section-header">
+  <component
+    :is="tag"
+    class="profile-section"
+    :class="[elementClasses]"
+    :aria-labelledby="ariaLabelledby"
+    :data-header-placement="headerPlacement"
+  >
+    <header v-if="hasHeader() && !headerInPicture" class="profile-section-header">
       <slot v-if="hasEyebrowTextSlot()" name="eyebrowText"></slot>
       <slot v-if="hasHeroTextSlot()" name="heroText" :heading-id="headingId"></slot>
     </header>
 
     <div class="profile-section-inner">
       <div class="profile-section-picture">
+        <header v-if="hasHeader() && headerInPicture" class="profile-section-header">
+          <slot v-if="hasEyebrowTextSlot()" name="eyebrowText"></slot>
+          <slot v-if="hasHeroTextSlot()" name="heroText" :heading-id="headingId"></slot>
+        </header>
         <NuxtImg
           :src="profilePicture.src"
           :alt="profilePicture.alt"
-          :width="profilePicture.width ?? 828"
-          :height="profilePicture.height ?? 1104"
+          :width="imageWidth"
+          :height="imageHeight"
           class="profile-section-image"
         />
       </div>
@@ -36,12 +46,12 @@ import type { ProfilePicture } from "~/types/components";
 interface Props {
   tag?: "div" | "section" | "article" | "main";
   profilePicture: ProfilePicture;
-  profileInfoCount?: number;
+  headerPlacement?: "above" | "picture-bottom" | "picture-top";
   styleClassPassthrough?: string | string[];
 }
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
-  profileInfoCount: 3,
+  headerPlacement: "above",
   styleClassPassthrough: () => [],
 });
 
@@ -50,16 +60,21 @@ const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
 const slots = useSlots();
 const hasEyebrowTextSlot = () => Boolean(slots.eyebrowText);
 const hasHeroTextSlot = () => Boolean(slots.heroText);
+const hasHeader = () => hasEyebrowTextSlot() || hasHeroTextSlot();
 const hasProfileLinksSlot = () => Boolean(slots.profileLinks);
 
-const profileInfoSlots = () => {
-  const provided = Object.keys(slots)
+const headerInPicture = computed(() => props.headerPlacement !== "above");
+
+const profileInfoSlots = () =>
+  Object.keys(slots)
     .filter((key) => /^profile-info-\d+$/.test(key))
     .sort((a, b) => parseInt(a.split("-")[2] ?? "0") - parseInt(b.split("-")[2] ?? "0"));
-  return provided.length > 0
-    ? provided
-    : Array.from({ length: props.profileInfoCount }, (_, i) => `profile-info-${i + 1}`);
-};
+
+const positiveOr = (value: number | undefined, fallback: number) =>
+  typeof value === "number" && Number.isFinite(value) && value > 0 ? Math.round(value) : fallback;
+
+const imageWidth = computed(() => positiveOr(props.profilePicture.width, 828));
+const imageHeight = computed(() => positiveOr(props.profilePicture.height, 1104));
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
@@ -74,57 +89,142 @@ watch(
 <style lang="css">
 @layer components {
   .profile-section {
+    container: profile-section / inline-size;
+    overflow-wrap: anywhere;
+
     .profile-section-inner {
       display: grid;
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
       gap: var(--profile-section-gap, 2rem);
 
-      @media (min-width: 768px) {
-        grid-template-columns: var(--profile-section-picture-width, 384px) 1fr;
+      @container profile-section (min-width: 768px) {
+        grid-template-columns: minmax(0, var(--profile-section-picture-width, 38.4rem)) minmax(0, 1fr);
         align-items: start;
         gap: var(--profile-section-gap-wide, 4rem);
       }
 
       .profile-section-picture {
+        position: relative;
         aspect-ratio: var(--profile-section-picture-aspect-ratio, 3 / 4);
-        border-radius: var(--profile-section-picture-border-radius, 8px);
+        border-radius: var(--profile-section-picture-border-radius, 0.8rem);
         overflow: hidden;
 
         .profile-section-image {
+          position: absolute;
+          inset: 0;
           object-fit: cover;
           width: 100%;
           height: 100%;
+          border-radius: inherit;
         }
       }
 
+      .profile-section-info {
+        color: var(--profile-section-info-text-colour, inherit);
+      }
+
       .profile-section-info-block {
         margin-block-end: var(--profile-section-info-block-gap, 1.5rem);
 
+        .location .highlight,
+        .services .highlight {
+          font-weight: var(--profile-section-highlight-font-weight, 600);
+          font-variation-settings: "wght" var(--profile-section-highlight-font-weight, 600);
+        }
+
         .location .highlight {
-          color: var(--colour-text-accent);
-          font-weight: 600;
-          font-variation-settings: "wght" 600;
+          color: var(--profile-section-highlight-colour, var(--colour-text-accent));
         }
 
         .services .highlight {
-          color: var(--colour-link-default);
-          font-weight: 600;
-          font-variation-settings: "wght" 600;
+          color: var(--profile-section-link-colour, var(--colour-link-default));
 
           &:hover {
-            color: var(--colour-link-hover);
+            color: var(--profile-section-link-colour-hover, var(--colour-link-hover));
           }
         }
       }
 
       .profile-section-links {
         display: flex;
+        flex-wrap: wrap;
         flex-grow: 1;
         gap: var(--profile-section-links-gap, 1rem);
         align-items: end;
         justify-content: flex-end;
       }
     }
+
+    &:is([data-header-placement="picture-bottom"], [data-header-placement="picture-top"]) .profile-section-picture {
+      /* Visible overflow keeps aspect-ratio a minimum, so a long header grows the frame instead of being clipped. */
+      --_scrim-colour: var(--profile-section-picture-header-scrim-colour, #000);
+      --_scrim-direction: to top;
+      --_scrim-start-colour: color-mix(
+        in oklab,
+        var(--_scrim-colour) var(--profile-section-picture-header-scrim-opacity, 75%),
+        transparent
+      );
+      --_scrim-solid-stop: var(--profile-section-picture-header-scrim-solid-stop, 0%);
+      --_scrim-target-colour: var(--profile-section-picture-header-scrim-target-colour, transparent);
+
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      overflow: visible;
+
+      .profile-section-header {
+        position: relative;
+        z-index: 1;
+        display: grid;
+        gap: var(--profile-section-picture-header-gap, 0.4rem);
+        padding: var(--profile-section-picture-header-padding, 2.4rem);
+        border-end-start-radius: inherit;
+        border-end-end-radius: inherit;
+        color: var(--profile-section-picture-header-text-colour, #fff);
+        background: var(
+          --profile-section-picture-header-scrim,
+          linear-gradient(
+            var(--_scrim-direction),
+            rgb(0 0 0 / 0.75),
+            rgb(0 0 0 / 0.75) var(--_scrim-solid-stop),
+            var(--_scrim-target-colour)
+          )
+        );
+
+        @supports (color: color-mix(in oklab, red, transparent)) {
+          background: var(
+            --profile-section-picture-header-scrim,
+            linear-gradient(
+              var(--_scrim-direction),
+              var(--_scrim-start-colour),
+              var(--_scrim-start-colour) var(--_scrim-solid-stop),
+              var(--_scrim-target-colour)
+            )
+          );
+        }
+
+        @supports (color: contrast-color(red)) {
+          color: var(--profile-section-picture-header-text-colour, contrast-color(var(--_scrim-colour)));
+        }
+
+        .eyebrow-text {
+          --eyebrow-text-bg-img: none;
+          color: var(--profile-section-picture-header-eyebrow-colour, inherit);
+        }
+      }
+    }
+
+    &[data-header-placement="picture-top"] .profile-section-picture {
+      --_scrim-direction: to bottom;
+
+      justify-content: flex-start;
+
+      .profile-section-header {
+        border-radius: 0;
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+      }
+    }
   }
 }
 </style>