@akinon/pz-theme 2.0.95-rc.1 → 2.0.96-beta.0

package/CHANGELOG.md

@@ -1,72 +1,21 @@
 # @akinon/pz-theme
 
-## 2.0.95-rc.1
-
-### Patch Changes
-
-- Updated dependencies [86187b1c]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b]
-  - @akinon/next@2.0.95-rc.1
-  - @akinon/theme-contract@2.0.95-rc.1
-
-## 2.0.95-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b]
-  - @akinon/next@2.0.95-rc.0
-  - @akinon/theme-contract@2.0.95-rc.0
+## 2.0.96-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd757]
+  - @akinon/next@2.0.96-beta.0
+  - @akinon/theme-contract@2.0.96-beta.0
+
+## 2.0.95
+
+### Patch Changes
+
+- 63dce4df: ZERO-4963: Name the slider's slide wrapper as a styleable part
+- d7db835f: ZERO-4963: Rotate the slider arrows from the panel and add an arrows-on-hover option
+  - @akinon/next@2.0.95
+  - @akinon/theme-contract@2.0.95
 
 ## 2.0.94
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.95-rc.1",
+  "version": "2.0.96-beta.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.95-rc.1",
+    "@akinon/next": "2.0.96-beta.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.95-rc.1",
+    "@akinon/theme-contract": "2.0.96-beta.0",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.95-rc.1",
+    "@akinon/next": "2.0.96-beta.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/blocks/__tests__/slider-block.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 // react-multi-carousel is an ESM/DOM-heavy dependency. Replace its default
 // export with a passthrough that simply renders its children so we can assert
@@ -365,3 +365,267 @@ describe('SliderBlock — arrow button placement', () => {
     expect(previous(container).className).toContain('z-10');
   });
 });
+
+/**
+ * EVERY SLIDE IS THE SAME HEIGHT, OR THE DIVIDER BETWEEN TWO CARDS IS RAGGED.
+ *
+ * react-multi-carousel stretches its own `li` to the tallest slide, and a card
+ * inside one asks for `height: 100%`. Between the two sits this block's own
+ * per-slide wrapper, which had no height of its own — so the percentage
+ * resolved against an auto-height box, fell back to `auto`, and each card
+ * ended up as tall as its own text. The only lever a composition had was
+ * scoped custom CSS reaching into the library's class names, per section.
+ *
+ * Naming the wrapper makes it addressable from the panel (`slide/height`), so
+ * the marker is the contract: the editor's descriptor-conformance test fails
+ * the "Slide" part group the moment this attribute stops being emitted.
+ */
+describe('SliderBlock — the slide wrapper is a styleable part', () => {
+  const slideWrappers = (container: HTMLElement) =>
+    Array.from(container.querySelectorAll('[data-part="slide"]'));
+
+  it('marks one slide wrapper per slide', () => {
+    const { container } = render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            blocks: [child('a'), child('b'), child('c')]
+          }
+        })}
+      />
+    );
+
+    expect(slideWrappers(container)).toHaveLength(3);
+  });
+
+  it("wraps each slide's card in its own marked box", () => {
+    const { container } = render(
+      <SliderBlock
+        {...props({
+          block: { ...props().block, blocks: [child('a'), child('b')] }
+        })}
+      />
+    );
+
+    expect(
+      slideWrappers(container).map((wrapper) =>
+        wrapper.querySelector('[data-testid="tb"]')?.getAttribute('data-id')
+      )
+    ).toEqual(['a', 'b']);
+  });
+
+  it('does not mark the arrow icons, which are not slides', () => {
+    const { container } = render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            blocks: [
+              child('left', { type: 'icon', label: 'Left Arrow Icon' }),
+              child('right', { type: 'icon', label: 'Right Arrow Icon' }),
+              child('a')
+            ]
+          }
+        })}
+      />
+    );
+
+    expect(slideWrappers(container)).toHaveLength(1);
+  });
+
+  it('keeps the authored slide padding on the marked box', () => {
+    const { container } = render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            properties: { 'slide-gap': 24 },
+            blocks: [child('a'), child('b')]
+          }
+        })}
+      />
+    );
+
+    expect(
+      (slideWrappers(container)[0] as HTMLElement).style.paddingLeft
+    ).toBe('12px');
+  });
+});
+
+/**
+ * TWO THINGS THE PANEL COULD ASK FOR AND THE ARROWS COULD NOT DO.
+ *
+ * The arrow buttons are not composed blocks — the slider draws its own
+ * <button> and reads a fixed handful of the arrow icon block's style keys — so
+ * a key the reader does not know reaches the theme JSON and stops there. Rotate
+ * was one of those: the same right-pointing SVG ships for both sides, and a
+ * designer turning the left one round got nothing.
+ *
+ * The reveal-on-hover option is state rather than a `group-hover:` class
+ * because a brand's Tailwind `content` list does not scan this package: a class
+ * only this file writes is never generated, so the arrows would go away and
+ * never come back.
+ */
+describe('SliderBlock — arrow rotate and reveal-on-hover', () => {
+  // jest/setup.ts answers every media query with `matches: false`, which is a
+  // touch device — and the option is deliberately inert there. These cases are
+  // about the pointer that CAN hover, so they say so.
+  const setHoverCapability = (matches: boolean) => {
+    window.matchMedia = ((query: string) => ({
+      matches,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false
+    })) as unknown as typeof window.matchMedia;
+  };
+
+  beforeEach(() => setHoverCapability(true));
+
+  const arrow = (label: string, styles: Record<string, unknown>) =>
+    child(label, { type: 'icon', label, value: { url: '/a.svg' }, styles });
+
+  const glyphs = (container: HTMLElement) =>
+    Array.from(container.querySelectorAll('img')) as HTMLImageElement[];
+  const buttons = (container: HTMLElement) =>
+    Array.from(
+      container.querySelectorAll('button[aria-label="Previous"], button[aria-label="Next"]')
+    ) as HTMLElement[];
+
+  // An authored top/bottom is what moves the arrows out of the carousel, which
+  // is the branch a storefront render can assert on (the mocked Carousel drops
+  // its customArrow props).
+  const outside = (extra: Record<string, unknown> = {}) => ({
+    top: '0px',
+    ...extra
+  });
+
+  const renderSlider = (
+    arrowStyles: Record<string, unknown>,
+    over: Record<string, unknown> = {},
+    properties: Record<string, unknown> = {}
+  ) =>
+    render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            properties,
+            blocks: [
+              arrow('Left Arrow Icon', arrowStyles),
+              child('s1'),
+              arrow('Right Arrow Icon', arrowStyles)
+            ]
+          },
+          ...over
+        })}
+      />
+    );
+
+  it('turns an authored rotate into a rotation on the glyph', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: '180deg' } }));
+
+    expect(glyphs(container).map((img) => img.style.rotate)).toEqual([
+      '180deg',
+      '180deg'
+    ]);
+  });
+
+  it('reads the bare number the Rotate box stores as degrees', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: 180 } }));
+
+    expect(glyphs(container)[0].style.rotate).toBe('180deg');
+  });
+
+  // The Rotate box is free text, so the function spelling turns up as often as
+  // the value one; left alone it emits `rotate: rotate(45deg)` and is dropped.
+  it('unwraps the function spelling a free-text box invites', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: 'rotate(45deg)' } }));
+
+    expect(glyphs(container)[0].style.rotate).toBe('45deg');
+  });
+
+  it('reads a leading-dot number as degrees', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: '.5' } }));
+
+    expect(glyphs(container)[0].style.rotate).toBe('.5deg');
+  });
+
+  it('passes a unit through untouched', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: '0.5turn' } }));
+
+    expect(glyphs(container)[0].style.rotate).toBe('0.5turn');
+  });
+
+  it('leaves the glyph unrotated when nothing is authored', () => {
+    const { container } = renderSlider(outside());
+
+    expect(glyphs(container)[0].style.rotate).toBeFalsy();
+  });
+
+  // The rotation must not fight the button's own centring translate.
+  it('rotates the glyph, never the button', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: '180deg' } }));
+
+    expect(buttons(container)[0].style.rotate).toBeFalsy();
+    expect(buttons(container)[0].style.transform).toBeFalsy();
+  });
+
+  it('hides the arrows until the slider is hovered when asked to', () => {
+    const { container } = renderSlider(outside(), {}, {
+      'arrows-on-hover': { desktop: true }
+    });
+    const root = container.firstElementChild as HTMLElement;
+
+    expect(buttons(container).map((b) => b.style.opacity)).toEqual(['0', '0']);
+    expect(buttons(container)[0].style.pointerEvents).toBe('none');
+
+    fireEvent.mouseEnter(root);
+    expect(buttons(container).map((b) => b.style.opacity)).toEqual(['1', '1']);
+    expect(buttons(container)[0].style.pointerEvents).toBe('auto');
+
+    fireEvent.mouseLeave(root);
+    expect(buttons(container)[0].style.opacity).toBe('0');
+  });
+
+  // Keyboard users never send a mouseenter.
+  it('reveals the arrows when focus lands inside', () => {
+    const { container } = renderSlider(outside(), {}, {
+      'arrows-on-hover': { desktop: true }
+    });
+
+    fireEvent.focus(container.firstElementChild as HTMLElement);
+    expect(buttons(container)[0].style.opacity).toBe('1');
+  });
+
+  it('keeps the arrows visible in the designer, where they must stay selectable', () => {
+    const { container } = renderSlider(outside(), { isDesigner: true }, {
+      'arrows-on-hover': { desktop: true }
+    });
+
+    expect(buttons(container)[0].style.opacity).toBe('');
+    expect(buttons(container)[0].style.pointerEvents).toBe('');
+  });
+
+  // "Hover only" on a phone would mean "never", so the option stands down.
+  it('keeps the arrows visible on a device that cannot hover', () => {
+    setHoverCapability(false);
+    const { container } = renderSlider(outside(), {}, {
+      'arrows-on-hover': { desktop: true }
+    });
+
+    expect(buttons(container)[0].style.opacity).toBe('');
+    expect(buttons(container)[0].style.pointerEvents).toBe('');
+  });
+
+  it('writes no visibility style at all when the option is off', () => {
+    const { container } = renderSlider(outside());
+
+    expect(buttons(container)[0].style.opacity).toBe('');
+    expect(buttons(container)[0].style.transition).toBe('');
+  });
+});

package/src/blocks/slider-block.tsx

@@ -10,6 +10,7 @@ import {
   applyFirstSlideImageLoading,
   getCSSStyles,
   getResponsiveValue,
+  partAttrs,
   resolveThemeCssVariables
 } from '../utils';
 import { DESKTOP_MIN_WIDTH, isNarrowBreakpoint } from '../utils/breakpoints';
@@ -44,6 +45,51 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   const themeSettings = useThemeSettingsContext();
   const carouselRef = React.useRef<Carousel>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
+  /**
+   * Whether the pointer (or the keyboard) is inside the slider, for the
+   * arrows-on-hover option below.
+   *
+   * REACT STATE RATHER THAN A `group-hover:` CLASS, FOR TWO REASONS THAT BOTH
+   * END WITH THE ARROWS NEVER COMING BACK.
+   *
+   * Tailwind 4 compiles `group-hover:` inside `@media (hover: hover)` while the
+   * `opacity-0` it pairs with is unconditional — so a phone would get the
+   * hiding half of the rule and never the revealing half. State can ask about
+   * hover capability directly, which is what `canHover` below does.
+   *
+   * And scanning is not guaranteed: the reference app lists this package in its
+   * Tailwind `content` (apps/projectzeronext/tailwind.config.js), but a brand
+   * whose config only lists `@akinon/next` plus its payment plugins does not —
+   * so a class only this file writes may never be generated there. The static
+   * classes the arrows already rely on (`left-4`, `-translate-y-1/2`) come from
+   * the brand's own source using them too.
+   */
+  const [pointerInside, setPointerInside] = React.useState(false);
+  /**
+   * AND WHETHER THIS DEVICE CAN HOVER AT ALL.
+   *
+   * A phone never sends the pointer event that brings the arrows back, so
+   * "arrows on hover" would mean "no arrows, ever" there — the option is
+   * therefore ignored wherever the pointer cannot hover. Assumed true until the
+   * client answers: the server has no media queries, and a desktop flashing its
+   * arrows before hiding them reads worse than a phone showing them a frame
+   * late.
+   */
+  const [canHover, setCanHover] = React.useState(true);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+
+    const query = window.matchMedia('(hover: hover)');
+    setCanHover(query.matches);
+
+    const handleChange = (event: MediaQueryListEvent) =>
+      setCanHover(event.matches);
+
+    // A mouse plugged into a tablet flips this mid-session.
+    query.addEventListener?.('change', handleChange);
+    return () => query.removeEventListener?.('change', handleChange);
+  }, []);
 
   const leftArrowIconBlock = block.blocks?.find(
     (b: any) => b.type === 'icon' && b.label === 'Left Arrow Icon'
@@ -164,6 +210,11 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
     currentBreakpoint,
     false
   );
+  // Arrows that only appear while the slider is hovered. Off by default, so a
+  // slider that never authored it renders exactly as before.
+  const arrowsOnHover = Boolean(
+    getResponsiveValue(getConfigEntry('arrows-on-hover'), currentBreakpoint, false)
+  );
   const useAutoPlay = getResponsiveValue(
     getConfigEntry('autoplay'),
     currentBreakpoint,
@@ -437,6 +488,66 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
       )
     ) || 1;
 
+  /**
+   * The angle the panel's Rotate box holds. It stores a bare number, which is
+   * not valid CSS on its own, so a number becomes degrees and anything with a
+   * unit (deg/turn/rad/grad) is passed through untouched.
+   */
+  const arrowAngle = (value: unknown): string | undefined => {
+    let text = String(value ?? '').trim();
+    if (!text) return undefined;
+    // The panel's Rotate box is free text, so it invites the function spelling
+    // as readily as the value one. Left as typed it would emit
+    // `rotate: rotate(45deg)`, which the browser drops without a word.
+    const wrapped = /^rotate\(([^)]+)\)$/i.exec(text);
+    if (wrapped) text = wrapped[1].trim();
+    // A bare number is degrees — including the leading-dot spelling, which the
+    // earlier pattern rejected and then emitted as the invalid `rotate: .5`.
+    return /^-?(?:\d+(?:\.\d+)?|\.\d+)$/.test(text) ? `${text}deg` : text;
+  };
+
+  /**
+   * ON THE GLYPH, NOT ON THE BUTTON, AND VIA `rotate` RATHER THAN `transform`.
+   *
+   * The rotation a designer wants is the arrow pointing the other way, not the
+   * button's background box turning with it — the same SVG ships for both
+   * sides, so mirroring the left one is the whole point.
+   *
+   * `rotate` rather than `transform` because of the centring class it has to
+   * live beside. Tailwind 4 compiles `-translate-y-1/2` to the individual
+   * `translate` property, and the individual properties are composed in a fixed
+   * order — translate, then rotate, then scale, then `transform` — so a rotation
+   * written here cannot displace the centring, and it turns the glyph about its
+   * own centre. A raw `transform` would have to restate the translate (and did
+   * clobber it under Tailwind 3).
+   *
+   * NOTE THE DIVERGENCE, which is a real one: the section arrows in
+   * utils/slider-arrows.tsx put `data-block-id` on the BUTTON, so there the
+   * generated rule for this same `rotate` key turns the plate and the glyph
+   * together. Here only the glyph turns.
+   *
+   * A rule for this icon block's `rotate` is in fact already in the generated
+   * stylesheet — `collectBlockCSS` recurses into every child block — and
+   * matches nothing only because this button carries no `data-block-id`. If one
+   * is ever added (to let borders, shadows or part keys reach the plate), that
+   * rule and the inline value below would both apply and the glyph would sit at
+   * twice the authored angle; drop one of the two when that happens.
+   */
+  const leftArrowIconRotate = arrowAngle(
+    getResponsiveValue(
+      leftArrowIconBlock?.styles?.['rotate'],
+      currentBreakpoint,
+      ''
+    )
+  );
+  const rightArrowIconRotate = arrowAngle(
+    getResponsiveValue(
+      rightArrowIconBlock?.styles?.['rotate'],
+      currentBreakpoint,
+      ''
+    )
+  );
+
   // Process SVGs with color
   const processedLeftArrowUrl = isInlineSvg(leftArrowIconUrl)
     ? processInlineSVG(leftArrowIconUrl, leftArrowIconColor)
@@ -569,6 +680,25 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   const leftArrowButtonStyle = arrowGeometry(leftArrowIconBlock);
   const rightArrowButtonStyle = arrowGeometry(rightArrowIconBlock);
 
+  /**
+   * What the arrows-on-hover option adds to every arrow button.
+   *
+   * The designer canvas is exempt: an arrow a merchant cannot see is an arrow
+   * they cannot select, and the panel is where the option is being switched on
+   * in the first place. `pointer-events` follows the opacity so an invisible
+   * arrow cannot be clicked, and the transition is inline for the same reason
+   * the state above is React — no class this package writes reaches the brand's
+   * stylesheet.
+   */
+  const arrowRevealStyle: React.CSSProperties =
+    arrowsOnHover && canHover && !isDesigner
+      ? {
+          opacity: pointerInside ? 1 : 0,
+          pointerEvents: pointerInside ? 'auto' : 'none',
+          transition: 'opacity 200ms ease'
+        }
+      : {};
+
   /**
    * The class defaults step aside per axis for whatever the author set.
    * An inline `left` already outranks the `left-4` class, but the pair that
@@ -633,7 +763,8 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
         alignItems: 'center',
         justifyContent: 'center',
         cursor: 'pointer',
-        padding: 0
+        padding: 0,
+        ...arrowRevealStyle
       }}
       aria-label="Previous"
     >
@@ -644,6 +775,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           width: `${leftArrowIconSize}px`,
           height: `${leftArrowIconSize}px`,
           opacity: leftArrowIconOpacity,
+          rotate: leftArrowIconRotate,
           pointerEvents: 'none'
         }}
       />
@@ -673,7 +805,8 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
         alignItems: 'center',
         justifyContent: 'center',
         cursor: 'pointer',
-        padding: 0
+        padding: 0,
+        ...arrowRevealStyle
       }}
       aria-label="Next"
     >
@@ -684,6 +817,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           width: `${rightArrowIconSize}px`,
           height: `${rightArrowIconSize}px`,
           opacity: rightArrowIconOpacity,
+          rotate: rightArrowIconRotate,
           pointerEvents: 'none'
         }}
       />
@@ -708,6 +842,16 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
       )}
       style={sectionStyles}
       {...carouselSsr.gateProps}
+      // Focus rides along with the pointer so the arrows are reachable by
+      // keyboard; both events bubble in React, so tabbing INTO an arrow counts.
+      onMouseEnter={
+        arrowsOnHover ? () => setPointerInside(true) : undefined
+      }
+      onMouseLeave={
+        arrowsOnHover ? () => setPointerInside(false) : undefined
+      }
+      onFocus={arrowsOnHover ? () => setPointerInside(true) : undefined}
+      onBlur={arrowsOnHover ? () => setPointerInside(false) : undefined}
     >
       <div style={{ position: 'relative' }}>
         <Carousel
@@ -794,8 +938,26 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
                 : childBlock;
 
             return (
+              /*
+               * THE ONLY BOX BETWEEN A SLIDE'S CARD AND THE TRACK, AND THE ONE
+               * LINK IN THE CHAIN THAT USED TO HAVE NO HEIGHT.
+               *
+               * react-multi-carousel stretches every `li` to the tallest slide,
+               * so a card asking for `height: 100%` has a definite height two
+               * levels up and an auto-height one directly above it — this
+               * wrapper. The card's own percentage therefore resolved to `auto`
+               * and every slide was as tall as its own text, which is what made
+               * a row of cards with a divider border look ragged.
+               *
+               * Named as a part so the panel can give it a height rather than
+               * a brand carrying scoped custom CSS per section. The inline
+               * padding stays: part declarations are emitted `!important`
+               * (generatePartCSS), so an authored `slide/padding-left` still
+               * wins over it.
+               */
               <div
                 key={childBlock.id}
+                {...partAttrs('slide')}
                 style={
                   flushEdges
                     ? {
@@ -860,7 +1022,8 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
                 alignItems: 'center',
                 justifyContent: 'center',
                 cursor: 'pointer',
-                padding: 0
+                padding: 0,
+                ...arrowRevealStyle
               }}
               aria-label="Previous"
             >
@@ -871,6 +1034,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
                   width: `${leftArrowIconSize}px`,
                   height: `${leftArrowIconSize}px`,
                   opacity: leftArrowIconOpacity,
+                  rotate: leftArrowIconRotate,
                   pointerEvents: 'none'
                 }}
               />
@@ -891,7 +1055,8 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
                 alignItems: 'center',
                 justifyContent: 'center',
                 cursor: 'pointer',
-                padding: 0
+                padding: 0,
+                ...arrowRevealStyle
               }}
               aria-label="Next"
             >
@@ -902,6 +1067,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
                   width: `${rightArrowIconSize}px`,
                   height: `${rightArrowIconSize}px`,
                   opacity: rightArrowIconOpacity,
+                  rotate: rightArrowIconRotate,
                   pointerEvents: 'none'
                 }}
               />