@akinon/pz-theme 2.0.120-rc.0 → 2.0.121-beta.0

package/CHANGELOG.md

@@ -1,40 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.120-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c2]
-- 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 [b1111d7b1]
-- Updated dependencies [1595d458]
-- Updated dependencies [dca1281]
-  - @akinon/next@2.0.120-rc.0
-  - @akinon/theme-contract@2.0.120-rc.0
+## 2.0.121-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd757]
+  - @akinon/next@2.0.121-beta.0
+  - @akinon/theme-contract@2.0.121-beta.0
+
+## 2.0.120
+
+### Patch Changes
+
+- 08bcba4: Let the panel actually reach a slider's arrows and dots: the arrow buttons took a hand-picked handful of style keys and re-hardcoded the rest afterwards, so Justify Content, Align Items, Border, Box Shadow and Padding were stored, shown back in the panel and then dropped on the way to the canvas; the arrows now honour the whole authored map and carry their own block id, so states, part keys and custom CSS reach them too. The dots were the carousel library's own markup with no hook out of it at all, and are now drawn as a named part, so their box, their hover and — the thing every brand asks for first — the active one can all be styled, while a slider that authored none of this renders exactly as before
+  - @akinon/next@2.0.120
+  - @akinon/theme-contract@2.0.120
 
 ## 2.0.119
 

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.120-rc.0",
+  "version": "2.0.121-beta.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.120-rc.0",
+    "@akinon/next": "2.0.121-beta.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.120-rc.0",
+    "@akinon/theme-contract": "2.0.121-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.120-rc.0",
+    "@akinon/next": "2.0.121-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

@@ -572,14 +572,27 @@ describe('SliderBlock — arrow rotate and reveal-on-hover', () => {
     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', () => {
+  /*
+   * The rotation must not fight the button's own centring translate — and,
+   * since the button carries `data-block-id`, it must not be applied a second
+   * time by the generated stylesheet either. `getCSSStyles` drops `rotate` so
+   * the sheet can render it, which is right for every other block and wrong
+   * here: the plate is not what the designer is turning. `rotate: none` inline
+   * is what says so, and inline is what beats the sheet.
+   */
+  it('rotates the glyph, and pins the button against the generated rule', () => {
     const { container } = renderSlider(outside({ rotate: { desktop: '180deg' } }));
 
-    expect(buttons(container)[0].style.rotate).toBeFalsy();
+    expect(buttons(container)[0].style.rotate).toBe('none');
     expect(buttons(container)[0].style.transform).toBeFalsy();
   });
 
+  it('leaves the button alone when no rotation is authored', () => {
+    const { container } = renderSlider(outside());
+
+    expect(buttons(container)[0].style.rotate).toBeFalsy();
+  });
+
   it('hides the arrows until the slider is hovered when asked to', () => {
     const { container } = renderSlider(outside(), {}, {
       'arrows-on-hover': { desktop: true }
@@ -687,3 +700,425 @@ describe('SliderBlock — autoplay speed', () => {
     expect(lastCarouselProps().autoPlaySpeed).toBe(3000);
   });
 });
+
+/**
+ * THE WHOLE AUTHORED MAP, NOT A HAND-PICKED LIST.
+ *
+ * The plate used to be assembled from six keys — width, height, the radius
+ * shorthand and its corners, the four offsets, the background — so every other
+ * declaration a designer typed was stored, shown back in the panel, and then
+ * dropped on the way to the button. `justify-content` and `align-items` were
+ * worse than dropped: they were re-hardcoded to `center` AFTER the authored
+ * spread, so no value could have won even had the key been read.
+ */
+describe('SliderBlock — the arrow plate takes the whole style map', () => {
+  const arrow = (label: string, styles: Record<string, unknown>) =>
+    child(label === 'Left Arrow Icon' ? 'left-arrow' : 'right-arrow', {
+      type: 'icon',
+      label,
+      styles
+    });
+
+  const renderArrows = (styles: Record<string, unknown>) =>
+    render(
+      <SliderBlock
+        {...props({
+          isDesigner: true,
+          block: {
+            ...props().block,
+            blocks: [
+              arrow('Left Arrow Icon', styles),
+              child('s1'),
+              arrow('Right Arrow Icon', styles)
+            ]
+          }
+        })}
+      />
+    );
+
+  const previous = (container: HTMLElement) =>
+    container.querySelector('button[aria-label="Previous"]') as HTMLElement;
+
+  it('honours justify-content, the key the panel showed doing nothing', () => {
+    const { container } = renderArrows({ 'justify-content': 'flex-end' });
+
+    expect(previous(container).style.justifyContent).toBe('flex-end');
+  });
+
+  it('honours align-items', () => {
+    const { container } = renderArrows({ 'align-items': 'flex-start' });
+
+    expect(previous(container).style.alignItems).toBe('flex-start');
+  });
+
+  it('honours a border, which the hardcoded `none` used to swallow', () => {
+    const { container } = renderArrows({ border: '2px solid #ff0000' });
+
+    expect(previous(container).style.border).toBe('2px solid #ff0000');
+  });
+
+  it('honours the rest of the box a designer reaches for', () => {
+    const { container } = renderArrows({
+      'box-shadow': '0 2px 8px rgba(0,0,0,0.4)',
+      padding: '6px',
+      'backdrop-filter': 'blur(4px)'
+    });
+    const style = previous(container).style;
+
+    expect(style.boxShadow).toBe('0 2px 8px rgba(0,0,0,0.4)');
+    expect(style.padding).toBe('6px');
+  });
+
+  it('keeps centring the glyph when nothing asks otherwise', () => {
+    const { container } = renderArrows({});
+
+    // The default moved from the inline object into the class list, which is
+    // the whole reason an authored value can now beat it.
+    expect(previous(container).className).toContain('items-center');
+    expect(previous(container).className).toContain('justify-center');
+    expect(previous(container).style.justifyContent).toBe('');
+  });
+
+  it('keeps the legacy plate for a slider that authored none of this', () => {
+    const { container } = renderArrows({});
+    const style = previous(container).style;
+
+    expect(style.width).toBe('40px');
+    expect(style.height).toBe('40px');
+    expect(style.borderRadius).toBe('50%');
+    expect(style.backgroundColor).toBe('rgba(0, 0, 0, 0.5)');
+    expect(style.cursor).toBe('pointer');
+  });
+
+  it('still lets the authored background replace the default plate', () => {
+    const { container } = renderArrows({ background: '#ffffff' });
+
+    expect(previous(container).style.background).toBe('rgb(255, 255, 255)');
+  });
+
+  /**
+   * The line that connects the arrow to everything else in the panel. The
+   * generated stylesheet has always emitted `[data-block-id="…"]` rules for
+   * these icon blocks — `collectBlockCSS` recurses into every child — and they
+   * matched nothing, because the icon children are filtered out of the slide
+   * list and the button carried no id. Hover colours, part keys and the
+   * custom-CSS hatch all rode on this.
+   */
+  it('stamps each arrow button with its own block id', () => {
+    const { container } = renderArrows({});
+
+    expect(previous(container).getAttribute('data-block-id')).toBe(
+      'left-arrow'
+    );
+    expect(
+      container
+        .querySelector('button[aria-label="Next"]')
+        ?.getAttribute('data-block-id')
+    ).toBe('right-arrow');
+  });
+
+  it('keeps `size` off the plate — it belongs to the glyph', () => {
+    const { container } = renderArrows({ size: 32 });
+    const button = previous(container);
+
+    expect(button.getAttribute('style')).not.toContain('size');
+    expect(
+      (button.querySelector('img') as HTMLElement).style.width
+    ).toBe('32px');
+  });
+});
+
+/**
+ * THE DOTS.
+ *
+ * react-multi-carousel drew them from its own stylesheet and the panel's only
+ * word on the subject was Show Dots, so a brand could have pagination or not
+ * have it and nothing in between. The block draws them now, which is what lets
+ * `dot/…` and `dot/selected/…` reach them through the same part pipeline the
+ * Slide box already uses.
+ */
+describe('SliderBlock — dots', () => {
+  const renderDots = (properties: Record<string, unknown> = {}) =>
+    render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            properties: { 'show-dots': true, ...properties },
+            blocks: [child('a'), child('b')]
+          }
+        })}
+      />
+    );
+
+  const dotFor = (active: boolean) => {
+    renderDots();
+    const CustomDot = lastCarouselProps().customDot;
+    return render(
+      <ul>{React.cloneElement(CustomDot, { index: 1, active })}</ul>
+    ).container;
+  };
+
+  it('hands the carousel a dot of its own to draw', () => {
+    renderDots();
+
+    expect(lastCarouselProps().showDots).toBe(true);
+    expect(lastCarouselProps().customDot).toBeTruthy();
+  });
+
+  it('names the dot as a part, so the panel can reach it', () => {
+    const dot = dotFor(false).querySelector('[data-part="dot"]');
+
+    expect(dot).toBeTruthy();
+    expect(dot?.tagName).toBe('BUTTON');
+  });
+
+  it('stamps the active dot `selected`, which is the state chip', () => {
+    expect(
+      dotFor(true).querySelector('[data-part="dot"]')?.getAttribute('data-state')
+    ).toBe('selected');
+    expect(
+      dotFor(false)
+        .querySelector('[data-part="dot"]')
+        ?.getAttribute('data-state')
+    ).toBeNull();
+  });
+
+  /*
+   * The default look is the LIBRARY's, not a copy of it. Keeping its class
+   * names means `react-multi-carousel/lib/styles.css` still paints the dot,
+   * still gives it the `:hover:active` press feedback no inline style can
+   * express, and leaves `--active` / `data-index` in place for the brand
+   * stylesheets, tests and analytics selectors written against them.
+   */
+  it('keeps the library class contract so its own stylesheet still applies', () => {
+    const inactive = dotFor(false).querySelector('li') as HTMLElement;
+    const activeItem = dotFor(true).querySelector('li') as HTMLElement;
+
+    expect(inactive.className).toBe('react-multi-carousel-dot');
+    expect(activeItem.className).toContain('react-multi-carousel-dot');
+    expect(activeItem.className).toContain('react-multi-carousel-dot--active');
+    expect(inactive.getAttribute('data-index')).toBe('1');
+  });
+
+  /*
+   * An inline declaration outranks every generated rule that is not
+   * `!important` — so a dot styled inline here would sit in front of the root
+   * and custom-CSS routes the panel also offers for this block.
+   */
+  it('writes no inline style, so nothing is in front of the panel', () => {
+    const dot = dotFor(false).querySelector('[data-part="dot"]') as HTMLElement;
+
+    expect(dot.getAttribute('style')).toBeNull();
+    expect((dotFor(false).querySelector('li') as HTMLElement).getAttribute('style')).toBeNull();
+  });
+
+  it('marks the active dot for aria as well as for the state chip', () => {
+    expect(
+      dotFor(true)
+        .querySelector('[data-part="dot"]')
+        ?.getAttribute('aria-current')
+    ).toBe('true');
+  });
+
+  it('goes to the slide it stands for', () => {
+    const onClick = jest.fn();
+    renderDots();
+    const { container } = render(
+      <ul>
+        {React.cloneElement(lastCarouselProps().customDot, {
+          index: 2,
+          active: false,
+          onClick
+        })}
+      </ul>
+    );
+
+    fireEvent.click(container.querySelector('[data-part="dot"]') as HTMLElement);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  /*
+   * The designer resolves which PART was clicked from a bubble handler on the
+   * block wrapper (`use-designer-features`). A `stopPropagation` here would
+   * have made the Dot panel this change exists to offer unreachable by
+   * clicking the dot — and the library's own dot never stopped the event.
+   */
+  it('lets the click bubble, or the canvas cannot select the dot', () => {
+    renderDots();
+    const onWrapper = jest.fn();
+    const { container } = render(
+      <div onClick={onWrapper}>
+        <ul>
+          {React.cloneElement(lastCarouselProps().customDot, {
+            index: 0,
+            active: false,
+            onClick: () => undefined
+          })}
+        </ul>
+      </div>
+    );
+
+    fireEvent.click(container.querySelector('[data-part="dot"]') as HTMLElement);
+    expect(onWrapper).toHaveBeenCalledTimes(1);
+  });
+
+  it('labels each dot for a screen reader, as the library did', () => {
+    const dot = dotFor(false).querySelector('[data-part="dot"]');
+
+    expect(dot?.getAttribute('aria-label')).toBe('Go to slide 2');
+  });
+});
+
+/**
+ * WHAT `getCSSStyles` HANDS BACK THAT AN INLINE STYLE OBJECT CANNOT USE.
+ *
+ * The hand-picked reader this replaced absorbed both of these silently, so they
+ * are regressions the widened path had to buy back rather than new features.
+ * Both have the same double failure: the declaration is thrown away by the CSS
+ * parser AND it still counts as "authored" to the placement tests, so the class
+ * default steps aside for nothing and the arrow lands somewhere neither the
+ * designer nor the old code would have put it.
+ */
+describe('SliderBlock — values the plate has to refuse', () => {
+  const arrow = (label: string, styles: Record<string, unknown>) =>
+    child(label === 'Left Arrow Icon' ? 'left' : 'right', {
+      type: 'icon',
+      label,
+      styles
+    });
+
+  const renderArrows = (
+    styles: Record<string, unknown>,
+    over: Record<string, unknown> = {}
+  ) =>
+    render(
+      <SliderBlock
+        {...props({
+          isDesigner: true,
+          block: {
+            ...props().block,
+            blocks: [
+              arrow('Left Arrow Icon', styles),
+              child('s1'),
+              arrow('Right Arrow Icon', styles)
+            ]
+          },
+          ...over
+        })}
+      />
+    );
+
+  const previous = (container: HTMLElement) =>
+    container.querySelector('button[aria-label="Previous"]') as HTMLElement;
+
+  // The panel's offset and corner boxes are free text, so '12' reaches the
+  // published JSON as often as '12px' does.
+  it('appends px to a unitless length stored as a string', () => {
+    const { container } = renderArrows({ left: '12', width: '28' });
+    const button = previous(container);
+
+    expect(button.style.left).toBe('12px');
+    expect(button.style.width).toBe('28px');
+    expect(button.className).not.toContain('left-4');
+  });
+
+  it('leaves a zero, a unit and a keyword alone', () => {
+    const { container } = renderArrows({
+      left: '0',
+      width: '100%',
+      height: '3rem',
+      'border-radius': '50%'
+    });
+    const style = previous(container).style;
+
+    expect(style.left).toBe('0px');
+    expect(style.width).toBe('100%');
+    expect(style.height).toBe('3rem');
+    expect(style.borderRadius).toBe('50%');
+  });
+
+  /*
+   * THE COMMONEST WAY TO GET AN EMPTY STRING, AND IT IS NOT A CLEARED FIELD.
+   * Authoring a value on Mobile only stores `{ mobile: … }` with no desktop
+   * sibling, and `getResponsiveValue` has no chain from desktop — so every
+   * desktop render of that key resolves to ''.
+   */
+  it('ignores a key authored at another breakpoint instead of wiping the default', () => {
+    const { container } = renderArrows({ top: { mobile: 20 } });
+    const button = previous(container);
+
+    expect(button.style.top).toBe('');
+    // The half that actually moved the arrow: the centring must not step aside
+    // for a declaration that paints nothing.
+    expect(button.className).toContain('top-1/2');
+    expect(button.className).toContain('-translate-y-1/2');
+  });
+
+  it('keeps the plate defaults when a field is cleared to an empty string', () => {
+    const { container } = renderArrows({
+      'border-radius': { desktop: '' },
+      width: { desktop: '' },
+      height: { desktop: '' }
+    });
+    const style = previous(container).style;
+
+    expect(style.borderRadius).toBe('50%');
+    expect(style.width).toBe('40px');
+    expect(style.height).toBe('40px');
+  });
+
+  /*
+   * `position` is what makes the arrow an overlay rather than a block after the
+   * track. It is offered on every icon block by `positionStyleControls`, it was
+   * inert before this, and honouring it now would drop published arrows out of
+   * the slider.
+   */
+  it('refuses an authored position, which would drop the arrow out of the overlay', () => {
+    const { container } = renderArrows({ position: 'relative' });
+    const button = previous(container);
+
+    expect(button.style.position).toBe('');
+    expect(button.className).toContain('absolute');
+  });
+
+  /*
+   * `-translate-y-1/2` is a class, and Tailwind 4 compiles it to the individual
+   * `translate` property — the one `getCSSStyles` drops so the generated
+   * `[data-block-id]` rule can render it. That rule matches this button now, so
+   * the centring is declared inline where it cannot lose.
+   */
+  it('pins the centring translate inline so the generated rule cannot move it', () => {
+    const { container } = renderArrows({});
+
+    expect(previous(container).style.translate).toBe('0 -50%');
+  });
+
+  it('drops the pin once the arrow is placed by an offset of its own', () => {
+    const { container } = renderArrows({ top: '0px' });
+
+    expect(previous(container).style.translate).toBeFalsy();
+  });
+
+  /*
+   * Tailwind implements `ring-*` as `box-shadow`, and `box-shadow` is one of
+   * the keys that now flows onto the plate — so the ring had to stop being one.
+   */
+  it('marks the selected arrow with an outline a box-shadow cannot erase', () => {
+    const { container } = renderArrows(
+      { 'box-shadow': '0 2px 8px rgba(0,0,0,0.4)' },
+      { selectedBlockId: 'left' }
+    );
+    const button = previous(container);
+
+    expect(button.style.outline).toBe('2px solid #3b82f6');
+    expect(button.style.boxShadow).toBe('0 2px 8px rgba(0,0,0,0.4)');
+    expect(button.className).not.toContain('ring-2');
+  });
+
+  it('leaves the outline off an arrow that is not selected', () => {
+    const { container } = renderArrows({});
+
+    expect(previous(container).style.outline).toBe('');
+  });
+});

package/src/blocks/slider-block.tsx

@@ -33,6 +33,67 @@ const parseNumber = (value: unknown, fallback: number) => {
 const clampNumber = (value: number, min: number, max: number) =>
   Math.min(Math.max(value, min), max);
 
+/**
+ * THE DOTS, WHICH WERE NOT OURS TO STYLE UNTIL NOW.
+ *
+ * `showDots` handed the whole pagination row to react-multi-carousel, and
+ * `dotListClass="slider-dots"` was the only hook back out — a class nothing in
+ * either repo has ever written a rule for. So the panel offered Show Dots and
+ * then nothing: no size, no colour, no shape, and above all no way to say what
+ * the ACTIVE one looks like, which is the whole job of a dot.
+ *
+ * `customDot` replaces the library's `<li>` with this one, and the button is
+ * named as a part — so every key the panel writes under `dot/…`, and
+ * `dot/selected/…` and `dot/hover/…` with it, is carried by the generated
+ * stylesheet exactly as the Slide part already is. Part declarations are
+ * emitted `!important` (`generatePartCSS`), which is what lets them win over
+ * the library's own rules below.
+ *
+ * NOTHING IS STYLED INLINE HERE, AND THE LIBRARY'S CLASS NAMES ARE KEPT.
+ *
+ * `react-multi-carousel/lib/styles.css` is imported at the top of this file and
+ * paints `.react-multi-carousel-dot button` and
+ * `.react-multi-carousel-dot--active button`. Reproducing those declarations
+ * inline instead — the first shape this took — quietly cost three things: the
+ * `:hover:active` press feedback, which no inline style can express; the
+ * `--active` and `data-index` hooks that brand stylesheets, integration tests
+ * and analytics selectors are written against; and it put an inline
+ * declaration in front of every part key that is not `!important`. Keeping the
+ * library's markup contract means the default dot is byte-for-byte the one
+ * that shipped, and the panel is layered cleanly on top of it.
+ *
+ * Declared at module scope, not inside the renderer: react-multi-carousel
+ * clones this element once per dot, and a component identity that changed every
+ * render would unmount and remount all of them on each slide change — taking
+ * the focus of a keyboard user who had just tabbed to one.
+ */
+const CustomDot = ({ index, active, onClick }: any) => (
+  <li
+    className={clsx(
+      'react-multi-carousel-dot',
+      active && 'react-multi-carousel-dot--active'
+    )}
+    data-index={index}
+  >
+    <button
+      type="button"
+      {...partAttrs('dot', { selected: Boolean(active) })}
+      // `aria-current` is also one of the expressions the `selected` state
+      // matches (see STATE_SELECTORS), so it earns its place twice.
+      aria-current={Boolean(active)}
+      aria-label={`Go to slide ${(index ?? 0) + 1}`}
+      /*
+       * No `stopPropagation`. The library's own dot did not stop the event
+       * either, and the designer canvas resolves which PART was clicked from a
+       * bubble handler on the block wrapper (`use-designer-features`) — so
+       * swallowing it here would have made the Dot panel this change exists to
+       * offer unreachable by clicking the dot.
+       */
+      onClick={() => onClick?.()}
+    />
+  </li>
+);
+
 const SliderBlock: React.FC<BlockRendererProps> = ({
   block,
   placeholderId,
@@ -547,16 +608,16 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
    * 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.
+   * utils/slider-arrows.tsx let the generated rule for this same `rotate` key
+   * turn 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.
+   * That divergence used to be free, because the button carried no
+   * `data-block-id` and the rule `collectBlockCSS` emits for this icon block
+   * matched nothing. The button carries one now — it is what lets borders,
+   * shadows, hover colours and part keys reach the plate — so the rule applies
+   * and would leave the glyph at twice the authored angle. `arrowPlateStyle`
+   * therefore pins `rotate: none` inline on the plate whenever this value is
+   * set, which is the "drop one of the two" this note used to ask for.
    */
   const leftArrowIconRotate = arrowAngle(
     getResponsiveValue(
@@ -605,105 +666,192 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
     alt: 'Next'
   };
 
-  const leftArrowBackground = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        leftArrowIconBlock?.styles?.['background'] ??
-          leftArrowIconBlock?.styles?.['backgroundColor'],
-        currentBreakpoint,
-        'rgba(0, 0, 0, 0.5)'
-      )
-    ),
-    themeSettings
-  );
+  /**
+   * THE ARROW PLATE, AND WHY IT STOPPED BEING A HAND-PICKED LIST.
+   *
+   * The geometry the panel offers used to be read key by key — width, height,
+   * the radius shorthand, its four corners, the four offsets, and the
+   * background — and every OTHER declaration a designer typed reached the theme
+   * JSON and stopped there. `border`, `box-shadow`, `padding`, `justify-content`
+   * and `align-items` were all stored, shown back in the panel, and silently
+   * dropped on the way to the button: the panel said the field had taken and
+   * the canvas said nothing had happened.
+   *
+   * The whole map goes through `getCSSStyles` now — the same call every other
+   * block renderer makes, and the one the slider SECTIONS' arrows already made
+   * (`utils/slider-arrows.tsx`, written for exactly this reason). Theme tokens
+   * resolve for free, because `getCSSStyles` runs every string through
+   * `resolveThemeCssVariables`.
+   *
+   * `size`, `color`, `opacity` and `rotate` stay bound to the glyph below.
+   * `getCSSStyles` already drops the last three for every block; `size` is not
+   * CSS at all, so it is removed here or it would render as an unknown
+   * declaration on the plate.
+   *
+   * `position` is removed for a different reason: it is not a styling choice.
+   * The arrow is chrome the block lays over the track, exactly as `absolute` in
+   * the class list says, and a `position: relative` sitting on an icon block —
+   * `positionStyleControls` offers it on every one of them — would drop the
+   * arrow out of the overlay and into the flow after the carousel. It was
+   * inert before this and stays inert.
+   */
+  const ARROW_GLYPH_ONLY_STYLE_KEYS = ['size'];
+  const ARROW_PLATE_REMOVED_STYLE_KEYS = ['position'];
 
-  const rightArrowBackground = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        rightArrowIconBlock?.styles?.['background'] ??
-          rightArrowIconBlock?.styles?.['backgroundColor'],
-        currentBreakpoint,
-        'rgba(0, 0, 0, 0.5)'
-      )
-    ),
-    themeSettings
-  );
+  /**
+   * WHAT `getCSSStyles` HANDS BACK THAT AN INLINE STYLE OBJECT CANNOT USE.
+   *
+   * Two shapes, both of which the hand-picked reader used to absorb silently
+   * and both of which would otherwise land on the button as a declaration the
+   * CSS parser throws away — while still counting as "authored" to the
+   * placement tests below, which is the half that actually moves the arrow.
+   *
+   * AN EMPTY STRING. `getCSSStyles` only drops `undefined` and `null`, and ''
+   * is what a cleared text field stores AND what `getResponsiveValue` returns
+   * for a key authored at one breakpoint only — `top: { mobile: 20 }` read at
+   * desktop is ''. Left in, it would overwrite the 40px/50% defaults it was
+   * supposed to fall back to, and make `style.top === undefined` false so the
+   * centring class stepped aside for a declaration that paints nothing.
+   *
+   * A UNITLESS NUMBER AS A STRING. The panel's offset and corner boxes are free
+   * text, so '12' reaches the JSON as often as '12px' (page-account-loyalty
+   * stores `"size": {"desktop": "8"}`), and published compositions hold it. The
+   * old `arrowLength` appended `px` to exactly this; React only does it for a
+   * real `number`, so without this the value is dropped and the class default
+   * is suppressed at the same time — the arrow lands at its static position,
+   * further from what the designer asked for than doing nothing would have been.
+   */
+  const ARROW_LENGTH_KEYS = new Set([
+    'width',
+    'height',
+    'minWidth',
+    'minHeight',
+    'maxWidth',
+    'maxHeight',
+    'left',
+    'right',
+    'top',
+    'bottom',
+    'borderRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius'
+  ]);
+
+  const usableArrowStyles = (
+    resolved: Record<string, unknown>
+  ): Record<string, unknown> => {
+    const usable: Record<string, unknown> = {};
+
+    Object.entries(resolved).forEach(([key, value]) => {
+      if (typeof value === 'string') {
+        const text = value.trim();
+        if (!text) return;
+
+        // '0' is already valid CSS and must not become '0px' — it is also the
+        // one bare number the old reader deliberately let through unchanged.
+        usable[key] =
+          ARROW_LENGTH_KEYS.has(key) && /^-?(?:\d+(?:\.\d+)?|\.\d+)$/.test(text)
+            ? `${text}px`
+            : text;
+        return;
+      }
 
-  // The arrow button's geometry used to live here and nowhere else — a 40px
-  // circle — so the panel could set the button's background and nothing else: a
-  // half-round tab, a square, a wider pill were all unreachable, and a Corner
-  // Radius typed in the editor was stored and then ignored. Geometry now comes
-  // from the arrow icon block's own styles, with the old circle as the default
-  // so a slider that authored none of it renders exactly as before.
-  //
-  // Only geometry is read. `color` and `opacity` stay bound to the icon image
-  // below; reading them here as well would apply each of them twice.
-  const arrowLength = (value: unknown): string | undefined => {
-    const text = String(value ?? '').trim();
-    if (!text) return undefined;
-    // A bare number is what the editor's numeric controls store; its free-text
-    // corner fields carry their own unit (`32px`, `50%`).
-    return /^-?\d*\.?\d+$/.test(text) ? `${text}px` : text;
+      if (value === undefined || value === null) return;
+      usable[key] = value;
+    });
+
+    return usable;
   };
 
-  const arrowGeometry = (iconBlock?: {
-    styles?: Record<string, unknown>;
-  }): React.CSSProperties => {
-    const styles = iconBlock?.styles ?? {};
-    const read = (key: string) => {
-      // Published JSON may carry either spelling of a two-word key.
-      const camelKey = key.replace(/-([a-z])/g, (_, letter: string) =>
-        letter.toUpperCase()
-      );
-      return arrowLength(
-        getResponsiveValue(
-          styles[key] ?? styles[camelKey],
-          currentBreakpoint,
-          ''
-        )
-      );
-    };
-
-    const corners: Record<string, string> = {};
-    (
-      [
-        ['border-top-left-radius', 'borderTopLeftRadius'],
-        ['border-top-right-radius', 'borderTopRightRadius'],
-        ['border-bottom-right-radius', 'borderBottomRightRadius'],
-        ['border-bottom-left-radius', 'borderBottomLeftRadius']
-      ] as const
-    ).forEach(([styleKey, cssProperty]) => {
-      const value = read(styleKey);
-      if (value) corners[cssProperty] = value;
-    });
+  /**
+   * The four corners, moved to the end of the declaration list.
+   *
+   * `border-radius` is a shorthand and resets all four corners, so a map that
+   * happens to list `border-top-left-radius` first would have it wiped by a
+   * shorthand declared after it. The cascade settles this by source order and
+   * an authored map carries whatever order the panel wrote its keys in, so the
+   * order is imposed here rather than trusted.
+   */
+  const ARROW_CORNER_KEYS = [
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius'
+  ] as const;
+
+  const arrowPlateStyle = (
+    iconBlock?: {
+      styles?: Record<string, unknown>;
+    },
+    /** True when the glyph below is already turning by the authored angle. */
+    glyphCarriesRotation?: boolean
+  ): React.CSSProperties => {
+    const authored = { ...(iconBlock?.styles ?? {}) };
+    [...ARROW_GLYPH_ONLY_STYLE_KEYS, ...ARROW_PLATE_REMOVED_STYLE_KEYS].forEach(
+      (key) => {
+        delete authored[key];
+      }
+    );
+
+    const resolved = usableArrowStyles(
+      getCSSStyles(authored, themeSettings, currentBreakpoint) as Record<
+        string,
+        unknown
+      >
+    );
 
-    const geometry: React.CSSProperties = {
-      width: read('width') ?? '40px',
-      height: read('height') ?? '40px'
-    };
-
-    // The shorthand is written before the corners so an authored corner
-    // overrides just that corner, the way the cascade does. The 50% default
-    // only stands in when no radius was authored at all — otherwise rounding
-    // one corner would leave the other three on the legacy circle.
-    const radius = read('border-radius');
-    if (radius) geometry.borderRadius = radius;
-    else if (Object.keys(corners).length === 0) geometry.borderRadius = '50%';
-
-    // The editor offers these four on the arrow's icon block, but only the
-    // sizes above were ever read — so an authored offset reached the theme
-    // JSON and stopped there, leaving the arrow pinned to the class default
-    // with no feedback that the field did nothing.
-    (['left', 'right', 'top', 'bottom'] as const).forEach((key) => {
-      const value = read(key);
-      if (value) geometry[key] = value;
+    const corners: Record<string, unknown> = {};
+    ARROW_CORNER_KEYS.forEach((key) => {
+      if (resolved[key] === undefined) return;
+      corners[key] = resolved[key];
+      delete resolved[key];
     });
 
-    return { ...geometry, ...corners };
+    // The legacy circle, and only when no radius was authored at all —
+    // otherwise rounding one corner would leave the other three round.
+    const hasRadius =
+      resolved.borderRadius !== undefined || Object.keys(corners).length > 0;
+
+    return {
+      // Defaults first, so every one of them is something the panel can simply
+      // replace. The 40px circle is what this block has always drawn, which is
+      // what keeps a slider that authored none of this rendering as before.
+      width: '40px',
+      height: '40px',
+      ...(hasRadius ? null : { borderRadius: '50%' }),
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      border: 'none',
+      cursor: 'pointer',
+      padding: 0,
+      ...resolved,
+      ...corners,
+      /*
+       * THE ONE DECLARATION THAT HAS TO WIN OVER THE GENERATED SHEET.
+       *
+       * `getCSSStyles` drops `rotate` for every block because the generated
+       * `[data-block-id]` rule renders it instead — and the button now carries
+       * that id, so that rule finally matches. The glyph below is still turned
+       * inline, on purpose (see `arrowAngle`: the designer wants the ARROW
+       * pointing the other way, not the plate behind it turning with it), and
+       * the two together would leave the arrow at twice the authored angle.
+       * This is the "drop one of the two" the note there asked for, and it is
+       * the plate's copy that goes: inline beats the sheet, and `none` is the
+       * property's own initial value.
+       */
+      ...(glyphCarriesRotation ? { rotate: 'none' } : null)
+    } as React.CSSProperties;
   };
 
-  const leftArrowButtonStyle = arrowGeometry(leftArrowIconBlock);
-  const rightArrowButtonStyle = arrowGeometry(rightArrowIconBlock);
+  const leftArrowButtonStyle = arrowPlateStyle(
+    leftArrowIconBlock,
+    Boolean(leftArrowIconRotate)
+  );
+  const rightArrowButtonStyle = arrowPlateStyle(
+    rightArrowIconBlock,
+    Boolean(rightArrowIconRotate)
+  );
 
   /**
    * What the arrows-on-hover option adds to every arrow button.
@@ -731,18 +879,31 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
    * over-constrains the box and CSS drops the `right`, and the centering
    * translate would shift an authored `top` by half the button's height.
    */
+  const isArrowVerticallyCentred = (style: React.CSSProperties) =>
+    style.top === undefined && style.bottom === undefined;
+
   const arrowPlacementClass = (
     style: React.CSSProperties,
     horizontalFallback: string
   ) =>
     clsx(
-      'absolute z-10',
+      // The centring moved OUT of the inline style object and into the class
+      // list, which is the whole reason `justify-content` and `align-items`
+      // now reach the button: written inline after the authored map, as they
+      // were, they overwrote whatever the designer had just typed. A class
+      // loses to any inline declaration, so the default still centres an arrow
+      // nobody has touched and steps aside for one they have.
+      //
+      // These four are safe to leave as classes where a colour or a size would
+      // not be: the header note above warns that a brand whose Tailwind
+      // `content` skips this package never generates a class only this file
+      // writes, and `flex`/`items-center`/`justify-center`/`z-10` are in every
+      // brand's own source — as `left-4` and `top-1/2` already were.
+      'absolute z-10 flex items-center justify-center',
       style.left === undefined && style.right === undefined
         ? horizontalFallback
         : undefined,
-      style.top === undefined && style.bottom === undefined
-        ? 'top-1/2 -translate-y-1/2'
-        : undefined
+      isArrowVerticallyCentred(style) ? 'top-1/2 -translate-y-1/2' : undefined
     );
 
   const arrowsOutside =
@@ -765,89 +926,114 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
     carouselRef.current?.next?.(1);
   };
 
-  const CustomLeftArrow = ({ onClick }: any) => (
-    <button
-      onClick={(e) => {
-        e.stopPropagation();
-        if (!isDesigner) {
-          onClick?.();
-        }
-        handleLeftArrowClick(e);
-      }}
-      className={clsx(
-        arrowPlacementClass(leftArrowButtonStyle, 'left-4'),
-        isDesigner &&
-          selectedBlockId === leftArrowIconBlock?.id &&
-          'ring-2 ring-blue-500 ring-offset-2'
-      )}
-      style={{
-        backgroundColor: leftArrowBackground,
-        border: 'none',
-        ...leftArrowButtonStyle,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'pointer',
-        padding: 0,
-        ...arrowRevealStyle
-      }}
-      aria-label="Previous"
-    >
-      <img
-        src={leftArrowIcon.url}
-        alt={leftArrowIcon.alt}
-        style={{
-          width: `${leftArrowIconSize}px`,
-          height: `${leftArrowIconSize}px`,
-          opacity: leftArrowIconOpacity,
-          rotate: leftArrowIconRotate,
-          pointerEvents: 'none'
-        }}
-      />
-    </button>
-  );
+  /**
+   * ONE ARROW, DRAWN IN ONE PLACE.
+   *
+   * There used to be four copies of this markup — the two the carousel gets as
+   * `customLeftArrow`/`customRightArrow`, and the two the block draws itself
+   * for the designer canvas and for arrows placed outside the track. Four
+   * copies of a style object is four chances for a fix to land in three of
+   * them, which is how the canvas and the storefront drift apart on a block
+   * whose entire job is to show the merchant what the shopper will see.
+   */
+  const renderArrowButton = (
+    direction: 'left' | 'right',
+    onActivate: (event: React.MouseEvent) => void
+  ) => {
+    const isLeft = direction === 'left';
+    const iconBlock = isLeft ? leftArrowIconBlock : rightArrowIconBlock;
+    const plateStyle = isLeft ? leftArrowButtonStyle : rightArrowButtonStyle;
+    const glyph = isLeft ? leftArrowIcon : rightArrowIcon;
+    const glyphSize = isLeft ? leftArrowIconSize : rightArrowIconSize;
+    const glyphOpacity = isLeft ? leftArrowIconOpacity : rightArrowIconOpacity;
+    const glyphRotate = isLeft ? leftArrowIconRotate : rightArrowIconRotate;
 
-  const CustomRightArrow = ({ onClick }: any) => (
-    <button
-      onClick={(e) => {
-        e.stopPropagation();
-        if (!isDesigner) {
-          onClick?.();
-        }
-        handleRightArrowClick(e);
-      }}
-      className={clsx(
-        arrowPlacementClass(rightArrowButtonStyle, 'right-4'),
-        isDesigner &&
-          selectedBlockId === rightArrowIconBlock?.id &&
-          'ring-2 ring-blue-500 ring-offset-2'
-      )}
-      style={{
-        backgroundColor: rightArrowBackground,
-        border: 'none',
-        ...rightArrowButtonStyle,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'pointer',
-        padding: 0,
-        ...arrowRevealStyle
-      }}
-      aria-label="Next"
-    >
-      <img
-        src={rightArrowIcon.url}
-        alt={rightArrowIcon.alt}
+    return (
+      <button
+        type="button"
+        /*
+         * WHAT MAKES THE REST OF THE PANEL REACH THIS BUTTON.
+         *
+         * The arrow icon blocks are filtered out of `sortedBlocks`, so nothing
+         * in the DOM ever carried their id — while `collectBlockCSS` walks
+         * every block in the tree and had been emitting
+         * `[data-block-id="…"]` rules for them all along. Every hover colour,
+         * part key and line of custom CSS authored on an arrow was therefore
+         * generated into the stylesheet and matched nothing at all. The
+         * section arrows in `utils/slider-arrows.tsx` already carry this.
+         */
+        data-block-id={iconBlock?.id}
+        onClick={onActivate}
+        className={arrowPlacementClass(
+          plateStyle,
+          isLeft ? 'left-4' : 'right-4'
+        )}
         style={{
-          width: `${rightArrowIconSize}px`,
-          height: `${rightArrowIconSize}px`,
-          opacity: rightArrowIconOpacity,
-          rotate: rightArrowIconRotate,
-          pointerEvents: 'none'
+          ...plateStyle,
+          /*
+           * THE CENTRING TRANSLATE, PINNED FOR THE SAME REASON AS `rotate`.
+           *
+           * `-translate-y-1/2` is a class, and Tailwind 4 compiles it to the
+           * individual `translate` property — the very property `getCSSStyles`
+           * drops so the generated `[data-block-id]` rule can render it. That
+           * rule now matches this button, ties the class on specificity, and
+           * is settled by stylesheet order: a designer who types anything into
+           * the Rotate box's neighbour would find the arrow jump to the top of
+           * the track rather than nudge. Declared inline, the centring is the
+           * class's own value and cannot lose — which also means an authored
+           * `translate` stays as inert as it was before any of this, rather
+           * than becoming a new way to break the arrow.
+           */
+          ...(isArrowVerticallyCentred(plateStyle)
+            ? { translate: '0 -50%' }
+            : null),
+          ...arrowRevealStyle,
+          /*
+           * The canvas selection ring, as an OUTLINE rather than Tailwind's
+           * `ring-*`. Tailwind implements a ring as `box-shadow`, and
+           * `box-shadow` is one of the keys that now flows onto the plate — so
+           * the first designer to give an arrow a drop shadow would lose the
+           * only affordance telling them which arrow is selected. An outline
+           * is a property nothing else here writes.
+           */
+          ...(selectedBlockId === iconBlock?.id
+            ? { outline: '2px solid #3b82f6', outlineOffset: '2px' }
+            : null)
         }}
-      />
-    </button>
-  );
+        aria-label={isLeft ? 'Previous' : 'Next'}
+      >
+        <img
+          src={glyph.url}
+          alt={glyph.alt}
+          style={{
+            width: `${glyphSize}px`,
+            height: `${glyphSize}px`,
+            opacity: glyphOpacity,
+            rotate: glyphRotate,
+            pointerEvents: 'none'
+          }}
+        />
+      </button>
+    );
+  };
+
+  const CustomLeftArrow = ({ onClick }: any) =>
+    renderArrowButton('left', (e) => {
+      e.stopPropagation();
+      if (!isDesigner) {
+        onClick?.();
+      }
+      handleLeftArrowClick(e);
+    });
+
+  const CustomRightArrow = ({ onClick }: any) =>
+    renderArrowButton('right', (e) => {
+      e.stopPropagation();
+      if (!isDesigner) {
+        onClick?.();
+      }
+      handleRightArrowClick(e);
+    });
 
   if (visibleCount === 0) {
     return (
@@ -922,6 +1108,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
                 visibleCount > itemsShown
           }
           showDots={Boolean(showDots)}
+          customDot={<CustomDot />}
           renderDotsOutside={Boolean(showDots)}
           infinite={Boolean(useInfinite)}
           rewind={Boolean(useInfinite)}
@@ -1033,71 +1220,8 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
         leftArrowIconBlock &&
         rightArrowIconBlock ? (
           <>
-            <button
-              onClick={handleLeftArrowClick}
-              className={clsx(
-                arrowPlacementClass(leftArrowButtonStyle, 'left-4'),
-                selectedBlockId === leftArrowIconBlock?.id &&
-                  'ring-2 ring-blue-500 ring-offset-2'
-              )}
-              style={{
-                backgroundColor: leftArrowBackground,
-                border: 'none',
-                ...leftArrowButtonStyle,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                cursor: 'pointer',
-                padding: 0,
-                ...arrowRevealStyle
-              }}
-              aria-label="Previous"
-            >
-              <img
-                src={leftArrowIcon.url}
-                alt={leftArrowIcon.alt}
-                style={{
-                  width: `${leftArrowIconSize}px`,
-                  height: `${leftArrowIconSize}px`,
-                  opacity: leftArrowIconOpacity,
-                  rotate: leftArrowIconRotate,
-                  pointerEvents: 'none'
-                }}
-              />
-            </button>
-
-            <button
-              onClick={handleRightArrowClick}
-              className={clsx(
-                arrowPlacementClass(rightArrowButtonStyle, 'right-4'),
-                selectedBlockId === rightArrowIconBlock?.id &&
-                  'ring-2 ring-blue-500 ring-offset-2'
-              )}
-              style={{
-                backgroundColor: rightArrowBackground,
-                border: 'none',
-                ...rightArrowButtonStyle,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                cursor: 'pointer',
-                padding: 0,
-                ...arrowRevealStyle
-              }}
-              aria-label="Next"
-            >
-              <img
-                src={rightArrowIcon.url}
-                alt={rightArrowIcon.alt}
-                style={{
-                  width: `${rightArrowIconSize}px`,
-                  height: `${rightArrowIconSize}px`,
-                  opacity: rightArrowIconOpacity,
-                  rotate: rightArrowIconRotate,
-                  pointerEvents: 'none'
-                }}
-              />
-            </button>
+            {renderArrowButton('left', handleLeftArrowClick)}
+            {renderArrowButton('right', handleRightArrowClick)}
           </>
         ) : null}
       </div>