From 5a914318f592902086c4691e9a7055a7309de3a3 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Mon, 28 Sep 2026 07:20:55 -0300
Subject: [PATCH 1/2] feat(webkit): add the band-stack marketing component

---
 .specs/band-stack.md                          | 159 ++++++++++++++++++
 .../marketing/band-stack/BandStack.stories.js | 144 ++++++++++++++++
 packages/webkit/.size-limit.json              |   5 +
 packages/webkit/catalog.json                  |  57 +++++++
 packages/webkit/package.json                  |   1 +
 .../marketing/band-stack/band-stack.test.ts   | 105 ++++++++++++
 .../marketing/band-stack/band-stack.vue       |  77 +++++++++
 7 files changed, 548 insertions(+)
 create mode 100644 .specs/band-stack.md
 create mode 100644 apps/storybook/src/stories/components/marketing/band-stack/BandStack.stories.js
 create mode 100644 packages/webkit/src/components/marketing/band-stack/band-stack.test.ts
 create mode 100644 packages/webkit/src/components/marketing/band-stack/band-stack.vue

diff --git a/.specs/band-stack.md b/.specs/band-stack.md
new file mode 100644
index 000000000..f2ee288ba
--- /dev/null
+++ b/.specs/band-stack.md
@@ -0,0 +1,159 @@
+---
+name: band-stack
+category: marketing
+structure: monolithic
+status: implemented
+spec_version: 1
+created: 2026-09-26
+last_updated: 2026-09-26
+checksum: 849b303b628b4104ccac10b54d80e9a4876f5ac61d916adb096ee801e8852485
+---
+
+# Band Stack — Component Spec
+
+## Purpose
+
+A run of framed bands that follow one another down the page, each one its own registration frame sharing a hairline with the next. With `sticky` on, each band pins under the site header a step lower than the band before it, so the run piles up as the reader scrolls and every band already read stays visible as a ledge above the one being read.
+
+The component owns the frames, the shared hairlines and the pin offsets; the bands themselves are whatever the consumer composes into the default slot — each direct child becomes one band. It carries no copy, heading or media of its own.
+
+## When to use
+
+- For a run of peer bands — three to six `media-split`s, one per solution or capability — that should read as one sequence.
+- With `sticky`, when the run is the page's centrepiece and the reader should feel each band land on the last.
+- Without `sticky`, to frame a run of bands with one shared hairline between neighbours, with no pinning.
+
+## When NOT to use
+
+- For a run where the scroll position should decide which claim is open beside one media pane → use `sticky-stack`.
+- For peer claims a reader jumps between at will → use `media-tabs`.
+- For a single band → frame it with `frame-box` directly, or set `framed` on the `media-split`.
+- For a grid of cards → use `card-grid`.
+
+## Related
+
+- `media-split` — the band this stack most often holds, typically at `size="large"`.
+- `sticky-stack` — the scroll-driven sibling: one pinned frame whose open claim follows the scroll, instead of bands that pile up.
+- `frame-box` — the frame each band is drawn in.
+- `section-gap` — the spacer usually above the stack; pass `flush` so the first band does not draw a second rule under it.
+
+## Best practices
+
+- Keep the run to three to six bands. With `sticky` every band read stays pinned as a ledge, and a long run fills the viewport with ledges.
+- Give every band the same height class (`media-split` `size="large"`, same `align`), so the ledges line up as the pile grows.
+- Pass `flush` when the element directly above the stack already draws a rule (a `section-gap`, another frame), so the first band does not draw a second one.
+- Give each band an opaque fill (`media-split` paints its own cells). A pinned band covers the one before it, and a transparent band shows the one underneath through it.
+- Render the bands with `v-for` directly in the default slot; each direct child is one band, so a wrapper element around them collapses the run into a single band.
+
+## Usage
+
+```vue
+<script setup>
+  import BandStack from '@aziontech/webkit/band-stack'
+  import MediaSplit from '@aziontech/webkit/media-split'
+</script>
+
+<template>
+  <BandStack sticky flush>
+    <MediaSplit
+      title="Build and Run Applications"
+      description="Deploy applications and static sites straight from Git."
+      size="large"
+      align="center"
+      :heading-level="3"
+      media-href="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/site/solutions"
+    />
+    <MediaSplit
+      title="Secure Applications and Networks"
+      description="Stop DDoS attacks, bots and exploits before they reach your origin."
+      size="large"
+      align="center"
+      :heading-level="3"
+      media-href="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/site/solutions"
+    />
+  </BandStack>
+</template>
+```
+
+## Props
+
+| Prop     | Type      | Default | Required | JSDoc                                                                                                                                      |
+| -------- | --------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `sticky` | `boolean` | `false` | false    | Pin each band under the site header from `lg` up, a step lower than the band before it, so the run piles up as the page scrolls.           |
+| `flush`  | `boolean` | `false` | false    | Drop the first band's top rule, for a stack sitting directly under an element that already draws one.                                      |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| Slot      | Scope | Notes                                                                                                                                               |
+| --------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `default` | —     | The bands. Each direct child — including every child a `v-for` renders — is wrapped in its own frame and becomes one band; comment nodes are skipped. |
+
+## States
+
+- Visual states: `default`
+- `data-sticky` mirrors the `sticky` prop and is what pins the bands: from `lg` up each band is `position: sticky`, its `top` the site header's height plus one `var(--spacing-md)` step per band before it. Below `lg` the bands stack in normal flow with no pinning, because a pinned pile of full-width bands leaves a phone no room to read
+- `data-flush` mirrors the `flush` prop; the first band's frame then draws no top rule
+- Each band is a `frame-box` with its top and bottom rules and all four registration marks. Every band after the first pulls up one pixel so neighbouring rules overlap into a single hairline, while each band still owns its top rule — the rule a pinned band shows when it covers the one before it
+- The pin offset is owned by the component, not the page: the stack pins below the site header's `3.5rem` bar, and a page sets nothing to get it
+- Later bands paint over earlier ones in DOM order, so the pile grows downward with no `z-index` of its own
+
+## Motion & Animations
+
+_none_ — pinning follows the scroll position; the component declares no transition or animation.
+
+## Tokens
+
+| Region                        | Token (DESIGN.md)                                      |
+| ----------------------------- | ------------------------------------------------------ |
+| band rules and marks          | `var(--border-default)` (drawn by `frame-box`)          |
+| pin step between bands        | `var(--spacing-md)`                                    |
+| pin start (site header height) | `calc(var(--spacing) * 14)` — see Theme gaps           |
+
+## Theme gaps
+
+| Figma variable        | Temporary primitive                                                        | Follow-up         |
+| --------------------- | -------------------------------------------------------------------------- | ----------------- |
+| site header height    | `calc(var(--spacing) * 14)`, the same `3.5rem` `global-header` sets with `h-14` | `TODO: tokenizar` |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: not applicable to the stack; controls inside each band keep their own `focus-visible` ring.
+- Keyboard map: none of its own — `Tab` moves through each band's controls in DOM order, band by band.
+- ARIA: the stack is a plain `div` with no role; each band keeps its own semantics (`media-split` is a `section` named by its heading).
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons): not applicable — the stack draws only rules; each band owns its text contrast.
+- `motion-reduce:transition-none motion-reduce:transform-none` — not applicable, the stack declares no motion. Pinning is scroll position, not animation.
+- Touch target — not applicable; the stack composes no control of its own.
+
+## Stories (Storybook)
+
+- Default — three `media-split` bands at `size="large"`, not pinned, so the frames and the shared hairlines are the only thing on show.
+- Sticky — the same run with `sticky` and `flush` on. It sets `parameters.layout: 'fullscreen'`; a story cannot scroll itself, so the canvas shows the resting state and the reader scrolls the Docs page to see the pile form.
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export points at `index.ts`, and a standalone `./<name>-root` export points at the root `.vue` (tree-shaking). Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/apps/storybook/src/stories/components/marketing/band-stack/BandStack.stories.js b/apps/storybook/src/stories/components/marketing/band-stack/BandStack.stories.js
new file mode 100644
index 000000000..d4b0f9d83
--- /dev/null
+++ b/apps/storybook/src/stories/components/marketing/band-stack/BandStack.stories.js
@@ -0,0 +1,144 @@
+import BandStack from '@aziontech/webkit/band-stack'
+import Illustration from '@aziontech/webkit/illustration'
+import MediaSplit from '@aziontech/webkit/media-split'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = [
+  "import BandStack from '@aziontech/webkit/band-stack'",
+  "import Illustration from '@aziontech/webkit/illustration'",
+  "import MediaSplit from '@aziontech/webkit/media-split'"
+]
+
+const BANDS = [
+  {
+    title: 'Build and Run Applications',
+    description: 'Deploy applications and static sites straight from Git.',
+    scene: 'ai-applications'
+  },
+  {
+    title: 'Secure Applications and Networks',
+    description: 'Stop DDoS attacks, bots and exploits before they reach your origin.',
+    scene: 'deploy-secure-mcp-server'
+  },
+  {
+    title: 'Observe Every Request',
+    description: 'Follow logs, metrics and events from every location as they happen.',
+    scene: 'live-debugging'
+  }
+]
+
+const BANDS_MARKUP = BANDS.map(
+  (band) => `  <MediaSplit
+    title="${band.title}"
+    description="${band.description}"
+    size="large"
+    align="center"
+    :heading-level="3"
+  >
+    <template #media>
+      <Illustration name="${band.scene}" />
+    </template>
+  </MediaSplit>`
+).join('\n')
+
+/** @type {import('@storybook/vue3').Meta<typeof BandStack>} */
+const meta = {
+  title: 'Components/Marketing/BandStack',
+  component: BandStack,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: true }]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'A run of framed bands that follow one another down the page, each one its own registration frame sharing a hairline with the next. With `sticky` on, each band pins under the site header a step lower than the band before it, so the run piles up as the reader scrolls and every band already read stays visible as a ledge above the one being read. The stack owns the frames, the shared hairlines and the pin offsets; each direct child of the default slot becomes one band, and the stack carries no copy, heading or media of its own.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    sticky: {
+      control: 'boolean',
+      description:
+        'Pin each band under the site header from `lg` up, a step lower than the band before it, so the run piles up as the page scrolls.',
+      table: {
+        category: 'props',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' }
+      }
+    },
+    flush: {
+      control: 'boolean',
+      description:
+        "Drop the first band's top rule, for a stack sitting directly under an element that already draws one.",
+      table: {
+        category: 'props',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' }
+      }
+    },
+    default: {
+      control: false,
+      description:
+        'The bands. Each direct child, including every child a `v-for` renders, is wrapped in its own frame and becomes one band; comment nodes are skipped.',
+      table: { category: 'slots' }
+    }
+  },
+  args: {
+    sticky: false,
+    flush: false
+  }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { BandStack, Illustration, MediaSplit },
+  setup() {
+    return { args }
+  },
+  template: `<BandStack v-bind="args">\n${BANDS_MARKUP}\n</BandStack>`
+})
+
+const DEFAULT_MARKUP = `<BandStack>\n${BANDS_MARKUP}\n</BandStack>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof BandStack>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Three `MediaSplit` bands at `size="large"`, not pinned, so the frames and the shared hairlines are the only thing on show. Every band after the first pulls up one pixel, so neighbouring rules overlap into a single hairline while each band keeps its own registration marks. Turn on `sticky` or `flush` in the Controls panel to see the pinned run or the first band without its top rule.'
+      },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const STICKY_TEMPLATE = `<BandStack sticky flush>\n${BANDS_MARKUP}\n</BandStack>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof BandStack>} */
+export const Sticky = {
+  render: () => ({
+    components: { BandStack, Illustration, MediaSplit },
+    template: STICKY_TEMPLATE
+  }),
+  parameters: {
+    layout: 'fullscreen',
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'The same run with `sticky` and `flush` on. From `lg` up each band pins under the site header one spacing step lower than the band before it, so the bands already read stay visible as ledges above the one being read; below `lg` they stack in normal flow. A story cannot scroll itself, so the canvas shows the resting state — scroll the Docs page to see the pile form.'
+      },
+      source: { code: toSfc(IMPORT, STICKY_TEMPLATE) }
+    }
+  }
+}
diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index dbcbf8e11..a300f4309 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -134,6 +134,11 @@
     "path": "src/components/layout/resizable-panel/resizable-panel.vue",
     "limit": "3 KB"
   },
+  {
+    "name": "band-stack",
+    "path": "src/components/marketing/band-stack/band-stack.vue",
+    "limit": "2.5 KB"
+  },
   {
     "name": "illustration",
     "path": "src/components/content/illustration/illustration.vue",
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 039f4a19f..d1ea80d04 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -9930,6 +9930,63 @@
       "parent": "sidebar",
       "treeShakeableImport": "@aziontech/webkit/sidebar-footer"
     },
+    "band-stack": {
+      "import": "@aziontech/webkit/band-stack",
+      "target": "./src/components/marketing/band-stack/band-stack.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/band-stack",
+      "category": "marketing",
+      "structure": "monolithic",
+      "status": "implemented",
+      "props": [
+        {
+          "name": "sticky",
+          "type": "boolean",
+          "default": "false",
+          "required": "false",
+          "doc": "Pin each band under the site header from `lg` up, a step lower than the band before it, so the run piles up as the page scrolls."
+        },
+        {
+          "name": "flush",
+          "type": "boolean",
+          "default": "false",
+          "required": "false",
+          "doc": "Drop the first band's top rule, for a stack sitting directly under an element that already draws one."
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "The bands. Each direct child — including every child a `v-for` renders — is wrapped in its own frame and becomes one band; comment nodes are skipped."
+        }
+      ],
+      "purpose": "A run of framed bands that follow one another down the page, each one its own registration frame sharing a hairline with the next. With `sticky` on, each band pins under the site header a step lower than the band before it, so the run piles up as the reader scrolls and every band already read stays visible as a ledge above the one being read. The component owns the frames, the shared hairlines and the pin offsets; the bands themselves are whatever the consumer composes into the default slot — each direct child becomes one band. It carries no copy, heading or media of its own.",
+      "useWhen": [
+        "For a run of peer bands — three to six `media-split`s, one per solution or capability — that should read as one sequence.",
+        "With `sticky`, when the run is the page's centrepiece and the reader should feel each band land on the last.",
+        "Without `sticky`, to frame a run of bands with one shared hairline between neighbours, with no pinning."
+      ],
+      "avoidWhen": [
+        "For a run where the scroll position should decide which claim is open beside one media pane → use `sticky-stack`.",
+        "For peer claims a reader jumps between at will → use `media-tabs`.",
+        "For a single band → frame it with `frame-box` directly, or set `framed` on the `media-split`.",
+        "For a grid of cards → use `card-grid`."
+      ],
+      "related": [
+        "media-split` — the band this stack most often holds, typically at `size=\"large\"`.",
+        "sticky-stack` — the scroll-driven sibling: one pinned frame whose open claim follows the scroll, instead of bands that pile up.",
+        "frame-box` — the frame each band is drawn in.",
+        "section-gap` — the spacer usually above the stack; pass `flush` so the first band does not draw a second rule under it."
+      ],
+      "bestPractices": [
+        "Keep the run to three to six bands. With `sticky` every band read stays pinned as a ledge, and a long run fills the viewport with ledges.",
+        "Give every band the same height class (`media-split` `size=\"large\"`, same `align`), so the ledges line up as the pile grows.",
+        "Pass `flush` when the element directly above the stack already draws a rule (a `section-gap`, another frame), so the first band does not draw a second one.",
+        "Give each band an opaque fill (`media-split` paints its own cells). A pinned band covers the one before it, and a transparent band shows the one underneath through it.",
+        "Render the bands with `v-for` directly in the default slot; each direct child is one band, so a wrapper element around them collapses the run into a single band."
+      ]
+    },
     "breadcrumb": {
       "import": "@aziontech/webkit/breadcrumb",
       "target": "./src/components/navigation/breadcrumb/index.js",
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index d69e67e99..fa365a88e 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -279,6 +279,7 @@
     "./sidebar-group": "./src/components/layout/sidebar/sidebar-group.vue",
     "./sidebar-header": "./src/components/layout/sidebar/sidebar-header.vue",
     "./sidebar-footer": "./src/components/layout/sidebar/sidebar-footer.vue",
+    "./band-stack": "./src/components/marketing/band-stack/band-stack.vue",
     "./breadcrumb": "./src/components/navigation/breadcrumb/index.js",
     "./breadcrumb-item": "./src/components/navigation/breadcrumb-item/breadcrumb-item.vue",
     "./link": "./src/components/navigation/link/link.vue",
diff --git a/packages/webkit/src/components/marketing/band-stack/band-stack.test.ts b/packages/webkit/src/components/marketing/band-stack/band-stack.test.ts
new file mode 100644
index 000000000..c99e91a6d
--- /dev/null
+++ b/packages/webkit/src/components/marketing/band-stack/band-stack.test.ts
@@ -0,0 +1,105 @@
+import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+import { createCommentVNode, Fragment, h } from 'vue'
+
+import { expectNoA11yViolations } from '../../../test/axe'
+import BandStack from './band-stack.vue'
+
+const TESTID = 'marketing-band-stack'
+const BAND = `[data-testid="${TESTID}__band"]`
+
+const band = (label: string) => h('p', label)
+
+const renderStack = (props: Record<string, unknown> = {}, attrs: Record<string, unknown> = {}) =>
+  render(BandStack, {
+    props,
+    attrs,
+    slots: { default: () => [band('One'), band('Two'), band('Three')] }
+  })
+
+describe('BandStack', () => {
+  it('renders with the default testid', () => {
+    const { getByTestId } = renderStack()
+
+    expect(getByTestId(TESTID)).toBeInTheDocument()
+  })
+
+  it('lets a consumer data-testid win over the fallback', () => {
+    const { getByTestId, queryByTestId } = renderStack({}, { 'data-testid': 'solutions-stack' })
+
+    expect(getByTestId('solutions-stack')).toBeInTheDocument()
+    expect(queryByTestId(TESTID)).toBeNull()
+    expect(
+      getByTestId('solutions-stack').querySelectorAll('[data-testid="solutions-stack__band"]')
+    ).toHaveLength(3)
+  })
+
+  it('wraps each direct child in its own frame', () => {
+    const { getByTestId } = renderStack()
+    const frames = getByTestId(TESTID).querySelectorAll(BAND)
+
+    expect(frames).toHaveLength(3)
+    expect([...frames].map((frame) => frame.textContent)).toEqual(['One', 'Two', 'Three'])
+  })
+
+  it('gives every child of a v-for style array and of a Fragment its own band, skipping comments', () => {
+    const { getByTestId } = render(BandStack, {
+      slots: {
+        default: () => [
+          band('Lead'),
+          createCommentVNode('v-if'),
+          [band('Loop one'), band('Loop two')],
+          h(Fragment, [band('Fragment one'), createCommentVNode('skip'), band('Fragment two')])
+        ]
+      }
+    })
+    const frames = getByTestId(TESTID).querySelectorAll(BAND)
+
+    expect([...frames].map((frame) => frame.textContent)).toEqual([
+      'Lead',
+      'Loop one',
+      'Loop two',
+      'Fragment one',
+      'Fragment two'
+    ])
+  })
+
+  it('renders no band for an empty slot', () => {
+    const { getByTestId } = render(BandStack)
+
+    expect(getByTestId(TESTID).querySelectorAll(BAND)).toHaveLength(0)
+  })
+
+  it('sets data-sticky only when sticky is on', async () => {
+    const { getByTestId, rerender } = renderStack()
+
+    expect(getByTestId(TESTID)).not.toHaveAttribute('data-sticky')
+
+    await rerender({ sticky: true })
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-sticky')
+  })
+
+  it('leaves every frame unflushed by default', () => {
+    const { getByTestId } = renderStack()
+    const frames = getByTestId(TESTID).querySelectorAll(BAND)
+
+    expect(getByTestId(TESTID)).not.toHaveAttribute('data-flush')
+    for (const frame of frames) expect(frame).not.toHaveAttribute('data-flush')
+  })
+
+  it('flushes only the first frame when flush is on', () => {
+    const { getByTestId } = renderStack({ flush: true })
+    const [first, ...rest] = [...getByTestId(TESTID).querySelectorAll(BAND)]
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-flush')
+    expect(first).toHaveAttribute('data-flush')
+    for (const frame of rest) expect(frame).not.toHaveAttribute('data-flush')
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = renderStack()
+
+    await expectNoA11yViolations(container)
+  })
+})
diff --git a/packages/webkit/src/components/marketing/band-stack/band-stack.vue b/packages/webkit/src/components/marketing/band-stack/band-stack.vue
new file mode 100644
index 000000000..aa9213063
--- /dev/null
+++ b/packages/webkit/src/components/marketing/band-stack/band-stack.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+  import type { VNode, VNodeArrayChildren } from 'vue'
+  import { Comment, computed, createTextVNode, Fragment, Text, useAttrs } from 'vue'
+
+  import FrameBox from '../../layout/frame-box/frame-box.vue'
+
+  defineOptions({
+    name: 'BandStack',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Pin each band under the site header from `lg` up, a step lower than the band before it, so the run piles up as the page scrolls. */
+    sticky?: boolean
+    /** Drop the first band's top rule, for a stack sitting directly under an element that already draws one. */
+    flush?: boolean
+  }
+
+  withDefaults(defineProps<Props>(), {
+    sticky: false,
+    flush: false
+  })
+
+  const slots = defineSlots<{
+    /** The bands. Each direct child — including every child a `v-for` renders — is wrapped in its own frame and becomes one band; comment nodes are skipped. */
+    default?(): unknown
+  }>()
+
+  const attrs = useAttrs()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'marketing-band-stack'
+  )
+
+  function flatten(nodes: VNodeArrayChildren): VNode[] {
+    return nodes.flatMap((node): VNode[] => {
+      if (Array.isArray(node)) return flatten(node)
+      if (typeof node === 'string' || typeof node === 'number') {
+        const text = String(node)
+        return text.trim() === '' ? [] : [createTextVNode(text)]
+      }
+      if (typeof node !== 'object' || node === null) return []
+      const vnode = node as VNode
+      if (vnode.type === Comment) return []
+      if (vnode.type === Text) return String(vnode.children ?? '').trim() === '' ? [] : [vnode]
+      if (vnode.type === Fragment) return flatten((vnode.children ?? []) as VNodeArrayChildren)
+      return [vnode]
+    })
+  }
+
+  function bands(): VNode[] {
+    return flatten((slots.default?.() ?? []) as VNodeArrayChildren)
+  }
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-sticky="sticky || null"
+    :data-flush="flush || null"
+    class="group/stack"
+  >
+    <FrameBox
+      v-for="(band, index) in bands()"
+      :key="band.key ?? index"
+      borders="y"
+      marks="all"
+      :flush="flush && index === 0"
+      :data-testid="`${testId}__band`"
+      :style="{ '--band-stack-index': index }"
+      class="not-first:-mt-px group-data-[sticky]/stack:lg:sticky group-data-[sticky]/stack:lg:top-[calc(var(--size-14)+var(--band-stack-index)*var(--spacing-md))]"
+    >
+      <component :is="band" />
+    </FrameBox>
+  </div>
+</template>

From 875c34d71b182d8a34b7b71c0a9afbc5839e22ec Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Sat, 3 Oct 2026 13:38:34 -0300
Subject: [PATCH 2/2] feat(webkit): frame each band-stack band as two cells

Each band keeps its top and bottom rules but no marks of its own. The stack
provides a context (band-stack/injection-key.ts) that tells a media-split band
to frame its copy and media cells as two frame-boxes, left and right, each with
its four registration marks, so both sides of every seam are ticked.
---
 .specs/band-stack.md                          | 17 ++++----
 .../marketing/band-stack/BandStack.stories.js |  4 +-
 packages/webkit/catalog.json                  |  5 ++-
 .../marketing/band-stack/band-stack.test.ts   | 39 +++++++++++++++++++
 .../marketing/band-stack/band-stack.vue       |  7 +++-
 .../marketing/band-stack/injection-key.ts     |  8 ++++
 6 files changed, 66 insertions(+), 14 deletions(-)
 create mode 100644 packages/webkit/src/components/marketing/band-stack/injection-key.ts

diff --git a/.specs/band-stack.md b/.specs/band-stack.md
index f2ee288ba..db2bdc8e8 100644
--- a/.specs/band-stack.md
+++ b/.specs/band-stack.md
@@ -5,17 +5,17 @@ structure: monolithic
 status: implemented
 spec_version: 1
 created: 2026-09-26
-last_updated: 2026-09-26
-checksum: 849b303b628b4104ccac10b54d80e9a4876f5ac61d916adb096ee801e8852485
+last_updated: 2026-10-01
+checksum: d973fd2e497002fa56c0a59f4c978042d4cfb26fed19331a933c854cceb4f764
 ---
 
 # Band Stack — Component Spec
 
 ## Purpose
 
-A run of framed bands that follow one another down the page, each one its own registration frame sharing a hairline with the next. With `sticky` on, each band pins under the site header a step lower than the band before it, so the run piles up as the reader scrolls and every band already read stays visible as a ledge above the one being read.
+A run of framed bands that follow one another down the page, each one drawn as two registration frames — its left half and its right half — sharing a hairline with the next. With `sticky` on, each band pins under the site header a step lower than the band before it, so the run piles up as the reader scrolls and every band already read stays visible as a ledge above the one being read.
 
-The component owns the frames, the shared hairlines and the pin offsets; the bands themselves are whatever the consumer composes into the default slot — each direct child becomes one band. It carries no copy, heading or media of its own.
+The component owns the band rules, the shared hairlines and the pin offsets, and by default every band is split into two frames: a `media-split` composed into the stack frames its copy cell and its media cell as two `frame-box`es, left and right, each with its four marks. The bands themselves are whatever the consumer composes into the default slot — each direct child becomes one band. It carries no copy, heading or media of its own.
 
 ## When to use
 
@@ -32,7 +32,7 @@ The component owns the frames, the shared hairlines and the pin offsets; the ban
 
 ## Related
 
-- `media-split` — the band this stack most often holds, typically at `size="large"`.
+- `media-split` — the band this stack holds, typically at `size="large"`. Inside the stack it frames its own two cells, so leave its `framed` off.
 - `sticky-stack` — the scroll-driven sibling: one pinned frame whose open claim follows the scroll, instead of bands that pile up.
 - `frame-box` — the frame each band is drawn in.
 - `section-gap` — the spacer usually above the stack; pass `flush` so the first band does not draw a second rule under it.
@@ -43,6 +43,7 @@ The component owns the frames, the shared hairlines and the pin offsets; the ban
 - Give every band the same height class (`media-split` `size="large"`, same `align`), so the ledges line up as the pile grows.
 - Pass `flush` when the element directly above the stack already draws a rule (a `section-gap`, another frame), so the first band does not draw a second one.
 - Give each band an opaque fill (`media-split` paints its own cells). A pinned band covers the one before it, and a transparent band shows the one underneath through it.
+- Compose `media-split`s as the bands. The two frames are the band's own cells, so a child that is not a `media-split` carries no marks unless it frames itself — wrap it in a `frame-box` with `borders="none"`.
 - Render the bands with `v-for` directly in the default slot; each direct child is one band, so a wrapper element around them collapses the run into a single band.
 
 ## Usage
@@ -97,7 +98,7 @@ The component owns the frames, the shared hairlines and the pin offsets; the ban
 - Visual states: `default`
 - `data-sticky` mirrors the `sticky` prop and is what pins the bands: from `lg` up each band is `position: sticky`, its `top` the site header's height plus one `var(--spacing-md)` step per band before it. Below `lg` the bands stack in normal flow with no pinning, because a pinned pile of full-width bands leaves a phone no room to read
 - `data-flush` mirrors the `flush` prop; the first band's frame then draws no top rule
-- Each band is a `frame-box` with its top and bottom rules and all four registration marks. Every band after the first pulls up one pixel so neighbouring rules overlap into a single hairline, while each band still owns its top rule — the rule a pinned band shows when it covers the one before it
+- Each band is a `frame-box` with its top and bottom rules and no marks of its own. The stack provides a context that tells a `media-split` band to frame its two cells, left and right, each with all four registration marks, so every band reads as two frames and both sides of its seam are ticked. Every band after the first pulls up one pixel so neighbouring rules overlap into a single hairline, while each band still owns its top rule — the rule a pinned band shows when it covers the one before it
 - The pin offset is owned by the component, not the page: the stack pins below the site header's `3.5rem` bar, and a page sets nothing to get it
 - Later bands paint over earlier ones in DOM order, so the pile grows downward with no `z-index` of its own
 
@@ -109,7 +110,7 @@ _none_ — pinning follows the scroll position; the component declares no transi
 
 | Region                        | Token (DESIGN.md)                                      |
 | ----------------------------- | ------------------------------------------------------ |
-| band rules and marks          | `var(--border-default)` (drawn by `frame-box`)          |
+| band rules and cell marks     | `var(--border-default)` (drawn by `frame-box`)          |
 | pin step between bands        | `var(--spacing-md)`                                    |
 | pin start (site header height) | `calc(var(--spacing) * 14)` — see Theme gaps           |
 
@@ -130,7 +131,7 @@ _none_ — pinning follows the scroll position; the component declares no transi
 
 ## Stories (Storybook)
 
-- Default — three `media-split` bands at `size="large"`, not pinned, so the frames and the shared hairlines are the only thing on show.
+- Default — three `media-split` bands at `size="large"`, not pinned, so the two frames of each band and the shared hairlines are the only thing on show.
 - Sticky — the same run with `sticky` and `flush` on. It sets `parameters.layout: 'fullscreen'`; a story cannot scroll itself, so the canvas shows the resting state and the reader scrolls the Docs page to see the pile form.
 
 ## Constraints — DO NOT
diff --git a/apps/storybook/src/stories/components/marketing/band-stack/BandStack.stories.js b/apps/storybook/src/stories/components/marketing/band-stack/BandStack.stories.js
index d4b0f9d83..ac7e00d30 100644
--- a/apps/storybook/src/stories/components/marketing/band-stack/BandStack.stories.js
+++ b/apps/storybook/src/stories/components/marketing/band-stack/BandStack.stories.js
@@ -57,7 +57,7 @@ const meta = {
     docs: {
       description: {
         component:
-          'A run of framed bands that follow one another down the page, each one its own registration frame sharing a hairline with the next. With `sticky` on, each band pins under the site header a step lower than the band before it, so the run piles up as the reader scrolls and every band already read stays visible as a ledge above the one being read. The stack owns the frames, the shared hairlines and the pin offsets; each direct child of the default slot becomes one band, and the stack carries no copy, heading or media of its own.'
+          'A run of framed bands that follow one another down the page, each one drawn as two registration frames, its left half and its right half, sharing a hairline with the next. With `sticky` on, each band pins under the site header a step lower than the band before it, so the run piles up as the reader scrolls and every band already read stays visible as a ledge above the one being read. The stack owns the band rules, the shared hairlines and the pin offsets, and by default every band is split into two frames: a `MediaSplit` in the stack frames its copy cell and its media cell, each with its four marks. Each direct child of the default slot becomes one band, and the stack carries no copy, heading or media of its own.'
       },
       canvas: { sourceState: 'shown' }
     }
@@ -115,7 +115,7 @@ export const Default = {
     docs: {
       description: {
         story:
-          'Three `MediaSplit` bands at `size="large"`, not pinned, so the frames and the shared hairlines are the only thing on show. Every band after the first pulls up one pixel, so neighbouring rules overlap into a single hairline while each band keeps its own registration marks. Turn on `sticky` or `flush` in the Controls panel to see the pinned run or the first band without its top rule.'
+          'Three `MediaSplit` bands at `size="large"`, not pinned, so the frames and the shared hairlines are the only thing on show. Each band is two frames, left and right, with a registration mark in every corner of both halves. Every band after the first pulls up one pixel, so neighbouring rules overlap into a single hairline. Turn on `sticky` or `flush` in the Controls panel to see the pinned run or the first band without its top rule.'
       },
       source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
     }
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index d1ea80d04..c620225ea 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -9961,7 +9961,7 @@
           "notes": "The bands. Each direct child — including every child a `v-for` renders — is wrapped in its own frame and becomes one band; comment nodes are skipped."
         }
       ],
-      "purpose": "A run of framed bands that follow one another down the page, each one its own registration frame sharing a hairline with the next. With `sticky` on, each band pins under the site header a step lower than the band before it, so the run piles up as the reader scrolls and every band already read stays visible as a ledge above the one being read. The component owns the frames, the shared hairlines and the pin offsets; the bands themselves are whatever the consumer composes into the default slot — each direct child becomes one band. It carries no copy, heading or media of its own.",
+      "purpose": "A run of framed bands that follow one another down the page, each one drawn as two registration frames — its left half and its right half — sharing a hairline with the next. With `sticky` on, each band pins under the site header a step lower than the band before it, so the run piles up as the reader scrolls and every band already read stays visible as a ledge above the one being read. The component owns the band rules, the shared hairlines and the pin offsets, and by default every band is split into two frames: a `media-split` composed into the stack frames its copy cell and its media cell as two `frame-box`es, left and right, each with its four marks. The bands themselves are whatever the consumer composes into the default slot — each direct child becomes one band. It carries no copy, heading or media of its own.",
       "useWhen": [
         "For a run of peer bands — three to six `media-split`s, one per solution or capability — that should read as one sequence.",
         "With `sticky`, when the run is the page's centrepiece and the reader should feel each band land on the last.",
@@ -9974,7 +9974,7 @@
         "For a grid of cards → use `card-grid`."
       ],
       "related": [
-        "media-split` — the band this stack most often holds, typically at `size=\"large\"`.",
+        "media-split` — the band this stack holds, typically at `size=\"large\"`. Inside the stack it frames its own two cells, so leave its `framed` off.",
         "sticky-stack` — the scroll-driven sibling: one pinned frame whose open claim follows the scroll, instead of bands that pile up.",
         "frame-box` — the frame each band is drawn in.",
         "section-gap` — the spacer usually above the stack; pass `flush` so the first band does not draw a second rule under it."
@@ -9984,6 +9984,7 @@
         "Give every band the same height class (`media-split` `size=\"large\"`, same `align`), so the ledges line up as the pile grows.",
         "Pass `flush` when the element directly above the stack already draws a rule (a `section-gap`, another frame), so the first band does not draw a second one.",
         "Give each band an opaque fill (`media-split` paints its own cells). A pinned band covers the one before it, and a transparent band shows the one underneath through it.",
+        "Compose `media-split`s as the bands. The two frames are the band's own cells, so a child that is not a `media-split` carries no marks unless it frames itself — wrap it in a `frame-box` with `borders=\"none\"`.",
         "Render the bands with `v-for` directly in the default slot; each direct child is one band, so a wrapper element around them collapses the run into a single band."
       ]
     },
diff --git a/packages/webkit/src/components/marketing/band-stack/band-stack.test.ts b/packages/webkit/src/components/marketing/band-stack/band-stack.test.ts
index c99e91a6d..dab5f5699 100644
--- a/packages/webkit/src/components/marketing/band-stack/band-stack.test.ts
+++ b/packages/webkit/src/components/marketing/band-stack/band-stack.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 import { createCommentVNode, Fragment, h } from 'vue'
 
 import { expectNoA11yViolations } from '../../../test/axe'
+import MediaSplit from '../media-split/media-split.vue'
 import BandStack from './band-stack.vue'
 
 const TESTID = 'marketing-band-stack'
@@ -10,6 +11,10 @@ const BAND = `[data-testid="${TESTID}__band"]`
 
 const band = (label: string) => h('p', label)
 
+const EVERY_CORNER = 'top-left top-right bottom-left bottom-right'
+const SRC = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
+const split = (title: string) => h(MediaSplit, { title, src: SRC, alt: title })
+
 const renderStack = (props: Record<string, unknown> = {}, attrs: Record<string, unknown> = {}) =>
   render(BandStack, {
     props,
@@ -97,6 +102,40 @@ describe('BandStack', () => {
     for (const frame of rest) expect(frame).not.toHaveAttribute('data-flush')
   })
 
+  it('draws each band its top and bottom rules and leaves the marks to the band', () => {
+    const { getByTestId } = renderStack()
+
+    for (const frame of getByTestId(TESTID).querySelectorAll(BAND)) {
+      expect(frame.getAttribute('data-borders')).toBe('top bottom')
+      expect(frame.getAttribute('data-marks')).toBe('none')
+    }
+  })
+
+  it('splits every media-split band into two frames, left and right, each with its four marks', () => {
+    const { getByTestId } = render(BandStack, {
+      slots: { default: () => [split('One'), split('Two')] }
+    })
+    const frames = [...getByTestId(TESTID).querySelectorAll(BAND)]
+
+    expect(frames).toHaveLength(2)
+    for (const frame of frames) {
+      const copy = frame.querySelector('[data-testid="marketing-media-split__copy-cell"]')
+      const media = frame.querySelector('[data-testid="marketing-media-split__media-cell"]')
+
+      expect(copy?.getAttribute('data-marks')).toBe(EVERY_CORNER)
+      expect(media?.getAttribute('data-marks')).toBe(EVERY_CORNER)
+    }
+  })
+
+  it('has no accessibility violations with media-split bands', async () => {
+    const { container } = render(BandStack, {
+      props: { sticky: true, flush: true },
+      slots: { default: () => [split('One'), split('Two')] }
+    })
+
+    await expectNoA11yViolations(container)
+  })
+
   it('has no accessibility violations', async () => {
     const { container } = renderStack()
 
diff --git a/packages/webkit/src/components/marketing/band-stack/band-stack.vue b/packages/webkit/src/components/marketing/band-stack/band-stack.vue
index aa9213063..0bf328a67 100644
--- a/packages/webkit/src/components/marketing/band-stack/band-stack.vue
+++ b/packages/webkit/src/components/marketing/band-stack/band-stack.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
   import type { VNode, VNodeArrayChildren } from 'vue'
-  import { Comment, computed, createTextVNode, Fragment, Text, useAttrs } from 'vue'
+  import { Comment, computed, createTextVNode, Fragment, provide, Text, useAttrs } from 'vue'
 
   import FrameBox from '../../layout/frame-box/frame-box.vue'
+  import { BandStackInjectionKey } from './injection-key'
 
   defineOptions({
     name: 'BandStack',
@@ -26,6 +27,8 @@
     default?(): unknown
   }>()
 
+  provide(BandStackInjectionKey, { framesCells: true })
+
   const attrs = useAttrs()
 
   const testId = computed(
@@ -65,7 +68,7 @@
       v-for="(band, index) in bands()"
       :key="band.key ?? index"
       borders="y"
-      marks="all"
+      marks="none"
       :flush="flush && index === 0"
       :data-testid="`${testId}__band`"
       :style="{ '--band-stack-index': index }"
diff --git a/packages/webkit/src/components/marketing/band-stack/injection-key.ts b/packages/webkit/src/components/marketing/band-stack/injection-key.ts
new file mode 100644
index 000000000..43c0d17b1
--- /dev/null
+++ b/packages/webkit/src/components/marketing/band-stack/injection-key.ts
@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue'
+
+export interface BandStackContext {
+  /** The stack draws each band's rules, so a band frames its own cells and marks their corners. */
+  framesCells: boolean
+}
+
+export const BandStackInjectionKey: InjectionKey<BandStackContext> = Symbol('BandStack')