fix: Styling fixes for Card component

components/card/w-card.vue

@@ -2,32 +2,33 @@
 import { card as ccCard } from '@warp-ds/css/component-classes';
 import { computed } from 'vue';
 
+defineOptions({
+  name: 'wCard',
+});
+
 const props = defineProps({
   as: { type: String, default: 'div' },
   selected: Boolean,
   flat: Boolean
 })
 
-const outerClasses = computed(() => ({
+const containerClasses = computed(() => ({
   [ccCard.card]: true,
   [ccCard.cardShadow]: !props.flat,
-  [props.selected ? ccCard.cardSelected : ccCard.cardUnselected]: !props.flat,
+  [ccCard.cardSelected]: !props.flat && props.selected,
   [ccCard.cardFlat]: props.flat,
   [props.selected ? ccCard.cardFlatSelected : ccCard.cardFlatUnselected]: props.flat
-}))
-const innerClasses = computed(() => ({
-  [ccCard.cardOutline]: true,
-  [props.selected ? ccCard.cardOutlineSelected : ccCard.cardOutlineUnselected]: true
-}))
+}));
+
+const outlineClasses = computed(() => [
+  ccCard.cardOutline,
+  props.selected ? ccCard.cardOutlineSelected : ccCard.cardOutlineUnselected,
+]);
 </script>
 
 <template>
-  <component :is="as" :class="outerClasses">
-    <div v-if="!flat" :class="innerClasses" />
+  <component :is="as" :class="containerClasses">
+    <div v-if="!flat" :class="outlineClasses" />
     <slot />
   </component>
 </template>
-
-<script>
-export default { name: 'wCard' }
-</script>

package.json

@@ -35,9 +35,9 @@
     "@floating-ui/dom": "1.6.3",
     "@lingui/core": "^4.7.0",
     "@warp-ds/core": "^1.0.2",
-    "@warp-ds/css": "1.9.1",
+    "@warp-ds/css": "1.9.3",
     "@warp-ds/icons": "2.0.0",
-    "@warp-ds/uno": "1.9.0",
+    "@warp-ds/uno": "1.10.2",
     "create-v-model": "^2.2.0",
     "dom-focus-lock": "^1.1.0",
     "element-collapse": "^1.1.0",