chore(x): adds XDl component

[johncowen]

Similar to #4191 this PR adds a thin layer over native dl so we can provide our own styles to a dl in a more controlled way that adding global styles and or having a class that we add to every dl.

Like XTable, this component should be seen in atomic terms as an atom, i.e. the smallest possible purpose (its almost a native dl). In avoiding global styles and using a restricted set of :variants we can have more control over dls globally across our application.

As with XTable this PR includes a single implementation, once this is merged we can roll it out everywhere else.

My only slight concern about this PR is the awkward three letter name: XDl, however this stick consistently to the pattern of:

1. All x components begin with X so we never hit vue restrictions over disallowing single word components.
2. These "atom" components (which are a super thin layer of native elements) use the exact same name as the native element so its recognisable to other engineers - this makes its super obvious to use and know what it is/should be used for.

Given the above, there is no other name we can use but XDl

[netlify]

✅ Deploy Preview for kuma-gui ready!

Name	Link
🔨 Latest commit	95a26cd
🔍 Latest deploy log	https://app.netlify.com/projects/kuma-gui/deploys/68c3e7e4f9eabc000822e696
😎 Deploy Preview	https://deploy-preview-4228--kuma-gui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[schogges]

Would it make sense to align the wording to XLayout type stack?

[johncowen]

Yes, definitely! but I would like to go the other way around (and I plan to) and move stack in XLayout to y-stack (and x-stack)

[schogges]

Ah I see 💡 but isn't stack implicitly vertical? If I understand correctly in XLayout you are planning to renaming separated to x-stack and stack to y-stack?

[johncowen]

I would like XLayout to have x-stack and y-stack i.e. "stack" horizontally or vertically

I would also like to keep XLayout's separated which is supposed to be for laying out things in a similar way to a "comma separated list", which is inline and therefore not exactly that same as a block x-stack

Vaguely related, is that I would also like to move XLayout to use :variant eventually.