fix(inline classes): update inline classes

components/attention/w-attention.vue

@@ -21,6 +21,11 @@
   const emit = defineEmits(['update:modelValue']);
   const directionName = computed(() => directions.find(e => props[e]));
 
+  const attentionClasses = computed(() => ({
+    [props.attentionClass]: true,
+    [ccAttention.notCallout]: !props.callout
+  }))
+
   const wrapperClasses = computed(() => ({
     [ccAttention.base]: true,
     [ccAttention.tooltip]: props.tooltip,
@@ -66,7 +71,7 @@
 </script>
 
 <template>
-  <div :class="[{ 'absolute z-50': !callout }, attentionClass]" ref="attentionRef" v-show="model">
+  <div :class="attentionClasses" 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>

components/expandable/w-expandable.vue

@@ -75,6 +75,7 @@ const chevronClasses = computed(() => ({
 
 const contentClasses = computed(() => ({
   [props.contentClass || '']: true,
-  [ccBox.box + (hasTitle.value ? ' pt-0' : '')]: props.box || props.info,
+  [ccBox.box]: props.box || props.info,
+  [ccExpandable.paddingTop]: hasTitle.value && (props.box || props.info),
 }))
 </script>

components/steps/w-steps.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ref, provide, watchEffect } from 'vue';
+import { computed, ref, provide, watchEffect } from 'vue';
+import { steps as ccSteps } from '@warp-ds/component-classes';
 
 const props = defineProps({
   horizontal: Boolean,
@@ -12,14 +13,20 @@ const left = ref(!props.right);
 provide('steps-vertical', vertical);
 provide('steps-left', left);
 
+const stepsClasses = computed(() => ({
+    [ccSteps.steps]: true,
+    [ccSteps.stepsHorizontal]: props.horizontal 
+  }));
+
 watchEffect(() => {
   vertical.value = !props.horizontal;
   left.value = !props.right;
 });
+
 </script>
 
 <template>
-  <div class="w-full" :class="{ flex: horizontal }">
+  <div :class="stepsClasses">
     <slot />
   </div>
 </template>

components/tabs/w-tabs.vue

@@ -4,7 +4,6 @@ import {
   provide,
   computed,
   ref,
-  toRef,
   watch,
   nextTick,
   onMounted,

components/tag/w-tag.vue

@@ -1,15 +1,5 @@
-<template>
-  <div :class="baseClasses">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default { name: 'wTag' }
-</script>
-
 <script setup>
-import { ribbon as c } from '@fabric-ds/css/component-classes'
+import { ribbon as ccRibbon } from '@warp-ds/component-classes'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -28,18 +18,30 @@ const props = defineProps({
   disabled: Boolean,
   sponsored: Boolean,
   neutral: Boolean
-})
+});
 
 const baseClasses = computed(() => ({
-  [c.base]: props.primary,
-  ['rounded-tr-0 rounded-bl-0']: props.topLeft || props.bottomRight,
-  ['rounded-tl-0 rounded-br-0']: props.topRight || props.bottomLeft,
-  [c.info]: props.info,
-  [c.success]: props.success,
-  [c.warning]: props.warning,
-  [c.error]: props.error,
-  [c.disabled]: props.disabled,
-  [c.sponsored]: props.sponsored,
-  [c.neutral]: props.neutral
+  [ccRibbon.base]: props.primary,
+  [ccRibbon.roundedTopRightBottomLeft]: props.topLeft || props.bottomRight,
+  [ccRibbon.roundedTopLeftBottomRight]: props.topRight || props.bottomLeft,
+  [ccRibbon.info]: props.info,
+  [ccRibbon.success]: props.success,
+  [ccRibbon.warning]: props.warning,
+  [ccRibbon.error]: props.error,
+  [ccRibbon.disabled]: props.disabled,
+  [ccRibbon.sponsored]: props.sponsored,
+  [ccRibbon.neutral]: props.neutral
 }))
 </script>
+
+<template>
+  <div :class="baseClasses">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default { name: 'wTag' }
+</script>
+
+

dev/pages/Tabs.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { wTabs, wTab, wTabPanel } from '#components';
-import { radio, useIsActive } from '#dev-util';
-import { ref, reactive, h } from 'vue';
+import { ref, h } from 'vue';
 
 const Stars = {
   name: 'stars-svg',
@@ -12,34 +11,34 @@ const Stars = {
     }),
 };
 
-const model = ref('home');
+const model = ref('one');
 </script>
 
 <template>
   <div>
     <component-title title="Tabs" />
     <token :state="[model]">
       <w-tabs v-model="model">
-        <w-tab label="Home" name="home">
+        <w-tab label="Tab 1" name="one">
           <stars />
         </w-tab>
-        <w-tab label="Car" name="car">
+        <w-tab label="Tab 2" name="two">
           <stars />
         </w-tab>
-        <w-tab label="Motorcycle" name="motorcycle">
+        <w-tab label="Tab 3" name="three">
           <stars />
         </w-tab>
       </w-tabs>
       <div>
-        <w-tab-panel name="home" v-if="model === 'home'"
-          ><h3 class="mb-0">Welcome home!</h3></w-tab-panel
-        >
-        <w-tab-panel name="car" v-if="model === 'car'"
-          ><h3 class="mb-0">I am a car page</h3></w-tab-panel
-        >
-        <w-tab-panel name="motorcycle" v-if="model === 'motorcycle'"
-          ><h3 class="mb-0">Something something two wheels</h3></w-tab-panel
-        >
+        <w-tab-panel name="one" v-if="model === 'one'">
+          <p class="mb-0">First tab content</p>
+        </w-tab-panel>
+        <w-tab-panel name="two" v-if="model === 'two'">
+          <p class="mb-0">Second tab content</p>
+        </w-tab-panel>
+        <w-tab-panel name="three" v-if="model === 'three'">
+          <p class="mb-0">Third tab content</p>
+          </w-tab-panel>
       </div>
     </token>
   </div>

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.101",
-    "@warp-ds/uno": "1.0.0-alpha.41",
+    "@warp-ds/component-classes": "^1.0.0-alpha.106",
+    "@warp-ds/uno": "1.0.0-alpha.45",
     "cleave-lite": "^1.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "drnm": "^0.9.0",