diff --git a/components/attention/attentionUtil.js b/components/attention/attentionUtil.js
index 77a7ad60..610b1af6 100644
--- a/components/attention/attentionUtil.js
+++ b/components/attention/attentionUtil.js
@@ -23,6 +23,7 @@ export const props = {
 
 const middlePosition = 'calc(50% - 7px)'
 const isDirectionVertical = (name) => [TOP, BOTTOM].includes(name)
+
 export const computeCalloutArrow = ({ actualDirection, directionName, arrowEl }) => {
   actualDirection.value = directionName.value
   const directionIsVertical = isDirectionVertical(directionName.value)
diff --git a/components/attention/w-attention-arrow.vue b/components/attention/w-attention-arrow.vue
index 3bd63d04..f47cd6ea 100644
--- a/components/attention/w-attention-arrow.vue
+++ b/components/attention/w-attention-arrow.vue
@@ -1,36 +1,41 @@
+<script setup>
+  import { computed } from 'vue'
+  import { props as attentionProps, opposites, rotation } from './attentionUtil.js'
+  import { attention as ccAttention } from '@warp-ds/component-classes'
+  
+  const props = defineProps({
+    ...attentionProps,
+    direction: String
+  })
+
+  const arrowDirectionClassname = computed(() => {
+    const direction = arrowDirection.value?.charAt(0).toUpperCase() + arrowDirection.value?.slice(1);
+
+    return `arrowDirection${direction}`;
+  })
+
+  const arrowDirection = computed(() => opposites[props.direction])
+
+  const arrowClasses = computed(() => ({
+    [ccAttention.arrowBase]: true,
+    [ccAttention[arrowDirectionClassname.value]]: true,  
+    [ccAttention.arrowTooltip]: props.tooltip,
+    [ccAttention.arrowCallout]: props.callout,
+    [ccAttention.arrowPopover]: props.popover
+}));
+
+  const arrowStyle = computed(() => ({
+    // border alignment is off by a fraction of a pixel, this fixes it
+    [`margin-${arrowDirection.value}`]: '-0.5px',
+    transform: `rotate(${rotation[arrowDirection.value]}deg)`,
+  }))
+</script>
+
 <template>
-  <div :class="arrowClass" :style="arrowStyle" />
+  <div :class="arrowClasses" :style="arrowStyle" />
 </template>
 
 <script>
-import { computed } from 'vue'
-import { props as attentionProps, opposites, rotation } from './attentionUtil.js'
-
-export default {
-  name: 'wAttentionArrow',
-  inheritAttrs: false,
-  props: {
-    ...attentionProps,
-    direction: String
-  },
-  setup: (props) => {
-    const arrowDirection = computed(() => opposites[props.direction])
-    const arrowClass = computed(() => ({
-      ['absolute h-14 w-14 border-2 border-b-0 border-r-0 transform']: true,
-      [`-${arrowDirection.value}-8`]: true,
-      ['bg-gray-700 border-gray-700']: props.tooltip,
-      ['bg-green-100 border-green-400']: props.callout,
-      ['bg-white border-white']: props.popover,
-    }))
-    const arrowStyle = computed(() => ({
-      // TW doesn't let us specify exactly one corner, only whole sides
-      borderTopLeftRadius: '4px',
-      // border alignment is off by a fraction of a pixel, this fixes it
-      [`margin-${arrowDirection.value}`]: '-0.5px',
-      transform: `rotate(${rotation[arrowDirection.value]}deg)`
-    }))
-
-    return { arrowClass, arrowStyle }
-  }
-}
+export default { name: 'wAttentionArrow' };
 </script>
+
diff --git a/components/attention/w-attention.vue b/components/attention/w-attention.vue
index 1d0c4920..974c52d4 100644
--- a/components/attention/w-attention.vue
+++ b/components/attention/w-attention.vue
@@ -1,74 +1,79 @@
-<template>
-  <div :class="[{ 'absolute z-50': !callout }, attentionClass]" ref="attentionRef" v-show="model">
-    <div :class="wrapperClass" data-test="wrapper">
-      <w-attention-arrow v-bind="$props" v-if="!noArrow" ref="arrowEl" :direction="actualDirection" />
-      <div class="last-child:mb-0"><slot /></div>
-    </div>
-  </div>
-</template>
+<script setup>
+  import { watch, computed, ref, onMounted, nextTick } from 'vue'
+  import { attention as ccAttention } from '@warp-ds/component-classes'
+  import { computePosition, flip, offset, shift, arrow } from '@floating-ui/dom'
 
-<script>
-import { watch, computed, ref, onMounted, nextTick } from 'vue'
-import { absentProp } from '#util'
-import { props as attentionProps, directions, computeCalloutArrow } from './attentionUtil.js'
-import wAttentionArrow from './w-attention-arrow.vue'
-import { computePosition, flip, offset, shift, arrow } from '@floating-ui/dom'
-import { createModel, modelProps } from 'create-v-model'
+  import { absentProp } from '#util'
+  import { props as attentionProps, directions, computeCalloutArrow } from './attentionUtil.js'
+  import wAttentionArrow from './w-attention-arrow.vue'
+  import { createModel, modelProps } from 'create-v-model'
 
-export default {
-  name: 'wAttention',
-  props: {
+  const props = defineProps({
     ...attentionProps,
     ...modelProps({ modelDefault: absentProp }),
     targetEl: Object,
     attentionClass: [Object, String],
     attentionEl: {
       default: () => ref(null)
-    }
-  },
-  components: { wAttentionArrow },
-  setup: (props, { emit }) => {
-    const directionName = computed(() => directions.find(e => props[e]))
-    const wrapperClass = computed(() => ({
-      ['border-2 relative']: true,
-      ['bg-gray-700 border-gray-700 text-white rounded-4 py-6 px-8']: props.tooltip,
-      ['bg-green-100 border-green-400 py-8 px-16 rounded-8']: props.callout,
-      ['bg-white border-white rounded-8 p-16 filter drop-shadow-20']: props.popover,
-    }))
+    },
+  })
+  
+  const emit = defineEmits(['update:modelValue']);
+  const directionName = computed(() => directions.find(e => props[e]));
+
+  const wrapperClasses = computed(() => ({
+    [ccAttention.base]: true,
+    [ccAttention.tooltip]: props.tooltip,
+    [ccAttention.callout]: props.callout,
+    [ccAttention.popover]: props.popover
+  }))
+
+  const model = (props.modelValue === absentProp) ? ref(true) : createModel({ props, emit })
+  const arrowEl = ref(null)
+  const actualDirection = ref(directionName.value)
 
-    const model = (props.modelValue === absentProp) ? ref(true) : createModel({ props, emit })
-    const arrowEl = ref(null)
-    const actualDirection = ref(directionName.value)
-    const recompute = async () => {
-      if (!model.value) return
-      await nextTick()
-      if (props.callout) return computeCalloutArrow({ directionName, arrowEl, actualDirection })
-      const position = await computePosition(props.targetEl, props.attentionEl.value, {
-        placement: directionName.value,
-        middleware: [
-          flip(),
-          offset(8),
-          shift({ padding: 16 }),
-          arrow({ element: props.noArrow ? undefined : arrowEl.value.$el })
-        ]
-      })
-      actualDirection.value = position.placement
-      Object.assign(props.attentionEl.value.style, {
-        left: '0',
-        top: '0',
-        transform: `translate3d(${Math.round(position.x)}px, ${Math.round(position.y)}px, 0)`
-      })
-      let { x, y } = position.middlewareData.arrow
-      arrowEl.value.$el.style.left = x ? (x + 'px') : null
-      arrowEl.value.$el.style.top = y ? (y + 'px') : null
-    }
+  const recompute = async () => {
+    if (!model.value) return
+    await nextTick()
+    if (props.callout) return computeCalloutArrow({ directionName, arrowEl, actualDirection })
+    if(!props.attentionEl.value) return
 
-    onMounted(async () =>  {
-      watch(() => [props.top, props.bottom, props.left, props.right], recompute)
-      watch(model, recompute, { immediate: props.callout })
+    const position = await computePosition(props.targetEl, props.attentionEl.value, {
+      placement: directionName.value,
+      middleware: [
+        flip(),
+        offset(8),
+        shift({ padding: 16 }),
+        arrow({ element: props.noArrow ? undefined : arrowEl.value.$el })
+      ]
     })
 
-    return { wrapperClass, attentionRef: props.attentionEl, arrowEl, actualDirection, model }
+    actualDirection.value = position.placement
+    Object.assign(props.attentionEl.value.style, {
+      left: '0',
+      top: '0',
+      transform: `translate3d(${Math.round(position.x)}px, ${Math.round(position.y)}px, 0)`
+    })
+    let { x, y } = position.middlewareData.arrow
+    arrowEl.value.$el.style.left = x ? (x + 'px') : null
+    arrowEl.value.$el.style.top = y ? (y + 'px') : null
   }
-}
+
+  onMounted(async () =>  {
+    watch(() => [props.top, props.bottom, props.left, props.right], recompute)
+    watch(model, recompute, { immediate: props.callout })
+  })
+</script>
+
+<template>
+  <div :class="[{ 'absolute z-50': !callout }, attentionClass]" ref="attentionRef" v-show="model">
+    <div :class="wrapperClasses" data-test="wrapper">
+      <w-attention-arrow v-bind="$props" v-if="!noArrow" ref="arrowEl" :direction="actualDirection" />
+      <div :class="ccAttention.content"><slot /></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default { name: 'wAttention' }
 </script>
diff --git a/dev/pages/Attention.vue b/dev/pages/Attention.vue
index 05adb6ba..ff3aaeca 100644
--- a/dev/pages/Attention.vue
+++ b/dev/pages/Attention.vue
@@ -3,38 +3,41 @@ import { ref, reactive } from 'vue'
 import { radio, useIsActive } from '#dev-util'
 import { wAttention, wBox } from '#components'
 
-const target = ref(null)
-const showing = ref(false)
+const tooltipTarget = ref(null)
+const calloutTarget = ref(null)
+const popoverTarget = ref(null)
 
-const variant = reactive({ active: 'Tooltip' })
-const active = useIsActive(variant)
-const variantControls = [
-  { name: 'Tooltip', radio },
-  { name: 'Callout', radio },
-]
+const tooltipShowing = ref(false)
+const calloutShowing = ref(false)
+const popoverShowing = ref(false)
 </script>
 
 <template>
   <div>
     <component-title title="Attention" />
 
-    <token :state="[variant]">
-      <div v-if="active('Tooltip')">
-        <w-box neutral class="h4" ref="target" @mouseenter="showing = true" @mouseleave="showing = false">Hover over me</w-box>
-        <w-attention tooltip bottom :target-el="target?.$el" v-model="showing">
+    <token>
+      <div>
+        <h2>Tooltip</h2>
+        <w-box neutral class="h4" ref="tooltipTarget" @mouseenter="tooltipShowing = true; target = $refs.tooltipTarget" @mouseleave="tooltipShowing = false">Hover over me</w-box>
+        <w-attention tooltip bottom :target-el="tooltipTarget ? tooltipTarget.$el : null" v-model="tooltipShowing">
           <p>Hello Warp!</p>
         </w-attention>
       </div>
-      <div class="flex items-center" v-else-if="active('Callout')">
-        <w-box neutral class="h4">Don't hover over me</w-box>
-        <w-attention callout right class="ml-8">
+      <div class="flex items-center">
+        <h2>Callout</h2>
+        <w-box neutral class="h4" ref="calloutTarget" @mouseenter="calloutShowing = true; target = $refs.calloutTarget" @mouseleave="calloutShowing = false">Don't hover over me</w-box>
+        <w-attention callout right :target-el="calloutTarget ? calloutTarget.$el : null" v-model="calloutShowing" class="ml-8">
           <p>Hello Warp! This thing is new!</p>
         </w-attention>
       </div>
+      <div>
+        <h2>Popover</h2>
+        <w-box neutral class="h4" ref="popoverTarget" @mouseenter="popoverShowing = true; target = $refs.popoverTarget" @mouseleave="popoverShowing = false">Hover over me</w-box>
+        <w-attention popover bottom :target-el="popoverTarget ? popoverTarget.$el : null" v-model="popoverShowing">
+          <p>Hello Warp!</p>
+        </w-attention>
+      </div>
     </token>
-
-    <demo-controls>
-      <demo-control label="Variant" :controls="variantControls" :state="variant" />
-    </demo-controls>
   </div>
 </template>
diff --git a/package.json b/package.json
index 785635e9..6a4183c9 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,8 @@
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
     "@warp-ds/core": "^1.0.0",
-    "@warp-ds/component-classes": "^1.0.0-alpha.81",
-    "@warp-ds/uno": "1.0.0-alpha.26",
+    "@warp-ds/component-classes": "^1.0.0-alpha.87",
+    "@warp-ds/uno": "1.0.0-alpha.28",
     "cleave-lite": "^1.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "drnm": "^0.9.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 282e9070..6f9b404d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,14 +55,14 @@ devDependencies:
     specifier: ^2.0.2
     version: 2.3.0(vue@3.2.47)
   '@warp-ds/component-classes':
-    specifier: ^1.0.0-alpha.81
-    version: 1.0.0-alpha.81
+    specifier: ^1.0.0-alpha.87
+    version: 1.0.0-alpha.87
   '@warp-ds/core':
     specifier: ^1.0.0
     version: 1.0.0
   '@warp-ds/uno':
-    specifier: 1.0.0-alpha.26
-    version: 1.0.0-alpha.26
+    specifier: 1.0.0-alpha.28
+    version: 1.0.0-alpha.28
   cleave-lite:
     specifier: ^1.0.0
     version: 1.0.0
@@ -89,10 +89,10 @@ devDependencies:
     version: 0.10.1
   unocss:
     specifier: ^0.50.1
-    version: 0.50.2(postcss@8.4.21)(vite@4.2.1)
+    version: 0.50.2(vite@4.2.1)
   vite:
     specifier: ^4.2.1
-    version: 4.2.1(@types/node@18.15.10)
+    version: 4.2.1
   viteik:
     specifier: ^1.0.3
     version: 1.0.3(@eik/rollup-plugin@4.0.45)
@@ -284,7 +284,7 @@ packages:
     resolution: {integrity: sha512-h9z1jyz0ueOwNfAPnwjJk3JGCMdm/3TFqGiGi3KqLgx3fhHgKOLmZa9fqGgX0E8arCgN2YavJwHiBCsIKTqEdQ==}
     dependencies:
       ajv: 8.12.0
-      ajv-formats: 2.1.1(ajv@8.12.0)
+      ajv-formats: 2.1.1
       glob: 8.1.0
       is-glob: 4.0.3
       mime-types: 2.1.35
@@ -1023,8 +1023,8 @@ packages:
     resolution: {integrity: sha512-Z8m7uRDr3cM8y/Q/LKabNZc37GHJJYFjrp0vYNn8FJhzILqVNZCb4BnJNmGgaiGGSmfQVguK8Gqvs1jdb7RqeA==}
     dev: true
 
-  /@unocss/core@0.50.8:
-    resolution: {integrity: sha512-rWmyeNE0Na8dJPDynLVar0X22qMHFNhO+/F2FZDpG4tubTavXJJo9uvhZr/D381kiWxt+XZ38y6EAD4UMdBqMA==}
+  /@unocss/core@0.50.6:
+    resolution: {integrity: sha512-WMIp8xr7YSlID2whqfRGLwagp59e6u4ckPACEpoDOW8sTeSPRZm54hxPhuWXD1SQuqcwHPMtM9nzGD8UOnqQxA==}
     dev: true
 
   /@unocss/inspector@0.50.2:
@@ -1034,11 +1034,9 @@ packages:
       sirv: 2.0.2
     dev: true
 
-  /@unocss/postcss@0.50.2(postcss@8.4.21):
+  /@unocss/postcss@0.50.2:
     resolution: {integrity: sha512-S/3ccT/paDejRCD8t+/kOUSfLhJUT3UcUslrvEqPd7D3HmPMM3ykBV4Pm6Orkr7KdoFPPuR4BCxSuD0Sc9Z4/g==}
     engines: {node: '>=14'}
-    peerDependencies:
-      postcss: ^8.4.21
     dependencies:
       '@unocss/config': 0.50.2
       '@unocss/core': 0.50.2
@@ -1070,10 +1068,10 @@ packages:
       '@unocss/core': 0.50.2
     dev: true
 
-  /@unocss/preset-mini@0.50.8:
-    resolution: {integrity: sha512-/4sbOdyaqJMvFkw1xzo2+h6bZJHw6WCYw1mF+f0ydHzj8ruvwaj9ClDDOweW5cdrk3wzDzRZ6NPRahKqLwv6/Q==}
+  /@unocss/preset-mini@0.50.6:
+    resolution: {integrity: sha512-Ejgib688uvzCVgT/DHAOyXxKcM8vX55mxh8m3GAEx1H1pxg0IBfJO4QCKa3uAnasxj27XescBbvqv04dWi+jEQ==}
     dependencies:
-      '@unocss/core': 0.50.8
+      '@unocss/core': 0.50.6
     dev: true
 
   /@unocss/preset-tagify@0.50.2:
@@ -1159,7 +1157,7 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.2.12
       magic-string: 0.30.0
-      vite: 4.2.1(@types/node@18.15.10)
+      vite: 4.2.1
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -1171,7 +1169,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.2.1(@types/node@18.15.10)
+      vite: 4.2.1
       vue: 3.2.47
     dev: true
 
@@ -1305,8 +1303,8 @@ packages:
       '@vue/server-renderer': 3.2.47(vue@3.2.47)
     dev: true
 
-  /@warp-ds/component-classes@1.0.0-alpha.81:
-    resolution: {integrity: sha512-vjQ+jz4xuF4ngZwR25IJ/FzmgQI2OtuZr0DXJQrD38kXeRrVsbE0s1raTDvvd8oP/Q7nrB4rH5znSds9LI8lnA==}
+  /@warp-ds/component-classes@1.0.0-alpha.87:
+    resolution: {integrity: sha512-ylgq5e9xIr6FanCNgIQ2FJ5BRSwRUnDez0K8Dpp+j08iSOWuIpIvDymXULtSZra3VM6yHQpdnuGB/FKoLbS7mA==}
     dev: true
 
   /@warp-ds/core@1.0.0:
@@ -1315,11 +1313,11 @@ packages:
       '@floating-ui/dom': 0.5.4
     dev: true
 
-  /@warp-ds/uno@1.0.0-alpha.26:
-    resolution: {integrity: sha512-VrcGayt9OvhUyki43cnHKr7e41SxUfcu8ILkuMCJkm5mNfzap1WDX6j/Hb01qrgdcjBG4lbcAb0I3HfS9IEBQg==}
+  /@warp-ds/uno@1.0.0-alpha.28:
+    resolution: {integrity: sha512-Tu7SajJDfxnZWtG3ikg8Utp6RfBB0q5Hxrqk1vL3iRQVrg6/5a2peff8AtBO+wsQ0T1rgTz5NFncytD/UBJjcw==}
     dependencies:
-      '@unocss/core': 0.50.8
-      '@unocss/preset-mini': 0.50.8
+      '@unocss/core': 0.50.6
+      '@unocss/preset-mini': 0.50.6
     dev: true
 
   /JSONStream@1.3.5:
@@ -1376,10 +1374,8 @@ packages:
       indent-string: 5.0.0
     dev: true
 
-  /ajv-formats@2.1.1(ajv@8.12.0):
+  /ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
-    peerDependencies:
-      ajv: ^8.0.0
     peerDependenciesMeta:
       ajv:
         optional: true
@@ -5152,7 +5148,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.50.2(postcss@8.4.21)(vite@4.2.1):
+  /unocss@0.50.2(vite@4.2.1):
     resolution: {integrity: sha512-G1ZC0Qayt/HmSgC/T7XEEOgbxmgsxNKGjQCx4+tN3uIMJ8fsZv7HH+tKKiO2xHmvtsdfrU0xc6gkO9xi+8ExkA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -5164,7 +5160,7 @@ packages:
       '@unocss/astro': 0.50.2(vite@4.2.1)
       '@unocss/cli': 0.50.2
       '@unocss/core': 0.50.2
-      '@unocss/postcss': 0.50.2(postcss@8.4.21)
+      '@unocss/postcss': 0.50.2
       '@unocss/preset-attributify': 0.50.2
       '@unocss/preset-icons': 0.50.2
       '@unocss/preset-mini': 0.50.2
@@ -5180,7 +5176,6 @@ packages:
       '@unocss/transformer-variant-group': 0.50.2
       '@unocss/vite': 0.50.2(vite@4.2.1)
     transitivePeerDependencies:
-      - postcss
       - rollup
       - supports-color
       - vite
@@ -5249,6 +5244,39 @@ packages:
       - terser
     dev: true
 
+  /vite@4.2.1:
+    resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.17.14
+      postcss: 8.4.21
+      resolve: 1.22.1
+      rollup: 3.20.2
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vite@4.2.1(@types/node@18.15.10):
     resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
     engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/test/wAttention.test.js b/test/wAttention.test.js
index 68a744af..646a23ac 100644
--- a/test/wAttention.test.js
+++ b/test/wAttention.test.js
@@ -16,7 +16,7 @@ describe('attention', () => {
       slots: { default: defaultSlot } })
     assert.include(wrapper.text(), 'Hello Warp')
     const html = wrapper.get('[data-test="wrapper"]')
-    assert.include(html.classes().join(' '), 'bg-green')
+    assert.include(html.classes().join(' '), 'i-bg-$color-callout-background')
   })
   test('show/hide callout', async () => {
     const model = ref(false)
diff --git a/test/wButton.test.js b/test/wButton.test.js
index fe8bad2e..a34b82ad 100644
--- a/test/wButton.test.js
+++ b/test/wButton.test.js
@@ -1,6 +1,6 @@
 import { describe, test, assert } from 'vitest'
-import { button as ccButton } from '@warp-ds/component-classes';
 import { mount } from '@vue/test-utils'
+import { button as ccButton } from '@warp-ds/component-classes';
 import { wButton } from '#components'
 
 const label =  'Hello Warp'