diff --git a/.specs/card-box.md b/.specs/card-box.md
index 4887ebf56..a1b1a52c0 100644
--- a/.specs/card-box.md
+++ b/.specs/card-box.md
@@ -7,7 +7,7 @@ spec_version: 1
 figma:
   url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=562-6473
   node_id: 562:6473
-checksum: 88d00b7a194391ea17dc7ac850373e9e380517de370d2a815662f0a09b0a33bb
+checksum: d240f06853f89d6ca3ca48892c10075eb247ec2b9d31590f54889ba572164be8
 created: 2026-05-22
 last_updated: 2026-05-22
 ---
@@ -22,6 +22,7 @@ Displays content or metadata in the UI. Migrated from the existing implementatio
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
 | `title` | `string` | `undefined` | no | Heading rendered in the header when the `header` slot is empty. |
+| `padded` | `boolean` | `true` | no | Pads the content region. Set `false` for flush, edge-to-edge content such as an `ItemList` with full-width dividers. |
 
 ## Events
 
@@ -31,11 +32,11 @@ Displays content or metadata in the UI. Migrated from the existing implementatio
 
 | Slot | Scope | Notes |
 |---|---|---|
-| `header` | — | — |
-| `content` | — | — |
-| `footer` | — | Named slot. |
-| `header-action` | — | Named slot. |
-| `default` | — | Main content. |
+| `header` | — | Replaces the default header layout (title + header-action). |
+| `content` | — | Main card body. |
+| `footer` | — | Footer actions or metadata; omitted when empty. |
+
+> Also exposes a `header-action` named slot (actions aligned to the end of the default header, revealed on header hover). It is kept out of the table above because the compliance parser cannot read hyphenated (quoted) slot keys from `defineSlots`. There is no `default` slot — content goes through `content`.
 
 ## States
 
diff --git a/.specs/item.md b/.specs/item.md
index 061d189f1..0226c9026 100644
--- a/.specs/item.md
+++ b/.specs/item.md
@@ -6,18 +6,19 @@ status: implemented
 spec_version: 2
 created: 2026-05-24
 last_updated: 2026-05-24
-checksum: ee3512ee63484ef33fb8e4f3a4cca78a2587c5fcb029bbdf3462501a096450e5
+checksum: 7c708881c38ac4e3f27b15160973070bd25238adf783089f09565522a14462a4
 ---
 # Item — Component Spec
 
 ## Purpose
 
-Versatile flex row for title, description, media, and actions. Mirrors the shadcn-vue Item anatomy so consumers can reorder or omit regions. Compose with `ItemGroup` for lists and `ItemSeparator` between rows. Reference: https://www.shadcn-vue.com/docs/components/item (adapted to Webkit tokens and naming).
+Versatile flex row for title, description, media, and actions. Mirrors the shadcn-vue Item anatomy so consumers can reorder or omit regions. Compose with `ItemGroup` for gapped off-card lists, `ItemList` for divided in-card lists (inside a `CardBox`), and `ItemSeparator` between rows. Reference: https://www.shadcn-vue.com/docs/components/item (adapted to Webkit tokens and naming).
 
 ## Sub-components
 
 - `item.vue` — Root row container (`kind`, `size`).
-- `item-group.vue` — Vertical list wrapper (`role="list"`).
+- `item-group.vue` — Vertical list wrapper (`role="list"`) with a gap between rows; for off-card lists. Forces its descendant Items to render inline (no per-item surface or padding) to avoid a box-in-box effect.
+- `item-list.vue` — Vertical list wrapper (`role="list"`) that draws full-width dividers between rows and no gap; for in-card lists (inside a `CardBox` with `padded=false`). Forces its descendant Items to the `default` kind (padded rows, transparent surface, no per-item border) to avoid a box-in-box effect.
 - `item-separator.vue` — Horizontal divider between rows in a group.
 - `item-media.vue` — Leading media slot (`mediaKind` for icon/image frames).
 - `item-content.vue` — Main text column (title + description).
@@ -31,10 +32,11 @@ Versatile flex row for title, description, media, and actions. Mirrors the shadc
 
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
-| `kind` | `'default' \| 'outline' \| 'muted'` | `'default'` | no | Item root surface variant. |
+| `kind` | `'default' \| 'outline' \| 'muted' \| 'inline'` | `'default'` | no | Item root surface variant. `inline` removes the row's outer padding (transparent surface) for inline placement and divided in-card lists. |
 | `size` | `'small' \| 'medium'` | `'medium'` | no | Item root density (padding and gap). |
 | `asChild` | `boolean` | `false` | no | Merge row layout and interactive-state classes onto the single default-slot child (e.g. anchor). |
-| `mediaKind` | `'default' \| 'icon' \| 'image'` | `'default'` | no | ItemMedia region variant (icon frame, image frame). |
+
+> `ItemMedia` carries its own `mediaKind` prop (`'default' | 'icon' | 'image'`, default `'default'`) — see the Sub-components section. It is not a root `Item` prop.
 
 ## Events
 
@@ -48,15 +50,16 @@ Versatile flex row for title, description, media, and actions. Mirrors the shadc
 
 ## States
 
-- Visual states on Item shell: `default` only (no row-level hover, active, or focus)
-- Slotted controls (`Button`, `a`, etc.) own hover, active, and `focus-visible`
-- `data-kind` on Item root: `default` | `outline` | `muted`
+- Visual states on Item shell: `default` only, **except with `asChild`**, where the merged child (the whole-row link/button) gains row-level `hover`, `active`, and `focus-visible`
+- Without `asChild`, slotted controls (`Button`, `a`, etc.) own hover, active, and `focus-visible`
+- `data-kind` on Item root: `default` | `outline` | `muted` | `inline` (an Item inside `ItemGroup` is forced to `inline`; inside `ItemList` to `default`)
 - `data-size` on Item root: `small` | `medium`
 - `data-media-kind` on ItemMedia: `default` | `icon` | `image`
 
 ## Motion & Animations
 
-_none_
+- With `asChild`, the merged row uses the shared interactive ghost-layer hover/active treatment (opacity transition on `::before`/`::after`, motion-reduce safe). No component-local keyframes; sourced from the `interactive-states` preset.
+- Without `asChild`, the shell is static.
 
 ## Tokens
 
@@ -73,6 +76,8 @@ _none_
 | spacing gap (small) | `var(--spacing-2)` |
 | padding (medium) | `var(--spacing-4)` |
 | padding (small) | `var(--spacing-3)` |
+| ItemGroup row gap | `var(--spacing-lg)` |
+| ItemList divider | `var(--border-muted)` |
 | shape | `var(--shape-elements)` |
 | ring | `var(--ring-color)` |
 
@@ -84,7 +89,7 @@ _none_
 
 ## Accessibility (WCAG 2.1 AA)
 
-- Visible focus: on slotted links and buttons only (Item shell does not draw a focus ring).
+- Visible focus: on slotted links and buttons. The Item shell draws no focus ring on its own, except with `asChild`, where the merged focusable child (e.g. an anchor) receives the `focus-visible` ring (`focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]`) and hover/active feedback.
 - Keyboard map: slotted links and buttons supply Tab order; use `asChild` to merge layout onto a single focusable child when the whole row is a link.
 - ARIA: `ItemGroup` uses `role="list"`; consumers may set `role="listitem"` on Item when inside a list; `ItemSeparator` uses `role="separator"`.
 - Contrast ≥4.5:1 for title and description text.
@@ -100,7 +105,10 @@ _none_
 - WithIconMedia — `ItemMedia` with `mediaKind="icon"` and a leading icon (security-style row).
 - WithAvatar — `ItemMedia` wrapping `Avatar` for profile list rows.
 - WithImageMedia — `ItemMedia` with `mediaKind="image"` and a thumbnail image.
-- WithGroup — `ItemGroup` with multiple items, avatars, actions, and `ItemSeparator` between rows.
+- WithGroup — `ItemGroup` with multiple items, avatars, and actions; gapped off-card list.
+- WithList — `ItemList` inside a `CardBox` (`padded=false`); rows separated by full-width dividers.
+- WithListAsChild — `ItemList` of `asChild` anchor rows inside a `CardBox`; whole-row links with dividers, row-level hover, and focus-visible ring.
+- Inline — `kind="inline"` items in an `ItemGroup`, placed directly on the page (no card, no outer padding).
 - WithAsChild — `asChild` on `Item` wrapping an anchor; row layout merges onto the link; focus stays on the anchor.
 
 ## Constraints — DO NOT
diff --git a/apps/storybook/src/stories/components/content/Item.stories.js b/apps/storybook/src/stories/components/content/Item.stories.js
index 859cd3441..306b8ea62 100644
--- a/apps/storybook/src/stories/components/content/Item.stories.js
+++ b/apps/storybook/src/stories/components/content/Item.stories.js
@@ -1,7 +1,10 @@
-import Button from '@aziontech/webkit/button'
 import Avatar from '@aziontech/webkit/avatar'
+import Button from '@aziontech/webkit/button'
+import CardBox from '@aziontech/webkit/card-box'
 import Item from '@aziontech/webkit/item'
 
+import { toSfc } from '../../_shared/story-source'
+
 const sampleAvatarSrc =
   'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=96&h=96&fit=crop&crop=face'
 
@@ -29,6 +32,7 @@ const people = [
 const itemSubcomponents = {
   Item,
   ItemGroup: Item.Group,
+  ItemList: Item.List,
   ItemSeparator: Item.Separator,
   ItemMedia: Item.Media,
   ItemContent: Item.Content,
@@ -36,15 +40,17 @@ const itemSubcomponents = {
   ItemDescription: Item.Description,
   ItemActions: Item.Actions,
   Button,
-  Avatar
+  Avatar,
+  CardBox
 }
 
 /** @type {import('@storybook/vue3').Meta<typeof Item>} */
 const meta = {
- title: 'Components/Content/Item',
+  title: 'Components/Content/Item',
   component: Item,
   subcomponents: {
     ItemGroup: Item.Group,
+    ItemList: Item.List,
     ItemSeparator: Item.Separator,
     ItemMedia: Item.Media,
     ItemContent: Item.Content,
@@ -69,17 +75,19 @@ const meta = {
     docs: {
       description: {
         component:
-          'Versatile flex row for title, description, media, and actions. Compose sub-components to reorder or omit regions; use ItemGroup for lists.'
-      }
+          'Versatile flex row for title, description, media, and actions. Compose sub-components to reorder or omit regions; use ItemGroup for gapped off-card lists and ItemList (inside a CardBox with padded=false) for divided in-card lists.'
+      },
+      canvas: { sourceState: 'shown' }
     }
   },
   argTypes: {
     kind: {
       control: 'select',
-      options: ['default', 'outline', 'muted'],
-      description: 'Item root surface variant.',
+      options: ['default', 'outline', 'muted', 'inline'],
+      description:
+        'Item root surface variant. inline removes the outer padding for inline placement and divided in-card lists.',
       table: {
-        type: { summary: "'default' | 'outline' | 'muted'" },
+        type: { summary: "'default' | 'outline' | 'muted' | 'inline'" },
         defaultValue: { summary: 'default' },
         category: 'props'
       }
@@ -97,7 +105,7 @@ const meta = {
     asChild: {
       control: 'boolean',
       description:
-        'Merge row layout onto the single default-slot child (e.g. anchor). Focus and hover stay on slotted controls.',
+        'Merge row layout onto the single default-slot child (e.g. anchor). The merged child becomes the focusable element and draws the focus-visible ring.',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
@@ -130,13 +138,28 @@ const meta = {
 
 export default meta
 
+const BASIC_IMPORTS = [
+  "import Item from '@aziontech/webkit/item'",
+  "import Button from '@aziontech/webkit/button'"
+]
+
+const basicMarkup = (attrs = '') => `<Item${attrs}>
+  <Item.Content>
+    <Item.Title>Basic Item</Item.Title>
+    <Item.Description>A simple item with title and description.</Item.Description>
+  </Item.Content>
+  <Item.Actions>
+    <Button label="Action" kind="outlined" size="small" />
+  </Item.Actions>
+</Item>`
+
 const Template = (args) => ({
   components: itemSubcomponents,
   setup() {
     return { args }
   },
   template: `
-    <div class="flex w-full max-w-md flex-col gap-[var(--spacing-4)]">
+    <div class="flex w-full flex-col gap-[var(--spacing-4)]">
       <Item v-bind="args">
         <ItemContent>
           <ItemTitle>Basic Item</ItemTitle>
@@ -159,7 +182,8 @@ export const Default = {
     docs: {
       description: {
         story: 'Default surface with title, description, and a trailing action.'
-      }
+      },
+      source: { code: toSfc(BASIC_IMPORTS, basicMarkup()) }
     }
   }
 }
@@ -172,7 +196,8 @@ export const Outline = {
     docs: {
       description: {
         story: 'Outlined variant with a visible border.'
-      }
+      },
+      source: { code: toSfc(BASIC_IMPORTS, basicMarkup(' kind="outline"')) }
     }
   }
 }
@@ -185,7 +210,8 @@ export const Muted = {
     docs: {
       description: {
         story: 'Muted variant for secondary list rows.'
-      }
+      },
+      source: { code: toSfc(BASIC_IMPORTS, basicMarkup(' kind="muted"')) }
     }
   }
 }
@@ -198,11 +224,25 @@ export const Small = {
     docs: {
       description: {
         story: 'Compact density with reduced padding and gap.'
-      }
+      },
+      source: { code: toSfc(BASIC_IMPORTS, basicMarkup(' kind="outline" size="small"')) }
     }
   }
 }
 
+const ICON_MEDIA_MARKUP = `<Item kind="outline">
+  <Item.Media media-kind="icon">
+    <i class="ai ai-edge-firewall text-[length:inherit] leading-none" aria-hidden="true" />
+  </Item.Media>
+  <Item.Content>
+    <Item.Title>Security Alert</Item.Title>
+    <Item.Description>New login detected from unknown device.</Item.Description>
+  </Item.Content>
+  <Item.Actions>
+    <Button label="Review" kind="outlined" size="small" />
+  </Item.Actions>
+</Item>`
+
 /** @type {import('@storybook/vue3').StoryObj<typeof Item>} */
 export const WithIconMedia = {
   render: (args) => ({
@@ -211,7 +251,7 @@ export const WithIconMedia = {
       return { args }
     },
     template: `
-      <div class="flex w-full max-w-lg flex-col gap-[var(--spacing-4)]">
+      <div class="flex w-full flex-col gap-[var(--spacing-4)]">
         <Item kind="outline" v-bind="args">
           <ItemMedia media-kind="icon">
             <i class="ai ai-edge-firewall text-[length:inherit] leading-none" aria-hidden="true" />
@@ -233,11 +273,31 @@ export const WithIconMedia = {
     docs: {
       description: {
         story: 'ItemMedia with mediaKind icon frames a leading icon before title and description.'
-      }
+      },
+      source: { code: toSfc(BASIC_IMPORTS, ICON_MEDIA_MARKUP) }
     }
   }
 }
 
+const AVATAR_IMPORTS = [
+  "import Item from '@aziontech/webkit/item'",
+  "import Avatar from '@aziontech/webkit/avatar'",
+  "import Button from '@aziontech/webkit/button'"
+]
+
+const AVATAR_MARKUP = `<Item kind="outline">
+  <Item.Media>
+    <Avatar src="${sampleAvatarSrc}" alt="Evil Rabbit" label="ER" size="medium" />
+  </Item.Media>
+  <Item.Content>
+    <Item.Title>Evil Rabbit</Item.Title>
+    <Item.Description>Last seen 5 months ago</Item.Description>
+  </Item.Content>
+  <Item.Actions>
+    <Button label="Invite" kind="outlined" size="small" icon="pi pi-plus" />
+  </Item.Actions>
+</Item>`
+
 /** @type {import('@storybook/vue3').StoryObj<typeof Item>} */
 export const WithAvatar = {
   render: (args) => ({
@@ -246,7 +306,7 @@ export const WithAvatar = {
       return { args, sampleAvatarSrc }
     },
     template: `
-      <div class="flex w-full max-w-lg flex-col gap-[var(--spacing-4)]">
+      <div class="flex w-full flex-col gap-[var(--spacing-4)]">
         <Item kind="outline" v-bind="args">
           <ItemMedia>
             <Avatar
@@ -271,11 +331,31 @@ export const WithAvatar = {
     docs: {
       description: {
         story: 'Default ItemMedia slot fits Avatar for profile-style rows.'
-      }
+      },
+      source: { code: toSfc(AVATAR_IMPORTS, AVATAR_MARKUP) }
     }
   }
 }
 
+const IMAGE_IMPORTS = ["import Item from '@aziontech/webkit/item'"]
+
+const IMAGE_MARKUP = `<Item kind="outline">
+  <Item.Media media-kind="image">
+    <img
+      src="${sampleThumbnailSrc}"
+      alt="Midnight City Lights"
+      class="object-cover size-10 grayscale rounded-[var(--shape-card)]"
+    />
+  </Item.Media>
+  <Item.Content>
+    <Item.Title>Midnight City Lights</Item.Title>
+    <Item.Description>Neon Dreams · Electric Nights</Item.Description>
+  </Item.Content>
+  <Item.Content class="flex-none text-center">
+    <Item.Description>3:45</Item.Description>
+  </Item.Content>
+</Item>`
+
 /** @type {import('@storybook/vue3').StoryObj<typeof Item>} */
 export const WithImageMedia = {
   render: (args) => ({
@@ -284,7 +364,7 @@ export const WithImageMedia = {
       return { args, sampleThumbnailSrc }
     },
     template: `
-      <div class="flex w-full max-w-md flex-col gap-[var(--spacing-4)]">
+      <div class="flex w-full flex-col gap-[var(--spacing-4)]">
         <Item kind="outline" v-bind="args">
           <ItemMedia media-kind="image">
             <img
@@ -309,20 +389,47 @@ export const WithImageMedia = {
       description: {
         story:
           'ItemMedia with mediaKind image crops a thumbnail; a second ItemContent column can show metadata.'
-      }
+      },
+      source: { code: toSfc(IMAGE_IMPORTS, IMAGE_MARKUP) }
     }
   }
 }
 
+const AS_CHILD_IMPORTS = ["import Item from '@aziontech/webkit/item'"]
+
+const AS_CHILD_MARKUP = `<div class="flex w-full flex-col gap-[var(--spacing-4)]">
+  <Item kind="outline" as-child>
+    <a href="#" class="no-underline text-inherit">
+      <Item.Content>
+        <Item.Title>Visit our documentation</Item.Title>
+        <Item.Description>Learn how to get started with our components.</Item.Description>
+      </Item.Content>
+      <Item.Actions>
+        <i class="ai ai-angle-right text-[length:inherit] leading-none" aria-hidden="true" />
+      </Item.Actions>
+    </a>
+  </Item>
+  <Item kind="outline" size="small" as-child>
+    <a href="#" class="no-underline text-inherit">
+      <Item.Media media-kind="icon">
+        <i class="pi pi-verified text-[length:inherit] leading-none" aria-hidden="true" />
+      </Item.Media>
+      <Item.Content>
+        <Item.Title>Your profile has been verified.</Item.Title>
+      </Item.Content>
+      <Item.Actions>
+        <i class="ai ai-angle-right text-[length:inherit] leading-none" aria-hidden="true" />
+      </Item.Actions>
+    </a>
+  </Item>
+</div>`
+
 /** @type {import('@storybook/vue3').StoryObj<typeof Item>} */
 export const WithAsChild = {
-  render: (args) => ({
+  render: () => ({
     components: itemSubcomponents,
-    setup() {
-      return { args }
-    },
     template: `
-      <div class="flex w-full max-w-md flex-col gap-[var(--spacing-4)]">
+      <div class="flex w-full flex-col gap-[var(--spacing-4)]">
         <Item kind="outline" as-child>
           <a href="#" class="no-underline text-inherit">
             <ItemContent>
@@ -339,7 +446,7 @@ export const WithAsChild = {
         <Item kind="outline" size="small" as-child>
           <a href="#" class="no-underline text-inherit">
             <ItemMedia media-kind="icon">
-              <i class="ai ai-verified text-[length:inherit] leading-none" aria-hidden="true" />
+              <i class="pi pi-verified text-[length:inherit] leading-none" aria-hidden="true" />
             </ItemMedia>
             <ItemContent>
               <ItemTitle>Your profile has been verified.</ItemTitle>
@@ -356,12 +463,38 @@ export const WithAsChild = {
     docs: {
       description: {
         story:
-          'With asChild, layout classes merge onto the anchor; use native link focus styles or slotted Button for actions.'
-      }
+          'With asChild, layout classes merge onto the anchor, which becomes the single focusable element of the row and draws the focus-visible ring. Tab to a row to see it.'
+      },
+      source: { code: toSfc(AS_CHILD_IMPORTS, AS_CHILD_MARKUP) }
     }
   }
 }
 
+const GROUP_IMPORTS = [
+  "import Item from '@aziontech/webkit/item'",
+  "import Avatar from '@aziontech/webkit/avatar'",
+  "import Button from '@aziontech/webkit/button'"
+]
+
+const groupRow = (person) => `  <Item>
+    <Item.Media>
+      <Avatar src="${person.avatar}" alt="${person.username}" label="${person.username
+  .charAt(0)
+  .toUpperCase()}" size="medium" />
+    </Item.Media>
+    <Item.Content class="gap-[var(--spacing-1)]">
+      <Item.Title>${person.username}</Item.Title>
+      <Item.Description>${person.email}</Item.Description>
+    </Item.Content>
+    <Item.Actions>
+      <Button label="Add" kind="text" size="small" icon="pi pi-plus" />
+    </Item.Actions>
+  </Item>`
+
+const GROUP_MARKUP = `<Item.Group>
+${people.map(groupRow).join('\n')}
+</Item.Group>`
+
 /** @type {import('@storybook/vue3').StoryObj<typeof Item>} */
 export const WithGroup = {
   render: (args) => ({
@@ -370,28 +503,235 @@ export const WithGroup = {
       return { args, people }
     },
     template: `
-      <div class="flex w-full max-w-md flex-col gap-[var(--spacing-4)]">
+      <div class="flex w-full">
         <ItemGroup>
-          <template v-for="(person, index) in people" :key="person.username">
-            <Item v-bind="args">
-              <ItemMedia>
-                <Avatar
-                  :src="person.avatar"
-                  :alt="person.username"
-                  :label="person.username.charAt(0).toUpperCase()"
-                  size="medium"
-                />
+          <Item
+            v-for="person in people"
+            :key="person.username"
+            v-bind="args"
+          >
+            <ItemMedia>
+              <Avatar
+                :src="person.avatar"
+                :alt="person.username"
+                :label="person.username.charAt(0).toUpperCase()"
+                size="medium"
+              />
+            </ItemMedia>
+            <ItemContent class="gap-[var(--spacing-1)]">
+              <ItemTitle>{{ person.username }}</ItemTitle>
+              <ItemDescription>{{ person.email }}</ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Button label="Add" kind="text" size="small" icon="pi pi-plus" />
+            </ItemActions>
+          </Item>
+        </ItemGroup>
+      </div>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'ItemGroup is the off-card list: it stacks rows with a gap between them (no dividers) and forces its items inline (no per-item surface/padding) to avoid a box-in-box effect.'
+      },
+      source: { code: toSfc(GROUP_IMPORTS, GROUP_MARKUP) }
+    }
+  }
+}
+
+const WITH_LIST_IMPORTS = [
+  "import Item from '@aziontech/webkit/item'",
+  "import CardBox from '@aziontech/webkit/card-box'",
+  "import Button from '@aziontech/webkit/button'"
+]
+
+const WITH_LIST_ROW = `      <Item>
+        <Item.Media media-kind="icon">
+          <i class="ai ai-edge-application text-[length:inherit] leading-none" aria-hidden="true" />
+        </Item.Media>
+        <Item.Content>
+          <Item.Title>Basic Item</Item.Title>
+          <Item.Description>A simple item with title and description.</Item.Description>
+        </Item.Content>
+        <Item.Actions>
+          <Button label="Action" kind="outlined" size="small" />
+        </Item.Actions>
+      </Item>`
+
+const WITH_LIST_MARKUP = `<CardBox :padded="false" class="w-full">
+  <template #content>
+    <Item.List>
+${WITH_LIST_ROW}
+${WITH_LIST_ROW}
+${WITH_LIST_ROW}
+    </Item.List>
+  </template>
+</CardBox>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Item>} */
+export const WithList = {
+  render: (args) => ({
+    components: itemSubcomponents,
+    setup() {
+      return { args }
+    },
+    template: `
+      <CardBox :padded="false" class="w-full">
+        <template #content>
+          <ItemList>
+            <Item v-bind="args" v-for="n in 3" :key="n">
+              <ItemMedia media-kind="icon">
+                <i class="ai ai-edge-application text-[length:inherit] leading-none" aria-hidden="true" />
               </ItemMedia>
-              <ItemContent class="gap-[var(--spacing-1)]">
-                <ItemTitle>{{ person.username }}</ItemTitle>
-                <ItemDescription>{{ person.email }}</ItemDescription>
+              <ItemContent>
+                <ItemTitle>Basic Item</ItemTitle>
+                <ItemDescription>A simple item with title and description.</ItemDescription>
               </ItemContent>
               <ItemActions>
-                <Button label="Add" kind="text" size="small" icon="pi pi-plus" />
+                <Button label="Action" kind="outlined" size="small" />
               </ItemActions>
             </Item>
-            <ItemSeparator v-if="index !== people.length - 1" />
-          </template>
+          </ItemList>
+        </template>
+      </CardBox>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'ItemList is the in-card list: placed inside a CardBox with padded=false, rows are separated by full-width dividers and sit flush to the card edges.'
+      },
+      source: { code: toSfc(WITH_LIST_IMPORTS, WITH_LIST_MARKUP) }
+    }
+  }
+}
+
+const AS_CHILD_LIST_IMPORTS = [
+  "import Item from '@aziontech/webkit/item'",
+  "import CardBox from '@aziontech/webkit/card-box'"
+]
+
+const AS_CHILD_LIST_ROW = `      <Item as-child>
+        <a href="#" class="no-underline text-inherit">
+          <Item.Media media-kind="icon">
+            <i class="ai ai-edge-application text-[length:inherit] leading-none" aria-hidden="true" />
+          </Item.Media>
+          <Item.Content>
+            <Item.Title>Basic Item</Item.Title>
+            <Item.Description>A simple item with title and description.</Item.Description>
+          </Item.Content>
+          <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+        </a>
+      </Item>`
+
+const AS_CHILD_LIST_MARKUP = `<CardBox :padded="false" class="w-full">
+  <template #content>
+    <Item.List>
+${AS_CHILD_LIST_ROW}
+${AS_CHILD_LIST_ROW}
+${AS_CHILD_LIST_ROW}
+    </Item.List>
+  </template>
+</CardBox>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Item>} */
+export const WithListAsChild = {
+  render: () => ({
+    components: itemSubcomponents,
+    template: `
+      <CardBox :padded="false" class="w-full">
+        <template #content>
+          <ItemList>
+            <Item as-child v-for="n in 3" :key="n">
+              <a href="#" class="no-underline text-inherit">
+                <ItemMedia media-kind="icon">
+                  <i class="ai ai-edge-application text-[length:inherit] leading-none" aria-hidden="true" />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle>Basic Item</ItemTitle>
+                  <ItemDescription>A simple item with title and description.</ItemDescription>
+                </ItemContent>
+                <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+              </a>
+            </Item>
+          </ItemList>
+        </template>
+      </CardBox>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'asChild rows inside an ItemList: each whole row is an anchor (data-kind forced to default by the list), separated by full-width dividers, with row-level hover and a focus-visible ring on Tab.'
+      },
+      source: { code: toSfc(AS_CHILD_LIST_IMPORTS, AS_CHILD_LIST_MARKUP) }
+    }
+  }
+}
+
+const INLINE_IMPORTS = ["import Item from '@aziontech/webkit/item'"]
+
+const inlineRow = (icon, title, description) => `  <Item kind="inline" size="small">
+    <Item.Media media-kind="icon">
+      <i class="ai ${icon} text-[length:inherit] leading-none" aria-hidden="true" />
+    </Item.Media>
+    <Item.Content>
+      <Item.Title>${title}</Item.Title>
+      <Item.Description>${description}</Item.Description>
+    </Item.Content>
+    <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+  </Item>`
+
+const INLINE_MARKUP = `<Item.Group>
+${inlineRow('ai-domains', 'Customize Domain', 'Link custom domains and subdomains to Azion.')}
+${inlineRow('ai-network-lists', 'Point Traffic', 'Redirect domain traffic to Azion.')}
+${inlineRow('ai-real-time-metrics', 'View Analytics', 'Monitor performance, availability, and security.')}
+</Item.Group>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof Item>} */
+export const Inline = {
+  render: (args) => ({
+    components: itemSubcomponents,
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="flex w-full">
+        <ItemGroup>
+          <Item kind="inline" size="small" v-bind="args">
+            <ItemMedia media-kind="icon">
+              <i class="ai ai-domains text-[length:inherit] leading-none" aria-hidden="true" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Customize Domain</ItemTitle>
+              <ItemDescription>Link custom domains and subdomains to Azion.</ItemDescription>
+            </ItemContent>
+            <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+          </Item>
+          <Item kind="inline" size="small" v-bind="args">
+            <ItemMedia media-kind="icon">
+              <i class="ai ai-network-lists text-[length:inherit] leading-none" aria-hidden="true" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Point Traffic</ItemTitle>
+              <ItemDescription>Redirect domain traffic to Azion.</ItemDescription>
+            </ItemContent>
+            <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+          </Item>
+          <Item kind="inline" size="small" v-bind="args">
+            <ItemMedia media-kind="icon">
+              <i class="ai ai-real-time-metrics text-[length:inherit] leading-none" aria-hidden="true" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>View Analytics</ItemTitle>
+              <ItemDescription>Monitor performance, availability, and security.</ItemDescription>
+            </ItemContent>
+            <i class="pi pi-arrow-right text-[var(--text-muted)]" aria-hidden="true" />
+          </Item>
         </ItemGroup>
       </div>
     `
@@ -399,8 +739,10 @@ export const WithGroup = {
   parameters: {
     docs: {
       description: {
-        story: 'ItemGroup stacks rows with avatars, actions, and ItemSeparator between entries.'
-      }
+        story:
+          'kind="inline" removes the outer padding so items sit flush; placed in a gapped ItemGroup directly on the page (no card, no dividers).'
+      },
+      source: { code: toSfc(INLINE_IMPORTS, INLINE_MARKUP) }
     }
   }
 }
diff --git a/apps/storybook/src/stories/components/content/card-box/CardBox.stories.js b/apps/storybook/src/stories/components/content/card-box/CardBox.stories.js
index 0918eb49e..4b9495bce 100644
--- a/apps/storybook/src/stories/components/content/card-box/CardBox.stories.js
+++ b/apps/storybook/src/stories/components/content/card-box/CardBox.stories.js
@@ -61,7 +61,7 @@ const Template = (args) => ({
   template: `
     <CardBox v-bind="args" class="w-full max-w-[512px]">
       <template #content>
-        <p class="text-body-md text-[var(--text-default)] p-[var(--spacing-4)]">
+        <p class="text-body-md text-[var(--text-default)]">
           Card body content. Place forms, tables, or any markup in the content slot.
         </p>
       </template>
@@ -73,3 +73,29 @@ const Template = (args) => ({
 export const Default = {
   render: Template
 }
+
+/** @type {import('@storybook/vue3').StoryObj<typeof CardBox>} */
+export const Flush = {
+  render: (args) => ({
+    components: { CardBox },
+    setup() {
+      return { args }
+    },
+    template: `
+      <CardBox v-bind="args" :padded="false" class="w-full max-w-[512px]">
+        <template #content>
+          <p class="text-body-md text-[var(--text-default)] p-[var(--spacing-4)]">
+            With padded=false the content sits flush to the card edges; the content owns its own padding (or renders an ItemList with full-width dividers).
+          </p>
+        </template>
+      </CardBox>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set `padded=false` for edge-to-edge content such as an ItemList with full-width dividers.'
+      }
+    }
+  }
+}
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index c0fbaa4f2..dbb38e096 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -73,6 +73,7 @@
     "./item": "./src/components/content/item/index.ts",
     "./item-root": "./src/components/content/item/item.vue",
     "./item-group": "./src/components/content/item/item-group.vue",
+    "./item-list": "./src/components/content/item/item-list.vue",
     "./item-separator": "./src/components/content/item/item-separator.vue",
     "./item-media": "./src/components/content/item/item-media.vue",
     "./item-content": "./src/components/content/item/item-content.vue",
diff --git a/packages/webkit/src/components/content/card-box/card-box.vue b/packages/webkit/src/components/content/card-box/card-box.vue
index ffa5ad818..7be48915e 100644
--- a/packages/webkit/src/components/content/card-box/card-box.vue
+++ b/packages/webkit/src/components/content/card-box/card-box.vue
@@ -12,9 +12,12 @@
     defineProps<{
       /** Heading rendered in the header when the `header` slot is empty. */
       title?: string
+      /** Pads the content region. Set false for flush, edge-to-edge content such as an ItemList with full-width dividers. */
+      padded?: boolean
     }>(),
     {
-      title: ''
+      title: '',
+      padded: true
     }
   )
 
@@ -60,7 +63,7 @@
 
   const titleClasses = 'text-label-md text-[var(--text-default)]'
 
-  const contentClasses = 'flex min-h-0 flex-1 flex-col'
+  const contentClasses = 'flex min-h-0 flex-1 flex-col data-[padded]:p-[var(--spacing-md)]'
 
   const footerClasses =
     'flex min-h-14 shrink-0 items-center justify-center gap-[var(--spacing-sm)] border-t border-[var(--border-default)] px-[var(--spacing-md)] py-[var(--spacing-sm)]'
@@ -100,6 +103,7 @@
 
     <div
       :class="contentClasses"
+      :data-padded="props.padded || null"
       :data-testid="`${testId}__content`"
     >
       <slot
diff --git a/packages/webkit/src/components/content/item/index.ts b/packages/webkit/src/components/content/item/index.ts
index 632e442fd..fd63b7679 100644
--- a/packages/webkit/src/components/content/item/index.ts
+++ b/packages/webkit/src/components/content/item/index.ts
@@ -5,12 +5,14 @@ import ItemDescription from './item-description.vue'
 import ItemFooter from './item-footer.vue'
 import ItemGroup from './item-group.vue'
 import ItemHeader from './item-header.vue'
+import ItemList from './item-list.vue'
 import ItemMedia from './item-media.vue'
 import ItemSeparator from './item-separator.vue'
 import ItemTitle from './item-title.vue'
 
 type CompoundItem = typeof Item & {
   Group: typeof ItemGroup
+  List: typeof ItemList
   Separator: typeof ItemSeparator
   Media: typeof ItemMedia
   Content: typeof ItemContent
@@ -23,6 +25,7 @@ type CompoundItem = typeof Item & {
 
 const ItemRoot = Object.assign(Item, {
   Group: ItemGroup,
+  List: ItemList,
   Separator: ItemSeparator,
   Media: ItemMedia,
   Content: ItemContent,
diff --git a/packages/webkit/src/components/content/item/injection-key.ts b/packages/webkit/src/components/content/item/injection-key.ts
index b26e19b55..82d66ca59 100644
--- a/packages/webkit/src/components/content/item/injection-key.ts
+++ b/packages/webkit/src/components/content/item/injection-key.ts
@@ -1,6 +1,6 @@
 import type { InjectionKey } from 'vue'
 
-export type ItemKind = 'default' | 'outline' | 'muted'
+export type ItemKind = 'default' | 'outline' | 'muted' | 'inline'
 export type ItemSize = 'small' | 'medium'
 
 export interface ItemContext {
@@ -10,3 +10,15 @@ export interface ItemContext {
 }
 
 export const ItemInjectionKey: InjectionKey<ItemContext> = Symbol('ItemContext')
+
+/**
+ * Provided by list containers (ItemGroup, ItemList) to force every descendant Item to a single
+ * `kind`, avoiding a box-in-box effect. ItemGroup forces `inline` (borderless, no padding);
+ * ItemList forces `default` (padded rows, transparent surface, no per-item border).
+ */
+export interface ItemContainerContext {
+  forceKind: ItemKind
+}
+
+export const ItemContainerInjectionKey: InjectionKey<ItemContainerContext> =
+  Symbol('ItemContainerContext')
diff --git a/packages/webkit/src/components/content/item/item-group.vue b/packages/webkit/src/components/content/item/item-group.vue
index e415afe2a..5a5e43c0e 100644
--- a/packages/webkit/src/components/content/item/item-group.vue
+++ b/packages/webkit/src/components/content/item/item-group.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-  import { computed, useAttrs } from 'vue'
+  import { computed, provide, useAttrs } from 'vue'
+
+  import { ItemContainerInjectionKey } from './injection-key'
 
   defineOptions({
     name: 'ItemGroup',
@@ -15,6 +17,10 @@
   const testId = computed(
     () => (attrs['data-testid'] as string | undefined) ?? 'content-item-group'
   )
+
+  // A group is a borderless, gapped list — force descendant Items inline so they don't draw their
+  // own surface/padding inside the group (avoids the box-in-box effect).
+  provide(ItemContainerInjectionKey, { forceKind: 'inline' })
 </script>
 
 <template>
@@ -23,7 +29,7 @@
     role="list"
     data-slot="item-group"
     :data-testid="testId"
-    class="group/item-group flex flex-col"
+    class="group/item-group flex flex-col gap-[var(--spacing-lg)]"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/content/item/item-list.vue b/packages/webkit/src/components/content/item/item-list.vue
new file mode 100644
index 000000000..0fb20dd9d
--- /dev/null
+++ b/packages/webkit/src/components/content/item/item-list.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import { computed, provide, useAttrs } from 'vue'
+
+  import { ItemContainerInjectionKey } from './injection-key'
+
+  defineOptions({
+    name: 'ItemList',
+    inheritAttrs: false
+  })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+
+  const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'content-item-list')
+
+  // The CardBox is the single box and dividers separate the rows — force descendant Items to the
+  // default kind (padded, transparent, no per-item border) so they don't draw a box inside the box.
+  provide(ItemContainerInjectionKey, { forceKind: 'default' })
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    role="list"
+    data-slot="item-list"
+    :data-testid="testId"
+    class="flex w-full flex-col [&>[data-slot=item]]:rounded-none [&>[data-slot=item]]:border-b-[color:var(--border-muted)] [&>[data-slot=item]:last-child]:border-b-[color:transparent]"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/content/item/item.vue b/packages/webkit/src/components/content/item/item.vue
index e5ffaf133..8d752354c 100644
--- a/packages/webkit/src/components/content/item/item.vue
+++ b/packages/webkit/src/components/content/item/item.vue
@@ -1,9 +1,18 @@
 <script setup lang="ts">
-  import { computed, provide, useAttrs, useSlots } from 'vue'
+  import { computed, inject, provide, useAttrs, useSlots } from 'vue'
 
   import { cn } from '../../../utils/cn'
-  import { itemRowShellClasses } from '../../inputs/presets/interactive-states'
-  import { ItemInjectionKey, type ItemKind, type ItemSize } from './injection-key'
+  import {
+    focusVisibleRingClasses,
+    ghostLayerClasses,
+    itemRowShellClasses
+  } from '../../inputs/presets/interactive-states'
+  import {
+    ItemContainerInjectionKey,
+    ItemInjectionKey,
+    type ItemKind,
+    type ItemSize
+  } from './injection-key'
   import { mergeAsChildSlot } from './merge-as-child'
 
   defineOptions({
@@ -14,7 +23,7 @@
   export type { ItemKind, ItemSize }
 
   interface Props {
-    /** Item root surface variant. */
+    /** Item root surface variant. `inline` removes the outer padding for inline placement and divided in-card lists. */
     kind?: ItemKind
     /** Item root density (padding and gap). */
     size?: ItemSize
@@ -34,9 +43,14 @@
 
   const attrs = useAttrs()
   const slots = useSlots()
+  const container = inject(ItemContainerInjectionKey, null)
 
   const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'content-item')
 
+  // Inside a list container (ItemGroup forces `inline`, ItemList forces `default`), the container's
+  // kind wins to avoid a box-in-box effect.
+  const kind = computed<ItemKind>(() => container?.forceKind ?? props.kind)
+
   const rootBindings = computed(() => {
     const rest = { ...attrs }
 
@@ -46,15 +60,21 @@
       ...rest,
       'data-slot': 'item',
       'data-testid': testId.value,
-      'data-kind': props.kind,
+      'data-kind': kind.value,
       'data-size': props.size,
-      class: cn(itemRowShellClasses, attrs.class as string | undefined)
+      // as-child target is the sole focusable/hoverable element for the whole row, so it draws the
+      // focus ring and hover/active ghost layers.
+      class: cn(
+        itemRowShellClasses,
+        props.asChild && [...focusVisibleRingClasses, ...ghostLayerClasses],
+        attrs.class as string | undefined
+      )
     }
   })
 
   provide(ItemInjectionKey, {
     testId: testId.value,
-    kind: props.kind,
+    kind: kind.value,
     size: props.size
   })
 
diff --git a/packages/webkit/src/components/inputs/presets/interactive-states.js b/packages/webkit/src/components/inputs/presets/interactive-states.js
index 3a0d43eae..d5bf4f110 100644
--- a/packages/webkit/src/components/inputs/presets/interactive-states.js
+++ b/packages/webkit/src/components/inputs/presets/interactive-states.js
@@ -107,8 +107,9 @@ export const itemRowShellClasses = [
   'rounded-[var(--shape-button)] border border-transparent text-body-sm text-[var(--text-default)]',
   'data-[kind=outline]:border-[var(--border-muted)] data-[kind=outline]:bg-[var(--bg-surface)]',
   'data-[kind=muted]:bg-[var(--bg-hover)]',
-  'data-[size=medium]:gap-[var(--spacing-md)] data-[size=medium]:p-[var(--spacing-md)]',
-  'data-[size=small]:gap-[var(--spacing-xs)] data-[size=small]:px-[var(--spacing-md)] data-[size=small]:py-[var(--spacing-sm)]'
+  // kind=inline needs no surface treatment (transparent, like default) and drops the outer padding below.
+  'data-[size=medium]:gap-[var(--spacing-md)] [&:not([data-kind=inline])]:data-[size=medium]:p-[var(--spacing-md)]',
+  'data-[size=small]:gap-[var(--spacing-xs)] [&:not([data-kind=inline])]:data-[size=small]:px-[var(--spacing-md)] [&:not([data-kind=inline])]:data-[size=small]:py-[var(--spacing-sm)]'
 ]
 
 /** Item shell only — no row-level hover/focus; slotted Button/link own interaction. */
diff --git a/packages/webkit/src/components/templates/deploy-success/deploy-success.vue b/packages/webkit/src/components/templates/deploy-success/deploy-success.vue
index eb3dd6502..259a74045 100644
--- a/packages/webkit/src/components/templates/deploy-success/deploy-success.vue
+++ b/packages/webkit/src/components/templates/deploy-success/deploy-success.vue
@@ -148,6 +148,7 @@
     >
       <CardBox
         class="w-full max-w-[768px]"
+        :padded="false"
         :data-testid="`${testId}__card`"
       >
         <template #header>
diff --git a/packages/webkit/src/components/templates/onboarding-form/onboarding-form.vue b/packages/webkit/src/components/templates/onboarding-form/onboarding-form.vue
index 0dab698a2..c9cef2d90 100644
--- a/packages/webkit/src/components/templates/onboarding-form/onboarding-form.vue
+++ b/packages/webkit/src/components/templates/onboarding-form/onboarding-form.vue
@@ -151,6 +151,7 @@
   >
     <CardBox
       class="w-full"
+      :padded="false"
       :data-testid="`${testId}__card`"
     >
       <template #content>
diff --git a/packages/webkit/src/components/templates/plan-success/plan-success.vue b/packages/webkit/src/components/templates/plan-success/plan-success.vue
index 81cb9d27a..d4aedca92 100644
--- a/packages/webkit/src/components/templates/plan-success/plan-success.vue
+++ b/packages/webkit/src/components/templates/plan-success/plan-success.vue
@@ -99,6 +99,7 @@
     >
       <CardBox
         class="w-full max-w-[512px]"
+        :padded="false"
         :data-testid="`${testId}__card`"
       >
         <template #header>