srcdev-nuxt-components 9.5.3 → 9.5.5

package/app/components/02.molecules/select-menu/stories/SelectMenu.stories.ts

@@ -14,6 +14,7 @@ interface StoryArgs {
   showChevron?: boolean;
   multiple?: boolean;
   showSelectionInTrigger?: boolean;
+  inputVariant?: "normal" | "underlined";
   modelValue?: string | number | (string | number)[];
   styleClassPassthrough?: string | string[];
 }
@@ -57,6 +58,12 @@ const meta: Meta<StoryArgs> = {
       description: "In multiple mode, update the trigger text to a comma-separated list of the currently checked options instead of leaving it fixed on placeholder/label. No effect outside multiple mode.",
       table: { category: "Content" },
     },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "underlined"],
+      description: "Trigger border style, matching InputSelect: bordered box or bottom border only.",
+      table: { category: "Styling" },
+    },
     styleClassPassthrough: {
       table: { disable: true },
     },
@@ -66,6 +73,7 @@ const meta: Meta<StoryArgs> = {
     showIcon: true,
     showLabel: true,
     showChevron: true,
+    inputVariant: "normal",
   },
   parameters: {
     docs: {
@@ -357,3 +365,30 @@ export const CustomTokens: Story = {
     `,
   }),
 };
+
+/**
+ * Underlined — bottom border only, matching InputSelect's `underlined` variant
+ * so a SelectMenu can sit next to underlined form fields.
+ */
+export const Underlined: Story = {
+  args: {
+    label: "Choose a service",
+    showIcon: false,
+    inputVariant: "underlined",
+  },
+  render: (args) => ({
+    components: { SelectMenu },
+    setup() {
+      const value = ref<string | undefined>(undefined);
+      return { args, value, serviceOptions };
+    },
+    template: `
+      <div style="padding: 4rem 8rem;">
+        <SelectMenu v-bind="args" v-model="value" :options="serviceOptions" />
+        <p style="margin: 1.6rem 0 0; font-size: 1.3rem; opacity: 0.6;">
+          modelValue: <strong>{{ value === undefined ? 'undefined' : value }}</strong>
+        </p>
+      </div>
+    `,
+  }),
+};

package/app/components/02.molecules/select-menu/tests/SelectMenu.spec.ts

@@ -89,6 +89,15 @@ describe("SelectMenu", () => {
       expect(wrapper.find(".select-menu-trigger").attributes("aria-haspopup")).toBe("listbox");
     });
 
+    it("applies the normal variant class by default and underlined when set", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".select-menu").classes()).toContain("normal");
+
+      await wrapper.setProps({ inputVariant: "underlined" });
+      expect(wrapper.find(".select-menu").classes()).toContain("underlined");
+      expect(wrapper.find(".select-menu").classes()).not.toContain("normal");
+    });
+
     it("uses label prop as aria-label", async () => {
       wrapper = await createWrapper({ label: "Filter by service" });
       expect(wrapper.find(".select-menu-trigger").attributes("aria-label")).toBe("Filter by service");

package/app/components/02.molecules/select-menu/tests/__snapshots__/SelectMenu.spec.ts.snap

@@ -1,41 +1,41 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SelectMenu > Snapshots > default 1`] = `
-"<div class="select-menu" style="--_anchor-name: --select-menu-anchor-v-0-0;"><button popovertarget="select-menu-v-0-0" popovertargetaction="toggle" type="button" class="select-menu-trigger" aria-label="Language" aria-haspopup="listbox" aria-expanded="false">
+"<div class="select-menu normal" style="--_anchor-name: --select-menu-anchor-v-0-0;"><button popovertarget="select-menu-v-0-0" popovertargetaction="toggle" type="button" class="select-menu-trigger" aria-label="Language" aria-haspopup="listbox" aria-expanded="false">
     <!--v-if--><span class="select-menu-trigger-label">Language</span><span class="iconify i-lucide:chevron-down select-menu-trigger-chevron" aria-hidden="true"></span>
   </button>
   <div id="select-menu-v-0-0" popover="" class="select-menu-popover">
     <ul class="select-menu-list" role="listbox" aria-label="Language">
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="English"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="Français"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="Deutsch"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
     </ul>
   </div>
 </div>"
 `;
 
 exports[`SelectMenu > Snapshots > icon-only trigger 1`] = `
-"<div class="select-menu" style="--_anchor-name: --select-menu-anchor-v-0-0;"><button popovertarget="select-menu-v-0-0" popovertargetaction="toggle" type="button" class="select-menu-trigger" aria-label="Language" aria-haspopup="listbox" aria-expanded="false"><span class="iconify i-flag:gb-4x3 select-menu-trigger-icon" aria-hidden="true"></span>
+"<div class="select-menu normal" style="--_anchor-name: --select-menu-anchor-v-0-0;"><button popovertarget="select-menu-v-0-0" popovertargetaction="toggle" type="button" class="select-menu-trigger" aria-label="Language" aria-haspopup="listbox" aria-expanded="false"><span class="iconify i-flag:gb-4x3 select-menu-trigger-icon" aria-hidden="true"></span>
     <!--v-if-->
     <!--v-if-->
   </button>
   <div id="select-menu-v-0-0" popover="" class="select-menu-popover">
     <ul class="select-menu-list" role="listbox" aria-label="Language">
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="true"><span class="select-menu-item-check" aria-hidden="true"><span class="iconify i-lucide:check select-menu-item-check-icon" aria-hidden="true"></span></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="true" data-label="English"><span class="select-menu-item-check" aria-hidden="true"><span class="iconify i-lucide:check select-menu-item-check-icon" aria-hidden="true"></span></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="Français"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="Deutsch"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
     </ul>
   </div>
 </div>"
 `;
 
 exports[`SelectMenu > Snapshots > with a selected value 1`] = `
-"<div class="select-menu" style="--_anchor-name: --select-menu-anchor-v-0-0;"><button popovertarget="select-menu-v-0-0" popovertargetaction="toggle" type="button" class="select-menu-trigger" aria-label="Language" aria-haspopup="listbox" aria-expanded="false"><span class="iconify i-flag:fr-4x3 select-menu-trigger-icon" aria-hidden="true"></span><span class="select-menu-trigger-label">Français</span><span class="iconify i-lucide:chevron-down select-menu-trigger-chevron" aria-hidden="true"></span></button>
+"<div class="select-menu normal" style="--_anchor-name: --select-menu-anchor-v-0-0;"><button popovertarget="select-menu-v-0-0" popovertargetaction="toggle" type="button" class="select-menu-trigger" aria-label="Language" aria-haspopup="listbox" aria-expanded="false"><span class="iconify i-flag:fr-4x3 select-menu-trigger-icon" aria-hidden="true"></span><span class="select-menu-trigger-label">Français</span><span class="iconify i-lucide:chevron-down select-menu-trigger-chevron" aria-hidden="true"></span></button>
   <div id="select-menu-v-0-0" popover="" class="select-menu-popover">
     <ul class="select-menu-list" role="listbox" aria-label="Language">
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="true"><span class="select-menu-item-check" aria-hidden="true"><span class="iconify i-lucide:check select-menu-item-check-icon" aria-hidden="true"></span></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="English"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="true" data-label="Français"><span class="select-menu-item-check" aria-hidden="true"><span class="iconify i-lucide:check select-menu-item-check-icon" aria-hidden="true"></span></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="Deutsch"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
     </ul>
   </div>
 </div>"

package/app/components/03.organisms/google-reviews/CONSUMER-STYLING.md

@@ -0,0 +1,110 @@
+# GoogleReviews — Consumer Styling Guide
+
+`GoogleReviews` shows a place's Google reviews as a single horizontally scrolling row of
+`GoogleReviewCard`s, with a summary above and prev/next buttons plus the Google Maps attribution
+below. Both components read the same `--google-reviews-*` tokens, so setting them on an ancestor
+styles a standalone `GoogleReviewCard` too.
+
+## Public token API
+
+### Row (`GoogleReviews`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--google-reviews-gap` | `1.6rem` | Space between header, row and footer, and between cards |
+| `--google-reviews-card-width` | `min(32rem, 85%)` | Width of each card in the row |
+| `--google-reviews-scroll-padding` | `0` | Snap inset, e.g. to line cards up with a page gutter |
+| `--google-reviews-scrollbar-width` | `thin` | Row scrollbar: `auto`, `thin` or `none` (`none` hides it; the buttons and touch/keyboard scrolling still work) |
+| `--google-reviews-scrollbar-thumb-colour` | `var(--slate-04)` | Scrollbar thumb |
+| `--google-reviews-scrollbar-track-colour` | `transparent` | Scrollbar track |
+| `--google-reviews-summary-rating-font-size` | `2.4rem` | Overall rating number |
+| `--google-reviews-focus-outline-width` | `2px` | Focus ring on the scrollable row |
+| `--google-reviews-focus-outline-colour` | `var(--theme-border-focus)` | Focus ring colour |
+
+### Card (`GoogleReviewCard`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--google-reviews-card-gap` | `1.2rem` | Space between author, stars, text and link |
+| `--google-reviews-card-padding` | `2rem` | Card padding |
+| `--google-reviews-card-border-width` | `1px` | Card border width |
+| `--google-reviews-card-border-colour` | `transparent` | Card border colour |
+| `--google-reviews-card-border-radius` | `0.8rem` | Card corner radius |
+| `--google-reviews-card-surface` | `var(--theme-surface-subtle)` | Card background |
+| `--google-reviews-card-text-colour` | `var(--theme-text)` | Card text colour |
+| `--google-reviews-avatar-surface` | `var(--theme-surface)` | Initials avatar background (shown when a reviewer has no photo) |
+| `--google-reviews-avatar-text-colour` | `var(--theme-on-surface)` | Initials colour |
+| `--google-reviews-author-font-weight` | `600` | Reviewer name weight |
+| `--google-reviews-author-line-clamp` | `2` | Lines of reviewer name before it's cut off with an ellipsis (`1` for single-line ellipsis, `none` to show it all) |
+| `--google-reviews-text-line-height` | `1.5` | Review text line height |
+| `--google-reviews-text-line-clamp` | `5` | Lines of review text before it's cut off with an ellipsis (`none` to show it all) |
+| `--google-reviews-link-colour` | `inherit` | "Read on Google" link colour |
+
+### Shared
+
+| Token | Default | Controls |
+|---|---|---|
+| `--google-reviews-star-size` | `1.6rem` | Star font size (summary and cards) |
+| `--google-reviews-star-colour` | `var(--amber-05)` | Filled star colour |
+| `--google-reviews-star-empty-colour` | `var(--slate-03)` | Unfilled star colour |
+| `--google-reviews-meta-font-size` | `1.4rem` | Date, link, filter notice and attribution |
+| `--google-reviews-meta-text-colour` | `inherit` | Colour of the same |
+
+Private tokens (not public API): `--_rating` (set inline from the review's rating) and `--_fill`
+(the star fill percentage derived from it).
+
+## State hooks
+
+- No `data-*` state. The prev/next buttons are `InputButton`s with `readonly`/`aria-disabled` at
+  either end of the row, styled by `InputButton`'s own tokens.
+- Inner classes: `.google-reviews-header`, `.google-reviews-summary`,
+  `.google-reviews-summary-rating`, `.google-reviews-stars`, `.google-reviews-summary-link`,
+  `.google-reviews-filter-notice`, `.google-reviews-list`, `.google-reviews-item`,
+  `.google-reviews-footer`, `.google-reviews-controls`, `.google-reviews-prev`,
+  `.google-reviews-next`, `.google-reviews-attribution`.
+- Card classes: `.google-review-card`, `.google-review-card-author`,
+  `.google-review-card-author-name`,
+  `.google-review-card-time`, `.google-review-card-rating`, `.google-review-card-stars`,
+  `.google-review-card-text`, `.google-review-card-link`.
+
+## Row alignment
+
+Inside `GoogleReviews`, every card spans the list's five shared rows (name, date, rating, text,
+link) through `grid-template-rows: subgrid`, so each section lines up across the whole row
+however tall its neighbours are: a one-line name's date sits level with a two-line name's. The
+author block is itself a subgrid over the name and date rows, with the avatar spanning both.
+Sections sit in fixed rows, so a card with no date, text or link leaves the gap rather than
+shifting up. Spacing between sections is a top margin (`--google-reviews-card-gap`), not a grid
+gap, so the name and date stay close together. A standalone `GoogleReviewCard` uses
+`auto auto auto 1fr auto` instead (link pinned to the bottom). Content from the `card` slot
+spans all five rows as one block. Browsers
+without subgrid fall back to equal-height cards that aren't aligned section by section.
+
+## Stars
+
+Stars are the text `★★★★★` filled with a hard-stop gradient clipped to the text, so fractional
+ratings (4.6) show a partly filled star. They're `aria-hidden`; the rating is read out from
+visually hidden text (`ratingLabel`).
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat:** the card re-declares `--display-avatar-background` and `--display-avatar-text-colour` on its
+avatar, so setting those `DisplayAvatar` tokens on an ancestor has no effect here. Use
+`--google-reviews-avatar-surface` and `--google-reviews-avatar-text-colour` instead.
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root (`.google-reviews` or `.google-review-card`).
+`GoogleReviews` doesn't forward it to the cards it renders; set tokens on the root instead, or
+use the `card` slot to render `GoogleReviewCard` yourself with its own passthrough.
+
+## Notes
+
+Google's terms require the attribution text to stay visible and readable. Restyle it, but don't
+hide it, and keep the words "Google Maps" in `attributionText` when translating.

package/app/components/03.organisms/google-reviews/GoogleReviewCard.vue

@@ -0,0 +1,161 @@
+<template>
+  <component :is="tag" class="google-review-card" :class="elementClasses">
+    <div class="google-review-card-author">
+      <DisplayAvatar :src="review.authorPhotoUri" :text="initials" size="md" aria-hidden="true" />
+      <a v-if="review.authorUri" :id="authorId" :href="review.authorUri" class="google-review-card-author-name">
+        {{ review.authorName }}
+      </a>
+      <span v-else :id="authorId" class="google-review-card-author-name">{{ review.authorName }}</span>
+      <time v-if="review.relativeTime" :datetime="review.publishTime || undefined" class="google-review-card-time">
+        {{ review.relativeTime }}
+      </time>
+    </div>
+
+    <div class="google-review-card-rating">
+      <span class="google-review-card-stars" :style="{ '--_rating': review.rating }" aria-hidden="true">★★★★★</span>
+      <span class="sr-only">{{ formattedRatingLabel }}</span>
+    </div>
+
+    <p v-if="review.text" class="google-review-card-text">{{ review.text }}</p>
+
+    <a v-if="review.reviewUri" :href="review.reviewUri" :aria-describedby="authorId" class="google-review-card-link">
+      {{ readMoreLabel }}
+    </a>
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { GoogleReview } from "~/types/components";
+
+interface Props {
+  review: GoogleReview;
+  tag?: "article" | "div";
+  ratingLabel?: string;
+  readMoreLabel?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "article",
+  ratingLabel: "Rated {rating} out of 5",
+  readMoreLabel: "Read on Google",
+  styleClassPassthrough: () => [],
+});
+
+const authorId = useId();
+const initials = computed(() =>
+  props.review.authorName
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => Array.from(word)[0]!.toUpperCase())
+    .join("")
+);
+const formattedRatingLabel = computed(() => props.ratingLabel.replace("{rating}", String(props.review.rating)));
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .google-review-card {
+    display: grid;
+    grid-template-rows: auto auto auto 1fr auto;
+    align-items: start;
+    block-size: 100%;
+    padding: var(--google-reviews-card-padding, 2rem);
+    border: var(--google-reviews-card-border-width, 1px) solid var(--google-reviews-card-border-colour, transparent);
+    border-radius: var(--google-reviews-card-border-radius, 0.8rem);
+    background-color: var(--google-reviews-card-surface, var(--theme-surface-subtle));
+    color: var(--google-reviews-card-text-colour, var(--theme-text));
+
+    /* Name and date take a row each so both line up across a GoogleReviews row */
+    .google-review-card-author {
+      grid-row: 1 / span 2;
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      grid-template-rows: subgrid;
+      align-items: start;
+      column-gap: 1.2rem;
+    }
+
+    .google-review-card-author .display-avatar {
+      --display-avatar-background: var(--google-reviews-avatar-surface, var(--theme-surface));
+      --display-avatar-text-colour: var(--google-reviews-avatar-text-colour, var(--theme-on-surface));
+
+      grid-column: 1;
+      grid-row: 1 / -1;
+    }
+
+    .google-review-card-author-name {
+      grid-column: 2;
+      grid-row: 1;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      -webkit-line-clamp: var(--google-reviews-author-line-clamp, 2);
+      line-clamp: var(--google-reviews-author-line-clamp, 2);
+      font-weight: var(--google-reviews-author-font-weight, 600);
+      color: inherit;
+      overflow-wrap: anywhere;
+    }
+
+    .google-review-card-time {
+      grid-column: 2;
+      grid-row: 2;
+      font-size: var(--google-reviews-meta-font-size, 1.4rem);
+      color: var(--google-reviews-meta-text-colour, inherit);
+    }
+
+    .google-review-card-rating {
+      grid-row: 3;
+      margin-block-start: var(--google-reviews-card-gap, 1.2rem);
+    }
+
+    .google-review-card-stars {
+      --_fill: clamp(0%, var(--_rating, 0) / 5 * 100%, 100%);
+
+      font-size: var(--google-reviews-star-size, 1.6rem);
+      letter-spacing: 0.1em;
+      background: linear-gradient(
+        90deg,
+        var(--google-reviews-star-colour, var(--amber-05)) var(--_fill),
+        var(--google-reviews-star-empty-colour, var(--slate-03)) var(--_fill)
+      );
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+
+    .google-review-card-text {
+      grid-row: 4;
+      margin-block-start: var(--google-reviews-card-gap, 1.2rem);
+      margin-inline: 0;
+      margin-block-end: 0;
+      white-space: pre-line;
+      overflow-wrap: anywhere;
+      line-height: var(--google-reviews-text-line-height, 1.5);
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      -webkit-line-clamp: var(--google-reviews-text-line-clamp, 5);
+      line-clamp: var(--google-reviews-text-line-clamp, 5);
+    }
+
+    .google-review-card-link {
+      grid-row: 5;
+      margin-block-start: var(--google-reviews-card-gap, 1.2rem);
+      justify-self: start;
+      color: var(--google-reviews-link-colour, inherit);
+      font-size: var(--google-reviews-meta-font-size, 1.4rem);
+    }
+  }
+}
+</style>