srcdev-nuxt-components 9.4.6 → 9.4.8

package/.vscode/srcdev-component-input-text.code-snippets

@@ -0,0 +1,107 @@
+{
+  "SRCDEV InputTextCore Basic": {
+    "description": "Basic InputTextCore native input (no label/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  type=\"$4text\"",
+      "  placeholder=\"$5Enter value...\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextCore Date with min/max": {
+    "description": "InputTextCore date input constrained to a min/max range (e.g. no dates in the past)",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextCore",
+      "  id=\"$1appointment-date\"",
+      "  name=\"$2appointmentDate\"",
+      "  v-model=\"$3appointmentDate\"",
+      "  type=\"date\"",
+      "  :min=\"new Date().toISOString().split('T')[0]\"",
+      "  max=\"$42027-12-31\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextWithLabel Basic": {
+    "description": "InputTextWithLabel: labelled text field with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextWithLabel",
+      "  v-model=\"$1fieldValue\"",
+      "  id=\"$2fieldId\"",
+      "  name=\"$3fieldName\"",
+      "  type=\"$4text\"",
+      "  label=\"$5Field label\"",
+      "  :error-message=\"$6errors.fieldName\"",
+      "  :field-has-error=\"!!$6errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextWithLabel Date with min/max": {
+    "description": "InputTextWithLabel date field constrained to a min/max range",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextWithLabel",
+      "  v-model=\"$1appointmentDate\"",
+      "  id=\"$2appointment-date\"",
+      "  name=\"$2appointmentDate\"",
+      "  type=\"date\"",
+      "  label=\"$3Appointment date\"",
+      "  :min=\"new Date().toISOString().split('T')[0]\"",
+      "  max=\"$42027-12-31\"",
+      "  :error-message=\"$5errors.appointmentDate\"",
+      "  :field-has-error=\"!!$5errors.appointmentDate\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputPasswordWithLabel": {
+    "description": "InputPasswordWithLabel with show/hide toggle",
+    "scope": "vue,html",
+    "body": [
+      "<InputPasswordWithLabel",
+      "  v-model=\"$1password\"",
+      "  name=\"$2password\"",
+      "  label=\"$3Password\"",
+      "  :error-message=\"$4errors.password\"",
+      "  :field-has-error=\"!!$4errors.password\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextAsNumberWithLabel": {
+    "description": "InputTextAsNumberWithLabel numeric stepper with min/max/step",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextAsNumberWithLabel",
+      "  v-model=\"$1quantity\"",
+      "  name=\"$2quantity\"",
+      "  label=\"$3Quantity\"",
+      "  :min=\"$41\"",
+      "  :max=\"$599\"",
+      "  :step=\"$61\"",
+      "  :error-message=\"$7errors.quantity\"",
+      "  :field-has-error=\"!!$7errors.quantity\"",
+      ">",
+      "  <template #left>−</template>",
+      "  <template #right>+</template>",
+      "</InputTextAsNumberWithLabel>"
+    ]
+  },
+  "SRCDEV InputText CSS Override": {
+    "description": "CSS override scaffold for InputTextCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .input-text-wrapper {",
+      "    --input-text-surface: $2;",
+      "    --input-text-border: $3;",
+      "    --input-text-border-focus: $4;",
+      "    --input-text-color: $5;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-masonry-grid.code-snippets

@@ -0,0 +1,51 @@
+{
+  "SRCDEV MasonryGrid Basic": {
+    "description": "Basic MasonryGrid with a few named item slots",
+    "scope": "vue,html",
+    "body": [
+      "<MasonryGrid :item-min-width=\"$1300\" :gap=\"$212\">",
+      "  <template #item-1>",
+      "    $3",
+      "  </template>",
+      "  <template #item-2>",
+      "    $4",
+      "  </template>",
+      "</MasonryGrid>"
+    ]
+  },
+  "SRCDEV MasonryGrid Looped": {
+    "description": "MasonryGrid rendering a v-for list via dynamic slot names (no count prop needed)",
+    "scope": "vue,html",
+    "body": [
+      "<MasonryGrid :item-min-width=\"$1280\" :gap=\"$216\">",
+      "  <template v-for=\"($3item, $4index) in $5items\" :key=\"$3item.id\" #[`item-${$4index}`]>",
+      "    $6",
+      "  </template>",
+      "</MasonryGrid>"
+    ]
+  },
+  "SRCDEV MasonryGrid Fixed Width Centered": {
+    "description": "MasonryGrid with fixed-width tiles centered in the wrapper",
+    "scope": "vue,html",
+    "body": [
+      "<MasonryGrid :fixed-width=\"true\" justify=\"center\" :item-min-width=\"$1240\" :gap=\"$212\">",
+      "  <template v-for=\"($3item, $4index) in $5items\" :key=\"$3item.id\" #[`item-${$4index}`]>",
+      "    $6",
+      "  </template>",
+      "</MasonryGrid>"
+    ]
+  },
+  "SRCDEV MasonryGrid CSS Override": {
+    "description": "CSS override scaffold for MasonryGrid tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .masonry-grid-wrapper {",
+      "    --masonry-grid-item-border-colour: $2;",
+      "    --masonry-grid-item-padding: $3;",
+      "    --masonry-grid-transition-duration: $4;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-pop-over.code-snippets

@@ -0,0 +1,44 @@
+{
+  "SRCDEV PopOver Basic": {
+    "description": "PopOver — generic anchor-positioned disclosure panel",
+    "scope": "vue,html",
+    "body": [
+      "<PopOver>",
+      "  <template #trigger>",
+      "    <span>$1</span>",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</PopOver>"
+    ]
+  },
+  "SRCDEV PopOver Placement": {
+    "description": "PopOver with an explicit placement",
+    "scope": "vue,html",
+    "body": [
+      "<PopOver placement=\"${1|top,right,bottom,left|}\">",
+      "  <template #trigger>",
+      "    <span>$2</span>",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</PopOver>"
+    ]
+  },
+  "SRCDEV PopOver Icon Trigger": {
+    "description": "PopOver with an icon-only trigger and localised labels",
+    "scope": "vue,html",
+    "body": [
+      "<PopOver trigger-aria-label=\"${1:Show more}\" popover-aria-label=\"${2:More information}\">",
+      "  <template #trigger>",
+      "    <Icon name=\"${3:lucide:info}\" aria-hidden=\"true\" />",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</PopOver>"
+    ]
+  }
+}

package/.vscode/srcdev-component-rotating-carousel-image.code-snippets

@@ -0,0 +1,74 @@
+{
+  "SRCDEV RotatingCarouselImage Basic": {
+    "description": "RotatingCarouselImage — 3D rotating image carousel with scroll-parallax tilt",
+    "scope": "vue,html",
+    "body": [
+      "<RotatingCarouselImage",
+      "  :data=\"[",
+      "    { src: '${1:/carousel/1.jpg}', alt: '${2:Image 1}' },",
+      "    { src: '${3:/carousel/2.jpg}', alt: '${4:Image 2}' },",
+      "  ]\"",
+      ">$5</RotatingCarouselImage>"
+    ]
+  },
+  "SRCDEV RotatingCarouselImage With Controls": {
+    "description": "RotatingCarouselImage with the visible pause/play control button (WCAG 2.2.2)",
+    "scope": "vue,html",
+    "body": [
+      "<RotatingCarouselImage",
+      "  :data=\"$1images\"",
+      "  show-controls",
+      "  aria-label=\"$2Rotating product photos\"",
+      "/>"
+    ]
+  },
+  "SRCDEV RotatingCarouselImage Static Tilt": {
+    "description": "RotatingCarouselImage with scroll-parallax disabled, using a fixed rotateX instead",
+    "scope": "vue,html",
+    "body": [
+      "<RotatingCarouselImage",
+      "  :data=\"$1images\"",
+      "  :use-parallax-effect=\"false\"",
+      "  :rotate-x=\"${2:10}\"",
+      "  show-controls",
+      "/>"
+    ]
+  },
+  "SRCDEV RotatingCarouselImage Custom Toggle Icon Slot": {
+    "description": "RotatingCarouselImage with the toggle-icon slot fully replacing the control button's icon",
+    "scope": "vue,html",
+    "body": [
+      "<RotatingCarouselImage :data=\"$1images\" show-controls>",
+      "  <template #toggle-icon=\"{ isPaused }\">",
+      "    $2",
+      "  </template>",
+      "</RotatingCarouselImage>"
+    ]
+  },
+  "SRCDEV RotatingCarouselImage CSS Override": {
+    "description": "CSS override scaffold for RotatingCarouselImage — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .rotating-carousel {",
+      "    --rotating-carousel-height: ;",
+      "    --rotating-carousel-item-width: ;",
+      "    --rotating-carousel-item-height: ;",
+      "    --rotating-carousel-offset-bottom: ;",
+      "    --rotating-carousel-rotation-duration: ;",
+      "    --rotating-carousel-z-index: ;",
+      "    --rotating-carousel-focus-outline-width: ;",
+      "    --rotating-carousel-focus-outline-offset: ;",
+      "    --rotating-carousel-control-offset: ;",
+      "    --rotating-carousel-control-background-colour: ;",
+      "    --rotating-carousel-control-background-colour-hover: ;",
+      "    --rotating-carousel-control-text-colour: ;",
+      "    --rotating-carousel-control-border-radius: ;",
+      "    --rotating-carousel-control-border-width: ;",
+      "    --rotating-carousel-control-padding: ;",
+      "    --rotating-carousel-control-font-size: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-skip-links.code-snippets

@@ -0,0 +1,55 @@
+{
+  "SRCDEV SkipLinks Basic": {
+    "description": "SkipLinks — accessibility skip-navigation utility, default main-content/footer links",
+    "scope": "vue,html",
+    "body": [
+      "<SkipLinks />"
+    ]
+  },
+  "SRCDEV SkipLinks Custom Links": {
+    "description": "SkipLinks with a custom list of skip targets",
+    "scope": "vue,html",
+    "body": [
+      "<SkipLinks",
+      "  :links=\"[",
+      "    { href: '${1:#site-navigation}', label: '${2:Skip to navigation}' },",
+      "    { href: '${3:#main-content}', label: '${4:Skip to main content}' },",
+      "    { href: '${5:#footer-content}', label: '${6:Skip to footer}' },",
+      "  ]\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SkipLinks With Home Link Slot": {
+    "description": "SkipLinks with the homeLink slot for a logo/home link before the skip-nav",
+    "scope": "vue,html",
+    "body": [
+      "<SkipLinks>",
+      "  <template #homeLink>",
+      "    $1",
+      "  </template>",
+      "</SkipLinks>"
+    ]
+  },
+  "SRCDEV SkipLinks CSS Override": {
+    "description": "CSS override scaffold for SkipLinks — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .skip-links {",
+      "    --skip-links-z-index: ;",
+      "    --skip-links-gap: ;",
+      "    --skip-links-background-colour: ;",
+      "    --skip-links-border-colour: ;",
+      "    --skip-links-border-width: ;",
+      "    --skip-links-padding: ;",
+      "    --skip-links-text-colour: ;",
+      "    --skip-links-link-padding-block: ;",
+      "    --skip-links-link-padding-inline: ;",
+      "    --skip-links-transition-duration: ;",
+      "    --skip-links-focus-outline-width: ;",
+      "    --skip-links-focus-outline-colour: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-tabs-core.code-snippets

@@ -0,0 +1,78 @@
+{
+  "SRCDEV TabsCore Basic": {
+    "description": "TabsCore — horizontal tablist with indexed trigger/content slots",
+    "scope": "vue,html",
+    "body": [
+      "<TabsCore :item-count=\"${1:3}\">",
+      "  <template #tab-0-trigger>${2:Overview}</template>",
+      "  <template #tab-0-content>",
+      "    $3",
+      "  </template>",
+      "  <template #tab-1-trigger>${4:Specs}</template>",
+      "  <template #tab-1-content>",
+      "    $5",
+      "  </template>",
+      "  <template #tab-2-trigger>${6:Reviews}</template>",
+      "  <template #tab-2-content>",
+      "    $7",
+      "  </template>",
+      "</TabsCore>"
+    ]
+  },
+  "SRCDEV TabsCore Vertical": {
+    "description": "TabsCore with axis=\"y\" for a vertical tab column",
+    "scope": "vue,html",
+    "body": [
+      "<TabsCore axis=\"y\" :item-count=\"${1:3}\" aria-label=\"${2:Settings}\">",
+      "  <template #tab-0-trigger>$3</template>",
+      "  <template #tab-0-content>$4</template>",
+      "</TabsCore>"
+    ]
+  },
+  "SRCDEV TabsCore Indicators Off": {
+    "description": "TabsCore with the moving hover/active/underline decorators all disabled",
+    "scope": "vue,html",
+    "body": [
+      "<TabsCore",
+      "  :item-count=\"${1:3}\"",
+      "  :track-hover=\"false\"",
+      "  :track-active=\"false\"",
+      "  :track-indicator=\"false\"",
+      ">",
+      "  $2",
+      "</TabsCore>"
+    ]
+  },
+  "SRCDEV TabsCore CSS Override": {
+    "description": "CSS override scaffold for TabsCore — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .tabs-core {",
+      "    --tabs-nav-border: ;",
+      "    --tabs-hover-indicator-colour: ;",
+      "    --tabs-hover-indicator-text-colour: ;",
+      "    --tabs-active-indicator-colour: ;",
+      "    --tabs-active-indicator-text-colour: ;",
+      "    --tabs-underline-indicator-colour: ;",
+      "    --tabs-underline-indicator-height: ;",
+      "    --tabs-list-item-opacity: ;",
+      "    --tabs-list-item-colour: ;",
+      "    --tabs-list-item-colour-selected: ;",
+      "    --tabs-list-item-text-transform: ;",
+      "    --tabs-list-item-font-weight: ;",
+      "    --tabs-list-item-padding-block: ;",
+      "    --tabs-list-item-padding-inline: ;",
+      "    --tabs-list-item-colour-transition-duration: ;",
+      "    --tabs-list-item-focus-outline-width: ;",
+      "    --tabs-list-item-focus-outline-offset: ;",
+      "    --tabs-content-background-colour: ;",
+      "    --tabs-content-border-width: ;",
+      "    --tabs-content-border-colour: ;",
+      "    --tabs-content-border-radius: ;",
+      "    --tabs-axis-y-gap: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-heading.css

@@ -31,5 +31,6 @@
   font-weight: 600;
   font-variation-settings: "wght" 600;
   line-height: 1;
-  margin: 0;
+  margin-block: 0rem;
+  padding-block: 0rem;
 }

package/app/components/01.atoms/animations/entry/EntryAnimation.vue

@@ -8,15 +8,21 @@
 interface Props {
   tag?: "div" | "section" | "article" | "aside";
   animationType?: "entry-slide-in" | "entry-zoom-reveal" | "entry-exit-blur";
+  /** Renders as a plain element with no animation class — e.g. the first item in a looped list
+   * that's already above the fold, where an entry animation would just delay visible content. */
+  skipAnimation?: boolean;
   styleClassPassthrough?: string | string[];
 }
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
   animationType: "entry-slide-in",
+  skipAnimation: false,
   styleClassPassthrough: () => [],
 });
 
 const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-updateElementClasses(props.animationType);
+if (!props.skipAnimation) {
+  updateElementClasses(props.animationType);
+}
 </script>

package/app/components/01.atoms/animations/entry/stories/EntryAnimation.stories.ts

@@ -17,6 +17,12 @@ const meta: Meta<typeof EntryAnimation> = {
       description: "Type of entry animation",
       defaultValue: "entry-slide-in",
     },
+    skipAnimation: {
+      control: { type: "boolean" },
+      description:
+        "Render as a plain element with no animation class — e.g. the first item in a looped list that's already above the fold",
+      defaultValue: false,
+    },
     styleClassPassthrough: {
       control: { type: "text" },
       description: "Additional classes for styling",
@@ -72,3 +78,44 @@ export const EntryExitBlur: StoryObj<typeof EntryAnimation> = {
   },
   render: EntrySlideIn.render,
 };
+
+export const SkippedInALoop: StoryObj<typeof EntryAnimation> = {
+  name: "Skip first item (looped list, above the fold)",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The common `v-for` case: the first item is already above the fold, so animating it in " +
+          "would just delay content the visitor can already see. Pass `skip-animation` for that one " +
+          "item instead of swapping the whole component out for a plain tag.",
+      },
+    },
+  },
+  render: () => ({
+    components: { EntryAnimation },
+    setup() {
+      const items = [0, 1, 2];
+      return { items };
+    },
+    template: `
+      <div style="padding-block: 400px; background-color: green; margin-bottom: 1000px;">
+        <label style="display: block; font-weight: bold; margin-bottom: 1rem; color: #fff;">
+          Item 0 renders immediately (skip-animation) — scroll to see items 1 and 2 animate in
+        </label>
+        <div
+          v-for="index in items"
+          :key="index"
+          style="margin-bottom: 2rem;"
+        >
+          <EntryAnimation :skip-animation="index === 0" animation-type="entry-slide-in">
+            <template #default>
+              <div style="padding: 2rem; background: #f0f0f0; border-radius: 8px;">
+                Item {{ index }} {{ index === 0 ? '(skipped)' : '(animated)' }}
+              </div>
+            </template>
+          </EntryAnimation>
+        </div>
+      </div>
+    `,
+  }),
+};

package/app/components/01.atoms/animations/entry/tests/EntryAnimation.spec.ts

@@ -0,0 +1,57 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../EntryAnimation.vue";
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slotsData = {}) => {
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: propsData,
+    slots: {
+      default: () => "Content",
+      ...slotsData,
+    },
+  });
+};
+
+describe("EntryAnimation", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the given tag", async () => {
+    wrapper = await wrapperFactory({ tag: "section" });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  it("applies the default animation class", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.classes()).toContain("entry-slide-in");
+  });
+
+  it("applies the requested animationType class", async () => {
+    wrapper = await wrapperFactory({ animationType: "entry-zoom-reveal" });
+    expect(wrapper.classes()).toContain("entry-zoom-reveal");
+    expect(wrapper.classes()).not.toContain("entry-slide-in");
+  });
+
+  it("applies no animation class when skipAnimation is true", async () => {
+    wrapper = await wrapperFactory({ skipAnimation: true });
+    expect(wrapper.classes()).not.toContain("entry-slide-in");
+    expect(wrapper.classes()).not.toContain("entry-zoom-reveal");
+    expect(wrapper.classes()).not.toContain("entry-exit-blur");
+  });
+
+  it("still applies styleClassPassthrough classes when skipAnimation is true", async () => {
+    wrapper = await wrapperFactory({ skipAnimation: true, styleClassPassthrough: ["custom-class"] });
+    expect(wrapper.classes()).toContain("custom-class");
+    expect(wrapper.classes()).not.toContain("entry-slide-in");
+  });
+
+  it("renders slot content", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.text()).toContain("Content");
+  });
+});

package/app/components/01.atoms/animations/rotating-carousel-image/CONSUMER-STYLING.md

@@ -0,0 +1,54 @@
+# RotatingCarouselImage — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--rotating-carousel-height` | `70svh` | Height of the carousel's root element |
+| `--rotating-carousel-item-width` | `200px` | Width of each rotating item (and the slider box itself) |
+| `--rotating-carousel-item-height` | `250px` | Height of each rotating item (and the slider box itself) |
+| `--rotating-carousel-offset-bottom` | `35%` | Vertical position of the slider box within the root element |
+| `--rotating-carousel-rotation-duration` | `30s` | Duration of one full 360° rotation |
+| `--rotating-carousel-z-index` | `2` | Stacking context of the slider box |
+| `--rotating-carousel-focus-outline-width` | `2px` | Outline width on the root region and the control button when keyboard-focused (colour is `--theme-ring`) |
+| `--rotating-carousel-focus-outline-offset` | `2px` | Outline offset on the same two focus states |
+| `--rotating-carousel-control-offset` | `8px` | Distance of the pause/play button from the top and end edges |
+| `--rotating-carousel-control-background-colour` | `rgba(0, 0, 0, 0.7)` | Pause/play button background |
+| `--rotating-carousel-control-background-colour-hover` | `rgba(0, 0, 0, 0.9)` | Pause/play button background on hover |
+| `--rotating-carousel-control-text-colour` | `white` | Pause/play button icon colour |
+| `--rotating-carousel-control-border-radius` | `4px` | Pause/play button border radius |
+| `--rotating-carousel-control-padding` | `8px` | Pause/play button padding |
+| `--rotating-carousel-control-font-size` | `14px` | Pause/play button icon font size |
+| `--rotating-carousel-control-transition-duration` | `0.2s` | Pause/play button background-colour transition duration |
+| `--rotating-carousel-control-border-width` | `1px` | Pause/play button border width in forced-colors/high-contrast mode (`prefers-contrast: high`) |
+
+```css
+.my-page {
+  --rotating-carousel-item-width: 260px;
+  --rotating-carousel-item-height: 320px;
+  --rotating-carousel-rotation-duration: 45s;
+}
+```
+
+## High-contrast mode colours are not tokenised
+
+Under `prefers-contrast: high`, the control button switches to the system colour keywords
+`ButtonFace`/`ButtonText` rather than the component's own background/text tokens, so it tracks the
+user's OS-level high-contrast theme. Only the border *width* in that mode is a token
+(`--rotating-carousel-control-border-width`).
+
+## Rotation geometry is prop-driven, not tokens
+
+`rotateX`, `perspective`, and `translateZ` control the 3D tilt and radius of the rotation and are
+set via props (not CSS custom properties), since they also drive the component's own scroll-based
+parallax math:
+
+```vue
+<RotatingCarouselImage :data="images" :perspective="1200" :translate-z="1200" />
+```
+
+## Control button icon and copy
+
+The pause/play button's icon and its `aria-label` copy are overridable via `playIcon`/`pauseIcon`/
+`playLabel`/`pauseLabel` props, or the `toggle-icon` slot for a fully custom icon (scoped with
+`isPaused`) — same pattern as `MarqueeScroller`.