From d65e6d4e06119421d03b54e1c7712ce6a5597238 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Thu, 25 Jun 2026 20:13:14 -0300
Subject: [PATCH 1/4] [ENG-46312] feat(webkit): add Divider (layout)

---
 .specs/divider.md                             | 115 +++++++++++++++++
 .../components/layout/Divider.stories.js      | 121 ++++++++++++++++++
 packages/webkit/package.json                  |   1 +
 .../src/components/layout/divider/divider.vue |  53 ++++++++
 .../components/layout/divider/package.json    |  11 ++
 5 files changed, 301 insertions(+)
 create mode 100644 .specs/divider.md
 create mode 100644 apps/storybook/src/stories/components/layout/Divider.stories.js
 create mode 100644 packages/webkit/src/components/layout/divider/divider.vue
 create mode 100644 packages/webkit/src/components/layout/divider/package.json

diff --git a/.specs/divider.md b/.specs/divider.md
new file mode 100644
index 00000000..87b96825
--- /dev/null
+++ b/.specs/divider.md
@@ -0,0 +1,115 @@
+---
+name: divider
+category: layout
+structure: monolithic
+status: approved
+spec_version: 1
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=479-886
+  node_id: 479:886
+checksum: ac9f15a30e669c779403cb474d6759bd8b8f5bd108a29680cd772532ed2991a2
+created: 2026-06-25
+last_updated: 2026-06-25
+---
+
+# Divider — Component Spec
+
+## Purpose
+
+Thin separator line that visually splits content into groups. Renders as a full-width hairline (`horizontal`) or full-height hairline (`vertical`), and can carry centered content (an "Or"-style label) when the default slot or `label` prop is set. Unlike `ScrollArea` it adds no scrolling behaviour; it is a purely decorative-yet-semantic boundary exposing `role="separator"`.
+
+## Usage
+
+```vue
+<script setup>
+import Divider from '@aziontech/webkit/divider'
+</script>
+
+<template>
+  <Divider />
+  <Divider orientation="vertical" />
+  <Divider label="Or" />
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `orientation` | `'horizontal' | 'vertical'` | `'horizontal'` | no | Layout axis of the separator line. |
+| `label` | `string` | `''` | no | Fallback centered text shown when the default slot is empty. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `default` | — | Centered content; overrides `label` when provided. |
+
+## States
+
+- Visual states: `default`
+- `data-orientation` mirrors the `orientation` prop: `horizontal` | `vertical`
+
+## Motion & Animations
+
+_none_
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| line | `var(--border-default)` |
+| typography (label) | `.text-label-sm` |
+| text (label) | `var(--text-muted)` |
+| spacing (gap around label) | `var(--spacing-sm)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | — | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: not applicable — the separator is non-interactive and not in the tab order.
+- Keyboard map: not applicable — no interactive controls.
+- ARIA: root carries `role="separator"` and `aria-orientation="{orientation}"`. A labelled divider keeps the `separator` role; the label is exposed as the separator's accessible content.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the disabled state — the muted label text meets the body-text ratio against canvas/surface.
+- `motion-reduce:transition-none motion-reduce:transform-none` on animated states — not applicable; the component declares no motion.
+- Touch target ≥40×40 px — not applicable; the component is non-interactive.
+
+## Stories (Storybook)
+
+Canonical layout — matches `apps/storybook/src/stories/components/layout/ScrollArea.stories.js`.
+
+- Default — the horizontal hairline at its most representative state.
+- Orientations — composite story rendering `horizontal` and `vertical` side by side in a single frame; the two values are the component's only variant axis, so they are shown together rather than one story per value.
+- WithLabel — demonstrates the centered `label` (and, by extension, the default slot) splitting the line, which neither Default nor Orientations exercises.
+
+## 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 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/layout/Divider.stories.js b/apps/storybook/src/stories/components/layout/Divider.stories.js
new file mode 100644
index 00000000..975c13b2
--- /dev/null
+++ b/apps/storybook/src/stories/components/layout/Divider.stories.js
@@ -0,0 +1,121 @@
+import Divider from '@aziontech/webkit/divider'
+
+/** @type {import('@storybook/vue3').Meta<typeof Divider>} */
+const meta = {
+  title: 'Components/Layout/Divider',
+  component: Divider,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    backgrounds: { default: 'dark' },
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: true },
+          { id: 'focus-order-semantics', enabled: true }
+        ]
+      }
+    },
+    docs: {
+      description: {
+        component: [
+          'Thin separator line that visually splits content into groups. Renders as a full-width hairline (`horizontal`) or full-height hairline (`vertical`), and can carry centered content (an "Or"-style label) when the default slot or `label` prop is set.',
+          '',
+          '## Usage',
+          '',
+          '```vue',
+          '<script setup>',
+          "import Divider from '@aziontech/webkit/divider'",
+          '</script>',
+          '',
+          '<template>',
+          '  <Divider />',
+          '  <Divider orientation="vertical" />',
+          '  <Divider label="Or" />',
+          '</template>',
+          '```'
+        ].join('\n')
+      }
+    }
+  },
+  argTypes: {
+    orientation: {
+      control: { type: 'select' },
+      options: ['horizontal', 'vertical'],
+      description: 'Layout axis of the separator line.',
+      table: {
+        category: 'props',
+        type: { summary: "'horizontal' | 'vertical'" },
+        defaultValue: { summary: "'horizontal'" }
+      }
+    },
+    label: {
+      control: 'text',
+      description: 'Fallback centered text shown when the default slot is empty.',
+      table: {
+        category: 'props',
+        type: { summary: 'string' },
+        defaultValue: { summary: "''" }
+      }
+    },
+    default: {
+      description: 'Centered content; overrides `label` when provided.',
+      control: false,
+      table: { category: 'slots', type: { summary: 'VNode | string' } }
+    }
+  },
+  args: {
+    orientation: 'horizontal',
+    label: ''
+  }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { Divider },
+  setup() {
+    return { args }
+  },
+  template: '<Divider v-bind="args" />'
+})
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Divider>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: { description: { story: 'Horizontal hairline separating stacked content.' } }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Divider>} */
+export const Orientations = {
+  render: () => ({
+    components: { Divider },
+    template: `
+      <div class="flex items-stretch gap-[var(--spacing-md)] h-[120px] w-full">
+        <div class="flex-1 flex flex-col justify-center gap-[var(--spacing-sm)]">
+          <span class="text-body-sm text-[var(--text-default)]">Above</span>
+          <Divider orientation="horizontal" />
+          <span class="text-body-sm text-[var(--text-default)]">Below</span>
+        </div>
+        <Divider orientation="vertical" />
+        <div class="flex-1 flex items-center justify-center text-body-sm text-[var(--text-default)]">
+          Beside the vertical divider
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    docs: { description: { story: 'Horizontal and vertical orientations side by side.' } }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Divider>} */
+export const WithLabel = {
+  render: Template,
+  args: { label: 'Or' },
+  parameters: {
+    docs: { description: { story: 'Centered label splitting the line; the default slot overrides it when provided.' } }
+  }
+}
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index 038e706b..754bb9e0 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -107,6 +107,7 @@
     "./field-textarea": "./src/components/inputs/field-textarea/field-textarea.vue",
     "./dropdown": "./src/components/inputs/dropdown/dropdown.vue",
     "./select": "./src/components/inputs/select/index.ts",
+    "./divider": "./src/components/layout/divider/divider.vue",
     "./scroll-area": "./src/components/layout/scroll-area/scroll-area.vue",
     "./global-header": "./src/components/layout/global-header/index.js",
     "./sidebar": "./src/components/layout/sidebar/sidebar.vue",
diff --git a/packages/webkit/src/components/layout/divider/divider.vue b/packages/webkit/src/components/layout/divider/divider.vue
new file mode 100644
index 00000000..0e789363
--- /dev/null
+++ b/packages/webkit/src/components/layout/divider/divider.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import { computed, useAttrs, useSlots } from 'vue'
+
+  defineOptions({
+    name: 'Divider',
+    inheritAttrs: false
+  })
+
+  type DividerOrientation = 'horizontal' | 'vertical'
+
+  interface Props {
+    /** Layout axis of the separator line. */
+    orientation?: DividerOrientation
+    /** Fallback centered text shown when the default slot is empty. */
+    label?: string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    orientation: 'horizontal',
+    label: ''
+  })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const slots = useSlots()
+
+  const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'layout-divider')
+
+  const hasContent = computed<boolean>(() => Boolean(slots.default) || props.label.length > 0)
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    role="separator"
+    :aria-orientation="orientation"
+    :data-testid="testId"
+    :data-orientation="orientation"
+    :data-labelled="hasContent || null"
+    class="flex shrink-0 items-center justify-center text-label-sm text-[var(--text-muted)] data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:h-full data-[orientation=vertical]:flex-col data-[labelled]:gap-[var(--spacing-sm)] before:content-[''] before:flex-1 before:self-center before:border-[var(--border-default)] after:content-[''] after:flex-1 after:self-center after:border-[var(--border-default)] data-[orientation=horizontal]:before:border-t data-[orientation=horizontal]:after:border-t data-[orientation=vertical]:before:border-l data-[orientation=vertical]:after:border-l"
+  >
+    <span
+      v-if="hasContent"
+      :data-testid="`${testId}__label`"
+    >
+      <slot v-if="slots.default" />
+      <template v-else>{{ label }}</template>
+    </span>
+  </div>
+</template>
diff --git a/packages/webkit/src/components/layout/divider/package.json b/packages/webkit/src/components/layout/divider/package.json
new file mode 100644
index 00000000..aae31d08
--- /dev/null
+++ b/packages/webkit/src/components/layout/divider/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./divider.vue",
+  "module": "./divider.vue",
+  "types": "./divider.vue.d.ts",
+  "browser": {
+    "./sfc": "./divider.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}

From 0ee6f1ef24b922eb16e660a1f9d8d82a4ff562b7 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Fri, 26 Jun 2026 18:13:19 -0300
Subject: [PATCH 2/4] [ENG-46312] fix(webkit): align Divider with dev and make
 Show code runnable

- drop per-component package.json (matches #684; exports point at the .vue)
- access default slot via slots['default'] to fix TS4111 under current tooling
- escape the Props-table union pipe and recompute the spec checksum
- migrate the story to the runnable Show code pattern (PascalCase tag, single
  <script setup> + <template>, prose lead, source.transform + sourceState)
---
 .specs/divider.md                             |  6 +-
 .../components/layout/Divider.stories.js      | 92 +++++++++++--------
 .../src/components/layout/divider/divider.vue |  4 +-
 .../components/layout/divider/package.json    | 11 ---
 4 files changed, 60 insertions(+), 53 deletions(-)
 delete mode 100644 packages/webkit/src/components/layout/divider/package.json

diff --git a/.specs/divider.md b/.specs/divider.md
index 87b96825..137e24cd 100644
--- a/.specs/divider.md
+++ b/.specs/divider.md
@@ -7,9 +7,9 @@ spec_version: 1
 figma:
   url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=479-886
   node_id: 479:886
-checksum: ac9f15a30e669c779403cb474d6759bd8b8f5bd108a29680cd772532ed2991a2
+checksum: ff0815c792a7f4d4f347be1866a997253631ba6ea439af4bc38e2e8b3b20d791
 created: 2026-06-25
-last_updated: 2026-06-25
+last_updated: 2026-06-26
 ---
 
 # Divider — Component Spec
@@ -36,7 +36,7 @@ import Divider from '@aziontech/webkit/divider'
 
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
-| `orientation` | `'horizontal' | 'vertical'` | `'horizontal'` | no | Layout axis of the separator line. |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | no | Layout axis of the separator line. |
 | `label` | `string` | `''` | no | Fallback centered text shown when the default slot is empty. |
 
 ## Events
diff --git a/apps/storybook/src/stories/components/layout/Divider.stories.js b/apps/storybook/src/stories/components/layout/Divider.stories.js
index 975c13b2..63d0fcc6 100644
--- a/apps/storybook/src/stories/components/layout/Divider.stories.js
+++ b/apps/storybook/src/stories/components/layout/Divider.stories.js
@@ -1,5 +1,17 @@
 import Divider from '@aziontech/webkit/divider'
 
+const IMPORT = "import Divider from '@aziontech/webkit/divider'"
+
+/** Indent a `<template>` body and wrap it in a runnable `<script setup>` SFC. */
+const indent = (code) =>
+  code
+    .trim()
+    .split('\n')
+    .map((line) => (line ? `  ${line}` : line))
+    .join('\n')
+
+const sfc = (body) => ['<script setup>', IMPORT, '</script>', '', '<template>', indent(body), '</template>'].join('\n')
+
 /** @type {import('@storybook/vue3').Meta<typeof Divider>} */
 const meta = {
   title: 'Components/Layout/Divider',
@@ -18,24 +30,29 @@ const meta = {
     },
     docs: {
       description: {
-        component: [
-          'Thin separator line that visually splits content into groups. Renders as a full-width hairline (`horizontal`) or full-height hairline (`vertical`), and can carry centered content (an "Or"-style label) when the default slot or `label` prop is set.',
-          '',
-          '## Usage',
-          '',
-          '```vue',
-          '<script setup>',
-          "import Divider from '@aziontech/webkit/divider'",
-          '</script>',
-          '',
-          '<template>',
-          '  <Divider />',
-          '  <Divider orientation="vertical" />',
-          '  <Divider label="Or" />',
-          '</template>',
-          '```'
-        ].join('\n')
-      }
+        component:
+          'Thin separator line that visually splits content into groups. Renders as a full-width hairline (`horizontal`) or full-height hairline (`vertical`), and can carry centered content (an "Or"-style label) when the default slot or `label` prop is set.'
+      },
+      source: {
+        type: 'dynamic',
+        excludeDecorators: true,
+        // Composite stories supply their own full-SFC `source.code` (Storybook's
+        // dynamic source can't introspect a multi-element render template); pass
+        // those through untouched. For arg-driven stories Storybook emits bare
+        // markup (sometimes already wrapped in <template>) — unwrap once, then
+        // wrap in a runnable SFC so "Show code" matches the canvas exactly.
+        transform: (code) => {
+          let src = String(code).trim()
+          if (/<script[\s>]/i.test(src)) return src
+          const wrapped = src.match(/^<template>\s*([\s\S]*?)\s*<\/template>$/)
+          if (wrapped) src = wrapped[1].trim()
+          // Storybook's dynamic snippet lowercases the tag; restore the
+          // PascalCase name so the snippet matches the import and runs as-is.
+          src = src.replace(/(<\/?)divider(?=[\s/>])/g, '$1Divider')
+          return sfc(src)
+        }
+      },
+      canvas: { sourceState: 'shown' }
     }
   },
   argTypes: {
@@ -75,12 +92,11 @@ export default meta
 const Template = (args) => ({
   components: { Divider },
   setup() {
-    return { args }
+    return { props: args }
   },
-  template: '<Divider v-bind="args" />'
+  template: '<Divider v-bind="props" />'
 })
 
-/** @type {import('@storybook/vue3').StoryObj<typeof Divider>} */
 export const Default = {
   render: Template,
   parameters: {
@@ -88,30 +104,32 @@ export const Default = {
   }
 }
 
-/** @type {import('@storybook/vue3').StoryObj<typeof Divider>} */
+const ORIENTATIONS_TEMPLATE = `<div class="flex items-stretch gap-[var(--spacing-md)] h-[120px] w-full">
+  <div class="flex-1 flex flex-col justify-center gap-[var(--spacing-sm)]">
+    <span class="text-body-sm text-[var(--text-default)]">Above</span>
+    <Divider orientation="horizontal" />
+    <span class="text-body-sm text-[var(--text-default)]">Below</span>
+  </div>
+  <Divider orientation="vertical" />
+  <div class="flex-1 flex items-center justify-center text-body-sm text-[var(--text-default)]">
+    Beside the vertical divider
+  </div>
+</div>`
+
 export const Orientations = {
   render: () => ({
     components: { Divider },
-    template: `
-      <div class="flex items-stretch gap-[var(--spacing-md)] h-[120px] w-full">
-        <div class="flex-1 flex flex-col justify-center gap-[var(--spacing-sm)]">
-          <span class="text-body-sm text-[var(--text-default)]">Above</span>
-          <Divider orientation="horizontal" />
-          <span class="text-body-sm text-[var(--text-default)]">Below</span>
-        </div>
-        <Divider orientation="vertical" />
-        <div class="flex-1 flex items-center justify-center text-body-sm text-[var(--text-default)]">
-          Beside the vertical divider
-        </div>
-      </div>
-    `
+    template: ORIENTATIONS_TEMPLATE
   }),
   parameters: {
-    docs: { description: { story: 'Horizontal and vertical orientations side by side.' } }
+    docs: {
+      controls: { disable: true },
+      description: { story: 'Horizontal and vertical orientations side by side.' },
+      source: { code: sfc(ORIENTATIONS_TEMPLATE) }
+    }
   }
 }
 
-/** @type {import('@storybook/vue3').StoryObj<typeof Divider>} */
 export const WithLabel = {
   render: Template,
   args: { label: 'Or' },
diff --git a/packages/webkit/src/components/layout/divider/divider.vue b/packages/webkit/src/components/layout/divider/divider.vue
index 0e789363..360980b2 100644
--- a/packages/webkit/src/components/layout/divider/divider.vue
+++ b/packages/webkit/src/components/layout/divider/divider.vue
@@ -29,7 +29,7 @@
 
   const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'layout-divider')
 
-  const hasContent = computed<boolean>(() => Boolean(slots.default) || props.label.length > 0)
+  const hasContent = computed<boolean>(() => Boolean(slots['default']) || props.label.length > 0)
 </script>
 
 <template>
@@ -46,7 +46,7 @@
       v-if="hasContent"
       :data-testid="`${testId}__label`"
     >
-      <slot v-if="slots.default" />
+      <slot v-if="slots['default']" />
       <template v-else>{{ label }}</template>
     </span>
   </div>
diff --git a/packages/webkit/src/components/layout/divider/package.json b/packages/webkit/src/components/layout/divider/package.json
deleted file mode 100644
index aae31d08..00000000
--- a/packages/webkit/src/components/layout/divider/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "main": "./divider.vue",
-  "module": "./divider.vue",
-  "types": "./divider.vue.d.ts",
-  "browser": {
-    "./sfc": "./divider.vue"
-  },
-  "sideEffects": [
-    "*.vue"
-  ]
-}

From 19cc3aa08721703762b620389b83b3154e182416 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Fri, 26 Jun 2026 21:59:41 -0300
Subject: [PATCH 3/4] [ENG-46312] fix(webkit): Divider Show code via explicit
 source.code (no dynamic)

---
 .../components/layout/Divider.stories.js      | 53 ++++++++-----------
 1 file changed, 23 insertions(+), 30 deletions(-)

diff --git a/apps/storybook/src/stories/components/layout/Divider.stories.js b/apps/storybook/src/stories/components/layout/Divider.stories.js
index 63d0fcc6..f46d910d 100644
--- a/apps/storybook/src/stories/components/layout/Divider.stories.js
+++ b/apps/storybook/src/stories/components/layout/Divider.stories.js
@@ -2,15 +2,21 @@ import Divider from '@aziontech/webkit/divider'
 
 const IMPORT = "import Divider from '@aziontech/webkit/divider'"
 
-/** Indent a `<template>` body and wrap it in a runnable `<script setup>` SFC. */
-const indent = (code) =>
-  code
-    .trim()
-    .split('\n')
-    .map((line) => (line ? `  ${line}` : line))
-    .join('\n')
-
-const sfc = (body) => ['<script setup>', IMPORT, '</script>', '', '<template>', indent(body), '</template>'].join('\n')
+/** Wrap a `<template>` body in a runnable `<script setup>` SFC for "Show code". */
+const sfc = (body) =>
+  [
+    '<script setup>',
+    IMPORT,
+    '</script>',
+    '',
+    '<template>',
+    body
+      .trim()
+      .split('\n')
+      .map((line) => (line ? `  ${line}` : line))
+      .join('\n'),
+    '</template>'
+  ].join('\n')
 
 /** @type {import('@storybook/vue3').Meta<typeof Divider>} */
 const meta = {
@@ -33,25 +39,6 @@ const meta = {
         component:
           'Thin separator line that visually splits content into groups. Renders as a full-width hairline (`horizontal`) or full-height hairline (`vertical`), and can carry centered content (an "Or"-style label) when the default slot or `label` prop is set.'
       },
-      source: {
-        type: 'dynamic',
-        excludeDecorators: true,
-        // Composite stories supply their own full-SFC `source.code` (Storybook's
-        // dynamic source can't introspect a multi-element render template); pass
-        // those through untouched. For arg-driven stories Storybook emits bare
-        // markup (sometimes already wrapped in <template>) — unwrap once, then
-        // wrap in a runnable SFC so "Show code" matches the canvas exactly.
-        transform: (code) => {
-          let src = String(code).trim()
-          if (/<script[\s>]/i.test(src)) return src
-          const wrapped = src.match(/^<template>\s*([\s\S]*?)\s*<\/template>$/)
-          if (wrapped) src = wrapped[1].trim()
-          // Storybook's dynamic snippet lowercases the tag; restore the
-          // PascalCase name so the snippet matches the import and runs as-is.
-          src = src.replace(/(<\/?)divider(?=[\s/>])/g, '$1Divider')
-          return sfc(src)
-        }
-      },
       canvas: { sourceState: 'shown' }
     }
   },
@@ -100,7 +87,10 @@ const Template = (args) => ({
 export const Default = {
   render: Template,
   parameters: {
-    docs: { description: { story: 'Horizontal hairline separating stacked content.' } }
+    docs: {
+      description: { story: 'Horizontal hairline separating stacked content.' },
+      source: { code: sfc('<Divider />') }
+    }
   }
 }
 
@@ -134,6 +124,9 @@ export const WithLabel = {
   render: Template,
   args: { label: 'Or' },
   parameters: {
-    docs: { description: { story: 'Centered label splitting the line; the default slot overrides it when provided.' } }
+    docs: {
+      description: { story: 'Centered label splitting the line; the default slot overrides it when provided.' },
+      source: { code: sfc('<Divider label="Or" />') }
+    }
   }
 }

From 83835ba2f2f14e94507e7d7c8ac62467df75c654 Mon Sep 17 00:00:00 2001
From: HerbertJulio <herbert.julio@azion.com>
Date: Sat, 27 Jun 2026 14:01:38 -0300
Subject: [PATCH 4/4] [ENG-46312] fix(webkit): reactive Divider stories +
 labelled examples

---
 .specs/divider.md                             | 10 ++--
 .../components/layout/Divider.stories.js      | 52 ++++++++-----------
 2 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/.specs/divider.md b/.specs/divider.md
index 137e24cd..3bc9f0f1 100644
--- a/.specs/divider.md
+++ b/.specs/divider.md
@@ -7,7 +7,7 @@ spec_version: 1
 figma:
   url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=479-886
   node_id: 479:886
-checksum: ff0815c792a7f4d4f347be1866a997253631ba6ea439af4bc38e2e8b3b20d791
+checksum: abadc01cd4dc1c015b0b91cd69604d389744f3f06fcd52eb00dc2e7fbad08570
 created: 2026-06-25
 last_updated: 2026-06-26
 ---
@@ -84,11 +84,11 @@ _none_
 
 ## Stories (Storybook)
 
-Canonical layout — matches `apps/storybook/src/stories/components/layout/ScrollArea.stories.js`.
+All stories share one reactive render that binds both `orientation` and `label`, so every control updates the canvas live.
 
-- Default — the horizontal hairline at its most representative state.
-- Orientations — composite story rendering `horizontal` and `vertical` side by side in a single frame; the two values are the component's only variant axis, so they are shown together rather than one story per value.
-- WithLabel — demonstrates the centered `label` (and, by extension, the default slot) splitting the line, which neither Default nor Orientations exercises.
+- Default — reactive playground; the `orientation` and `label` controls drive a single divider.
+- WithLabel — horizontal divider with a centered `label` ("OR") in the middle. Exercises the `label` prop / default slot.
+- Vertical — vertical divider with a centered `label` ("OR") in the middle (the parent supplies the height); covers the `vertical` orientation with a label.
 
 ## Constraints — DO NOT
 
diff --git a/apps/storybook/src/stories/components/layout/Divider.stories.js b/apps/storybook/src/stories/components/layout/Divider.stories.js
index f46d910d..53466f9d 100644
--- a/apps/storybook/src/stories/components/layout/Divider.stories.js
+++ b/apps/storybook/src/stories/components/layout/Divider.stories.js
@@ -44,7 +44,7 @@ const meta = {
   },
   argTypes: {
     orientation: {
-      control: { type: 'select' },
+      control: { type: 'inline-radio' },
       options: ['horizontal', 'vertical'],
       description: 'Layout axis of the separator line.',
       table: {
@@ -76,57 +76,51 @@ const meta = {
 
 export default meta
 
+// One reactive render for every story. It binds BOTH props (`:orientation` +
+// `:label`) and the wrapper gives the divider a definite width AND height, so a
+// horizontal line fills the width and a vertical line fills the height — every
+// control works on every story (proven Storybook 8 vue3 pattern: return { args }
+// and reference args.* in the template).
 const Template = (args) => ({
   components: { Divider },
   setup() {
-    return { props: args }
+    return { args }
   },
-  template: '<Divider v-bind="props" />'
+  template: `
+    <div class="flex items-center justify-center w-full max-w-[360px] h-[80px]">
+      <Divider :orientation="args.orientation" :label="args.label" />
+    </div>
+  `
 })
 
 export const Default = {
   render: Template,
   parameters: {
     docs: {
-      description: { story: 'Horizontal hairline separating stacked content.' },
-      source: { code: sfc('<Divider />') }
+      description: { story: 'Reactive playground — switch `orientation` and type a `label` to see it update live.' },
+      source: { code: sfc('<Divider orientation="horizontal" />') }
     }
   }
 }
 
-const ORIENTATIONS_TEMPLATE = `<div class="flex items-stretch gap-[var(--spacing-md)] h-[120px] w-full">
-  <div class="flex-1 flex flex-col justify-center gap-[var(--spacing-sm)]">
-    <span class="text-body-sm text-[var(--text-default)]">Above</span>
-    <Divider orientation="horizontal" />
-    <span class="text-body-sm text-[var(--text-default)]">Below</span>
-  </div>
-  <Divider orientation="vertical" />
-  <div class="flex-1 flex items-center justify-center text-body-sm text-[var(--text-default)]">
-    Beside the vertical divider
-  </div>
-</div>`
-
-export const Orientations = {
-  render: () => ({
-    components: { Divider },
-    template: ORIENTATIONS_TEMPLATE
-  }),
+export const WithLabel = {
+  render: Template,
+  args: { orientation: 'horizontal', label: 'OR' },
   parameters: {
     docs: {
-      controls: { disable: true },
-      description: { story: 'Horizontal and vertical orientations side by side.' },
-      source: { code: sfc(ORIENTATIONS_TEMPLATE) }
+      description: { story: 'Horizontal divider with a centered label ("OR") in the middle. Both `orientation` and `label` controls are live.' },
+      source: { code: sfc('<Divider orientation="horizontal" label="OR" />') }
     }
   }
 }
 
-export const WithLabel = {
+export const Vertical = {
   render: Template,
-  args: { label: 'Or' },
+  args: { orientation: 'vertical', label: 'OR' },
   parameters: {
     docs: {
-      description: { story: 'Centered label splitting the line; the default slot overrides it when provided.' },
-      source: { code: sfc('<Divider label="Or" />') }
+      description: { story: 'Vertical divider with a centered label ("OR") in the middle; the parent provides the height. Both controls are live.' },
+      source: { code: sfc('<Divider orientation="vertical" label="OR" />') }
     }
   }
 }